myFlix React App

Live

• https://my-flix-alban.netlify.app/

Overview

The myFlix React App is a single-page, responsive web application that allows movie enthusiasts to access information about different movies, create user profiles, and save their favorite movies. It serves as the client-side component for the myFlix movie application, working in conjunction with the server-side API.

Technologies used

• Javascript
• React JS
• Parcel
• State
• React Forms
• React Routing
• React Bootstrap
• Netlify

Features

Main View

• Display a list of all movies, each with an image, title, and description.
• Implement a search feature to filter the list of movies.
• Allow users to select a movie for more details.
• Provide options for logging out and navigating to the Profile view.

Single Movie View

• Display detailed information about a single movie, including its description, genre, director, and image.
• Enable users to add a movie to their list of favorite movies.

Login View

• Allow users to log in with their username and password.

Signup View

• Allow new users to register by providing a username, password, email, and date of birth.

Profile View

• Display user registration details.
• Allow users to update their profile information, including username, password, email, and date of birth.
• Show a list of favorite movies and allow users to remove movies from their favorites.
• Provide an option for existing users to deregister.

Optional Views (Not Mandatory)

• Actors View: Display information about different actors.
• Genre View: Present data about a genre, including its name and description, along with example movies.
• Director View: Show data about a director, including name, bio, and birth/death years, along with example movies directed by them.
• Single Movie View (Optional Features): Implement additional movie details, actor information, release date, movie rating, tooltips, sharing options, and related/similar movies.
• Main View (Optional Features): Enable sorting movies based on various criteria.
• Profile, Single Movie, and Main Views (Optional Features): Allow users to create a "To Watch" list in addition to their "Favorite Movies" list.

Technical Requirements

• Single-page application (SPA) using state routing for navigation.
• Parcel as the build tool.
• Developed with React library and ES2015+.
• Utilizes Bootstrap for UI styling and responsiveness.
• Utilizes function components.
• Hosted online.

Getting Started

1. Clone the repository.
2. Install Node.js and npm.
3. Run npm install to install dependencies.
4. Start the application using npm start.

Project Structure

• src/ - Source code for the React app.
• public/ - Static files (e.g., index.html).
• package.json - Project dependencies and scripts.
• README.md - Project documentation.
• ... - Other project files.

Contributing

Feel free to contribute to this project by opening issues or submitting pull requests. Your feedback and contributions are welcome.

Screenshots