Project Overview
Objective
Using React, build the client-side for an application called myFlix based on its existing server-side code (REST API and database).
Github:
https://github.com/sms165/movie-clientNetlify (live version):
https://myflix-moviedb.netlify.app/Username: tester
Password: password
Planning
User Stories
- As a user, I want to be able to access information on movies, actors, directors and genres so that I am able to learn more.
- As a user, I want to be able to create a profile, make a favorites list to save favorite movies, and be able to update my profile data.
User Flow
Wireframes
Style Guide
Color Palette
I oriented the style of the website on the classical simple style in a dark theme.
Background Color:
#0D1A25
Component Color:
#122535
Link Hover Color:
#F90606
Button Color:
#59A9F0
Development
Technologies Used
- Programmed using the MERN tech stack which stands for:
- MongoDB: Database used to store movie data
- Express: Node.js web framework
- React: JavaScript framework
- Node.js: runtime environment , allows JavaScript to be used on the server side
- HTML
- CSS / React Bootstrap
Challenges:
-
As the lessons on CareerFoundry were not up to date with the new
versions for example of React and React Router, I had to rely on
other sources to program this site. As a web developer it is
important to stay up to date and continue learning, which is why I
choose to program with the current versions.
-
I studied the official documentation to help me complete the
tasks, which was difficult at times but it gave me the
opportunity to gain more experience with reading documentations.
-
I decided to include more views, and functions than the lesson
stated to have a chance to learn more.
-
I wanted to make the password change function on the user update
view more secure. The user needs to type in their old password
and their new password, then in the backend the program checks
if the old password is the same as that which is saved in the
database and only if it returns true the password will be
changed.
-
A consequence of this was that I had to go back to the API to
make a new endpoint which has the logic behind it to handle
the password comparison and change.