This project was created as part of the curriculum for the Full Stack Web Development Program at Career Foundry.1 It is the client-side / Front-End User Interface, built using React and React-Bootstrap, for previously created server-side component of a movie themed MERN Single Page Application. Currently hosted on Netlify (https://movie-api-pgannon.netlify.app/login).
Pre-existing Server Side Back-End source code can be viewed here: (https://github.com/notavailable4u/movie_api-2)
- Main View
- Returns ALL movies to the user (each movie item with an image, title, and description)
- Filtering the list of movies
- Ability to select a movie for more details
- Ability to log out
- Ability to navigate to Profile view
- Single Movie View
- Returns data (description, genre, director, image) about a single movie to the user
- Login View
- Allows users to log in with a username and password
- Sign-Up View
- Allows new users to register (username, password, email, date of birth)
- Profile View
- Displays user registration details
- Allows users to update their info (username, email)
- Displays favorite movies
- Allows users to remove a movie from their list of favorites
- Allows existing users to deregister
- The application must be a single-page application (SPA)
- The application must use state routing to navigate between views and share URLs
- The application must give users the option to filter movies
- The application must use Parcel as its build tool
- The application must be written using the React library and in ES2015+
- The application must use Bootstrap as a UI library for styling and responsiveness
- The application must contain function components
- The application must be hosted online
- The application may use React Redux for state management of at least one feature (i.e., filtering movies)
- Full Stack JavaScript Development
- MERN (MongoDB, Express, React, and Node.js)
The objective of the project, as stated in Project Brief provided by Career Foundry, was:
Using React, build the client-side for an app called myFlix based on its existing server-side code (REST API and database).
- JavaScript ES2015+
- Express
- React
- Bootstrap 5
- Parcel (We were required to use Parcel - though for the life of me I cannot understand why since it doesn't provide any functionality that React doesn't already provide.)
Footnotes
-
If you are considering enrolling in the Full Stack Web Development Program at Career Foundry, I cannot strongly enough caution you to NOT ENROLL. The lessons are filled with so much deprecated code and blatant errors that it is criminal. Feel free to contact me if you would like more detailed information. ↩