abhimistry-07 / moviemate

This project is a simple movie search app built using React. The app allows users to search for movies, view a list of movie results, sort the results based on different criteria, view detailed information about each movie, add movie to favorites.

MovieMate

This README file provides detailed information about my project, including its frontend and backend components, routes, and the technologies used.

Table of Contents

1. Installation
2. Frontend
3. Frontend Routes
4. Technologies Used
5. Environment Variables
6. Deployed Link
7. Screenshots

---

Installation

To set up the MovieMate app locally, follow these steps:

1. Clone this repository to your local machine using the following command:

    git clone https://github.com/abhimistry-07/MovieMate

2. Navigate to the project directory:

   cd movie-mate

3. Install the required dependencies by running:

   npm install

4. Start the application:

   npm start

5. Access the platform by visiting http://localhost:3000 in your web browser.

Frontend

The frontend of this project is built using React, a popular JavaScript library for building user interfaces. It includes features like user login, signup, search movies, sorting movies and add movies to favourite. Used styled components for CSS to create a visually appealing and responsive user interface.

Frontend Routes

1. /: Home page with the movie list, featuring searching functionality.
2. /login: Allows users to log in using their credentials.
3. /signup: Provides the functionality for users to create a new account.
4. /favorites: Favorites page contains favourite movies.
5. /movie/:id: Movie details page.
6. *: No page found.

Data Source

The frontend uses the OMDB API to fetch data about movies. Constants like REACT_APP_API_KEY and REACT_APP_URL are used for API requests.

---

Technologies Used

Frontend

• React
• Localstorage (for storing data)
• Styled Components (for CSS)

---

Environment Variables

To configure and run the project, you need to set the following environment variables in your frontend .env file:

• REACT_APP_API_KEY: YOUR OMDB APIKEY
• REACT_APP_URL: OMDB URL

Make sure to set these environment variables according to your development or production environment.

---

Deployed Link

You can access the deployed version of the project by following this link: https://movie-mate-i4ea.vercel.app/

---

Screenshots

Below are screenshots of different pages of the Netflix_Clone website:

1. Home Page:

2. Searching & Sorting:

3. Login Page:

4. Signup Page:

5. Favorites Page:

6. Mobile View:

---