MovieFlix

Live Demo

Welcome to the MovieFlix! This project is a simple movie application built with React, utilizing React props, Styled Components for styling, and state management for features like adding to cart, rating movies, and adding to favorites.

Table of Contents

• Getting Started
  • Prerequisites
  • Installation
• Usage
  • Running the App
• Features
  • Add to Cart
  • Rate Movies
  • Add to Favorites
• Project Structure

Getting Started

Prerequisites

Before you can run the React Movie App, make sure you have the following software installed on your system:

• Node.js (version 14 or higher)
• npm or Yarn

Installation

1. Clone this repository to your local machine:

   gh repo clone aman-q/moviesflix

2. Navigate to the project directory:

   cd movieflix

3. Install the project dependencies:

   If you use npm:

   npm install

   If you use Yarn:

   yarn install

Usage

Running the App

Now that you have installed the project dependencies, you can run the React Movie App:

npm start

or

yarn start

This will start the development server and open the app in your default web browser. You can access it at Movieflix.

Features

Add to Cart

You can add movies to your shopping cart. Click the "Add to Cart" button on a movie card, and it will be added to your cart. You can also remove movies from the cart if needed.

Rate Movies

Rate the movies you watch. Give each movie a star rating to track your favorites.

Add to Favorites

Mark movies as your favorites by clicking the "Add to Favorites" button on a movie card. You can easily access your favorite movies in a dedicated section of the app.

Project Structure

Here's a brief overview of the project structure:

The code you provided is for a React component called App, which is the main component of your movie app. It handles the state and logic for managing movies, their ratings, favorites, and adding/removing them from the cart. Below, I'll generate a file structure for your React project based on the code you provided:

/src
  /components
    MovieList.js
    Navbar.js
  /data
    Moviedetails.js
  App.js
/public
  index.html
/package.json
/README.md

In this structure:

• /src contains the source code for your React application.
  • /components is a directory where you can place your React components. You already have MovieList.js and Navbar.js components.
  • /data is where you store your movie data, such as Moviedetails.js.
  • App.js is the main application component.
• /public contains static assets and the HTML file for your React application.
  • index.html is the HTML template where your React app is mounted.
• package.json is the configuration file for your project, where you define dependencies and scripts.
• README.md is the readme file for your project, which provides information and instructions for using the app.