Welcome to the myFlix React app project! This client-side application is crafted to complement the server-side code (REST API and database) developed in the previous movie API project, thereby forming the integral components of the myFlix web application. Representing the seamless integration of server-side functionality with a dynamic and responsive client-side interface, this project showcases the mastery of full-stack JavaScript technologies within the MERN stack (MongoDB, Express, React, and Node.js). Users can explore movie details, create profiles, and curate their favorite film collection.
Link: https://movie-myflix.netlify.app/
Screenshorts:
The primary goal of this project is to develop a single-page, responsive web app using React that allows users to access information about movies, create profiles, and interact with the server-side via REST API endpoints. The app aims to provide a rich user experience through various interface views and features, facilitating interactions with the myFlix server-side.
-
Main View: Displays a list of all movies with images, titles, and descriptions. Provides search functionality, movie selection for details, login/logout, and navigation to the profile view.
-
Single Movie View: Presents detailed information about a single movie, including description, genre, director, and the option to add it to the user's favorites list.
-
Login View: Allows users to log in using their username and password.
-
Signup View: Enables new users to register with their username, password, email, and date of birth.
-
Profile View: Displays user registration details, favorite movies, and allows users to update their information, remove movies from favorites, and even deregister.
-
Actors View: Provides information about different actors.
-
Genre View: Displays data about a genre, including name, description, and example movies.
-
Director View: Offers data about a director, including name, bio, birth and death years, and example movies directed by them.
-
Additional Features: Additional features include sorting movies, creating a "To Watch" list, displaying related movies, and sharing movie information.
To achieve the project's objectives, the following technical requirements are essential:
- The app must be a single-page application (SPA) with state routing for view navigation and sharing URLs.
- Users should be able to filter movies using a search feature.
- Parcel is used as the build tool.
- The app is built using React, written in ES2015+ syntax, and utilizes Bootstrap for styling and responsiveness.
- The application employs function components and React Redux for state management of at least one feature (e.g., filtering movies).
To run the app locally and explore its features, follow these steps:
- Clone this repository.
- Install dependencies using
npm install
. - Use
npm start
to run the development server. - Open your browser and navigate to
http://localhost:3000
.
The app is hosted online at [App Hosting URL].
Feel free to explore the app, access movie information, create profiles, and interact with the myFlix server-side!
This project was created as part of Anastasia Fazius's achievements in full-stack JavaScript development. It utilizes the MERN stack and various technologies to deliver a comprehensive movie app experience.
Have fun exploring movies with the myFlix React app! If you have any questions or feedback, please feel free to reach out to [anastasia.fazius@gmail.com].