https://github.com/jayeshkhandelwal09/reelify
A Movie Database Application
https://github.com/jayeshkhandelwal09/reelify
axios bcrypt context-api express googleoauth2 jsonwebtoken mongo mongoose netlify nodejs passportjs react-router-dom reactjs render tailwindcss
Last synced: 2 months ago
JSON representation
A Movie Database Application
- Host: GitHub
- URL: https://github.com/jayeshkhandelwal09/reelify
- Owner: Jayeshkhandelwal09
- Created: 2025-01-09T19:12:23.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-16T22:19:21.000Z (4 months ago)
- Last Synced: 2025-01-16T22:26:13.492Z (4 months ago)
- Topics: axios, bcrypt, context-api, express, googleoauth2, jsonwebtoken, mongo, mongoose, netlify, nodejs, passportjs, react-router-dom, reactjs, render, tailwindcss
- Language: JavaScript
- Homepage: https://reelifymoviedb.netlify.app
- Size: 358 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MovieDB
Welcome to **MovieDB**, a sleek and fast movie database application built using the **MERN** stack. In just 3 days, this app was crafted to help users explore, search, and manage their movie favorites with a smooth and intuitive experience. Whether you’re a movie enthusiast or someone who just wants to keep track of your favorite films, MovieDB has you covered.
## Features
- **Authentication & Authorization:** Sign up, login, and authenticate using Google. Only authenticated users can access their personal favorites.
- **Private Routing:** Secure access to your **Favorites Page**, which is protected and only accessible to authenticated users.
- **Favorites Management:** Add or remove movies from your favorites with ease. Your favorite list is stored securely and updated in real-time.
- **Dark Mode:** A sleek dark theme to reduce eye strain during long movie-watching sessions.
- **Search Functionality with Debouncing:** Effortlessly search through a massive database of movies with optimized search performance using debouncing.
## Pages
- **Home Page:** The landing page where users can discover new movies, view movie details, and initiate searches.
- **Movie Details Page:** View detailed information about each movie including ratings, genre, description, and more.
- **Favorites Page:** A private route where authenticated users can manage their list of favorite movies.
## Installation
To get MovieDB running locally, follow these steps:
### Prerequisites
Ensure you have the following installed:
- **Node.js** (version 14 or higher)
- **MongoDB** (you can use a local or cloud instance like MongoDB Atlas)
### Steps
1. **Clone the repository:**
```bash
git clone https://github.com/yourusername/movieDB.git
cd client/movieDB
```
2. **Install backend dependencies:**
```bash
cd server
npm install
```
3. **Install frontend dependencies:**
```bash
cd client/moviedb
npm install
```
4. **Setup environment variables:**
Create a `.env` file in both the backend and frontend directories with the necessary environment variables (like your MongoDB URI and Google OAuth credentials).
5. **Start the server:**
For server:
```bash
cd server
npm run dev
```
For frontend:
```bash
cd client/moviedb
npm start
```
6. **Open your browser:** Navigate to `http://localhost:3000` to start using MovieDB!
## Tech Stack
- **Frontend:**
- React
- ContextApi (for state management)
- React Router (for routing)
- Axios (for HTTP requests)
- Tailwind (for UI components)
- **Backend:**
- Node.js
- Express
- MongoDB (with Mongoose for ORM)
- Passport.js (for Google Authentication)
- **Authentication:**
- Google OAuth 2.0
## Screenshots
You can add screenshots of your application by embedding images in the following format in your README file:
## How to Use
1. **Authentication:** Upon visiting the site, click the Google login button to authenticate or sign up. Once logged in, you can start adding movies to your favorites.
2. **Search:** Start typing in the search bar, and the app will show movie results in real-time, thanks to debouncing that optimizes performance.
3. **Movie Details:** Click on any movie to see detailed information, such as the plot, actors, director, and more.
4. **Favorites:** If you're logged in, you can add any movie to your favorites by clicking the “Add to Favorites” button. You can also remove movies from your list at any time.