Skip to content

Latest commit

 

History

History
144 lines (95 loc) · 6.98 KB

README.md

File metadata and controls

144 lines (95 loc) · 6.98 KB
Raw

Movie-API-Client "Green Screen"

Description

This project is using React, Bootstrap and Redux to build the client-side for a movie application. It complements the server-side (REST API and database). You can see the GitHub repo here. The server- and the client-side use the MERN stack.

How to run and use the project ...

clone it

  1. First clone the file. For instructions, how to clone a github repository, click here.

  2. Go to your local directory, where you stored the cloned file and click the index.html to open in the browser.

use it live

Heroku icon Click here to see my live page on Heroku
Heroku icon Click here to see my live page on Netlify

File Tree

User Stories

  • As a user, I want to be able to access information on movies, directors, and genres so that I can learn more about movies I have watched or am interested in.
  • As a user, I want to be able to create a profile, so that I can save data about my favorite movies.

Key Features

This single-page-application provides the following major views - NavBar, Footer excluded:

Registration

Registering for new users (username, password, email, birthday)

Login

log in with a username and password

Main / Home

  • List of ALL movies
  • Filtering by movie title (visibilityFilter)

Single movie

  • Clicking on one movie in the movie list (main) returns a single movie (image, description, genre, director)
  • allows user to add and remove (toggle) a movie to their list of favorites by clicking a star icon

Genre

Clicking on a link in the Single movie view returns data about the genre of the movie (name, description)

Screenshot_README_GenreView

Director

Clicking on a link in the Single movie view returns data about the director of the movie (name, bio, birth year, death year)

Screenshot_README_DirectorView

Profile

  • Users can update their user info (username, password, email, date of birth)
  • Users can delete their profile / deregister
  • Display of links to favorite movies, which were selected by clicking the star icon in the Single Movie view

Project Dependencies

What challenges did I face, what did I learn?

... from installing React

... from installing Parcel

  • Project setup: in the package.json the entry point may not be "main", because main is used as the output file of the build. Instead define the source code for the library as follows:
"source": "src/index.html"
  • Parcel: the command parcel src/index.html threw an error, saying
@parcel/package-manager: Could not find module "@parcel/transformer-sass" satisfying 2.0.0-rc.0

the solution was to remove the @oarcel/transformer-sass:^2.4.1 from the package.json, deleting node-modules and package-lock.json file and then run npm install. As a result the version 2.0.0-rc.0 was installed and added as a dependencies.

  • Parcel build process threw error, which was solved by adding type="module" to script tag in index.html
  • add to package.json
"start": "parcel", // parcel watch + dev server
"watch": "parcel watch", // parcel build + automatic reload
"build": "parcel build"

... from implementing Redux

Architectural Diagram before implementation

At first, I wanted to implement Actions, Reducers and Store. My IDE told me, that createStore() was recently deprecated, that I could import Legacy_createStore, but it was advised to use configureStore() instead. Since this approach was not as well documented yet, I read and listened to many tutorials trying to find the best combination for the new methods. My resume: It is a lot of boilerplate code for an application, which would not necessarily have needed it for the current complexity. Since Redux was the first library to introduce this store-system, it was good to try it out. But given the choice I would probably choose another less complicated library like Recoil (https://javascript.plainenglish.io/moving-from-redux-to-recoil-42aa9d9cfaad).

... from Deploying on Netlify

First I thought it went very smoothly, but after deployment I realized that reloading pages did lead to a 404 error and the Profile View did not open from the start. I tried all approaches I could find online

  • replace BrowserRouter with HashRouter,
  • add _redirects file,
  • use react-scripts to build the app,
  • add netlify.toml file with general redirect command.

After a lengthy trial-and-error of possible solutions, I specified a netlify.toml file and specified build command, publish folder and wrote Redirects for all routes (e.g. from = "/users/me" to = "/") and Rewrites (status=200). After cleaning cache and redeployment it finally worked. My learning is that parcel and netlify do seem to lead to conflicts. Also, deployment on Heroku is more straightforward - I also deployed there, just to check, if it would work. The see the live app on heroku please click here.