Skip to content

The "myFlix" React app is a client-side web application built using the MERN (MongoDB, Express, React, and Node.js) stack. It serves as a movie information platform, allowing users to access details about different movies, create profiles to save their favorite movies, and interact with various features.

Notifications You must be signed in to change notification settings

nastja4/myFlix-client

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

myFlix React App

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:

  • Home page: Screenshot N1 (1) Screenshot N2 (2)

  • Profile view: Screenshot N3 Screenshot N4

  • Movie card: Screenshot N5 Screenshot N6 Screenshot N7

Project Objective

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.

Features

Essential Views & Features:

  • 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.

Optional Views & Features:

  • 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.

Technical Requirements

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).

Getting Started

To run the app locally and explore its features, follow these steps:

  1. Clone this repository.
  2. Install dependencies using npm install.
  3. Use npm start to run the development server.
  4. Open your browser and navigate to http://localhost:3000.

Hosting

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!

Credits

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].

About

The "myFlix" React app is a client-side web application built using the MERN (MongoDB, Express, React, and Node.js) stack. It serves as a movie information platform, allowing users to access details about different movies, create profiles to save their favorite movies, and interact with various features.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published