techfems-projects-and-resources/project-film-app1

Wtih one example solution for 💻 💻 react-film-app project (level 1)

Project Film App (three levels)

The goal of this project is to practice working with React, specifically reacting to changes

We will be using HTML, CSS, JavaScript and React.

Basic functionality: we want our app to request data from the Studio Ghibli API (https://ghibliapi.herokuapp.com), to show films, locations, film directors etc.

Additional functionality: search function so that the user can search films, locations, and people.

Note: the basic CSS code has been created in the index.css file. Don't forget to import the css! This is what the app will look like (left: basic version, right: full version including search functionality):

---

For starters: level 1

Steps:

1. Create a new folder on your local computer with the name: project-react-film-app
2. Track your code with Git by using git init in the terminal
3. Create an index.html file with the general template code (there is a shortcut you can use!)
4. Create a style.css file and add this to your HTML file as <link> (check how to add CSS to an HTML file)
5. Make sure you have Ghibli Film App as the title in your HTML (this will show in the tab when your app runs in the browser)
6. Build the page according to the example and improve the design any way you want (it is not very attractive as it is now)
7. In the resources_info repository you will find links to websites where you can download pictures, images, icons etc. for free if you want to change the layout, font, colours etc.
8. Feel free to use Bootstrap if you also want to practise that 😊

---

For more advanced students: level 2 (first part)

Basic project:

1. Create a project folder using npx create-react-app
2. Delete all unnecessary code
3. Make sure you have Ghibli Film App as the title in your HTML (this will show in the tab when your app runs in the browser)
4. Create a header in App.js (see example image above)
5. Create a Films.js component
6. In Film.js write the code to get all the films from Studio Ghibli when the page loads (use the Ghibli API: https://ghibliapi.herokuapp.com)
7. Create const films and setFilms to update this; you use React's useEffect() method to load the films on the page with a fetch() request
8. Show the films on the screen as in the example image above: a header with the film title, and then the film details Director, Producer, Release date and Rotten Tomato Score
9. Add any styling you like to make it look better and more professional

---

For graduates: level 2 (second part)

Full project:

1. Create a Search.js component
2. Add an input field for a search plus a button with Search
3. Add search functionality to your app so that when the user types one character in the search box, the results (film titles starting with that character) should show up immediately; each time when more characters are typed, the results that do not match should disappear
4. For this, you have to create a search variable and a function to update the search in the Films component; the initial state is an empty string
5. The Search component gets passed the update function from Films as a prop
6. In the Search component, you create an input field for the search string; use the onChange event to update the search variable every time a character is typed as input
7. The Films component should use the search variable that is updated continuously for a filter across the film titles
8. The search string should return any film title that starts with the string that is typed into the input field; it should show the header with the film name, and the details Director, Producer, Release date and Rotten Tomato Score
9. Add a button to clear the search. When the Clear search button is clicked, the filtered films are cleared and instead the full film list shows on the page
10. When the Clear search button is clicked, the search input is removed as well

---

.... and for an extra challenge! level 3

       

You are going to change the app layout completely (see examples above):

1. Align the content to the left
2. Show the film title at the top, and the description of the film under the title
3. Create a button under the film description that says 'Show extra info' when the button is not clicked (view is not expanded).
4. When the button is clicked, it should say 'Hide extra info'
5. When the button is clicked, the view should expand to show the following details:
   1. Original title
   2. Original title romanised
   3. Director
   4. Producer
   5. Released in: this should show the year
   6. Running time to be shown as h:m, for example: 1h:15m

---

Please note:

If you want to download a project on your local machine, do not fork it but clone the repo locally, on your computer. After that, create a new repo in your own GitHub account with exactly the same project name, and link the local repo to the remote repo in your GitHub account (see below). Why should you clone and not fork? It will show the project as your own project and not a fork of someone else's project. You can use it as a project for your portfolio.

You can connect a local project to a new, empty GitHub repo as follows. It is very good to know this so that you can start a project locally and afterwards link it with a remote GitHub repo.

If you clone the project without forking it, you will have to change the 'remote origin' repository after cloning. Check the remote of your local project using git remote -v. To link your local project to your own GitHub repo, you need to change the remote origin. Have a look at this article: https://devconnected.com/how-to-change-git-remote-origin/. With git remote -v you can again check if remote origin has been reset and now shows the name of your GitHub account.

---