Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manni2000/movie_explorer
Full stack movie explorer application
https://github.com/manni2000/movie_explorer
mern-stack vercel-deployment
Last synced: about 6 hours ago
JSON representation
Full stack movie explorer application
- Host: GitHub
- URL: https://github.com/manni2000/movie_explorer
- Owner: manni2000
- Created: 2024-07-27T12:32:51.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-08-24T07:35:27.000Z (3 months ago)
- Last Synced: 2024-08-24T08:39:51.955Z (3 months ago)
- Topics: mern-stack, vercel-deployment
- Language: JavaScript
- Homepage: https://mern-movie-explorer.vercel.app/
- Size: 429 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# StarStream
**Description:**
Movie Explorer is a full-stack web application designed to allow users to search for and explore detailed information about movies. This application integrates a React-based frontend with a Node.js/Express backend and leverages MongoDB for data storage. It also utilizes The Movie Database (TMDB) API to fetch movie data.
### Key Features:
1. **Search Functionality:**
- Users can search for movies using keywords.
- The application fetches and displays search results from TMDB API.
2. **Movie Details:**
- Users can click on a movie to view detailed information, including the synopsis, cast, crew, and reviews.
- The details page provides a comprehensive overview of the selected movie.
3. **User Authentication:**
- The application includes user authentication, allowing users to sign up, log in, and log out.
- User sessions are managed to provide a personalized experience.
4. **Favorites List:**
- Logged-in users can add movies to their favorites list.
- Users can view and manage their list of favorite movies.
5. **Responsive Design:**
- The application is designed to be responsive and works well on both desktop and mobile devices.
### Technical Details:
**Frontend:**
- **Framework:** React
- **Styling:** CSS and Material-UI for responsive design.
- **State Management:** React hooks and context API for managing application state.
- **API Integration:** Axios for making HTTP requests to TMDB API and the backend server.
**Backend:**
- **Framework:** Node.js with Express.js
- **Database:** MongoDB for storing user data and favorite movies.
- **Authentication:** JSON Web Tokens (JWT) for secure user authentication and session management.
- **API Routes:** Defined routes for user actions such as login, signup, and managing favorites.
### Folder Structure:
- **Frontend:** Contains the React application.
- **src/components:** React components such as MovieList, MovieDetail, and Navbar.
- **src/pages:** Different pages like Home, Login, Signup, and Favorites.
- **src/services:** Services for making API calls.
- **Backend:** Contains the Node.js server and API.
- **controllers:** Functions to handle requests and business logic.
- **models:** Mongoose models for MongoDB collections.
- **routes:** Defines the API endpoints.
- **middleware:** Middleware for authentication and error handling.
# Steps to Run the Project
1. Clone the Repository:
git clone https://github.com/manni2000/Movie_Explorer.git
cd Movie_Explore
2. Install Dependencies:
-
For Backend:
cd backend
npm install
-
For Frontend:
cd ../frontend
npm install
3. Set Up Environment Variables:
Create a .env file in the backend directory and add the following:
MONGODB_URL = mongodb+srv://username:<password>@cluster0.p6x7dxw.mongodb.net/mydb
PORT = 5000
TOKEN_SECRET = ABC
TMDB_BASE_URL = https://api.themoviedb.org/3/
TMDB_KEY = XXXX96bb4e2473d8c75b78591deXXXX
4. Start the Backend Server:
-
For Backend:
cd backend
npm start
# or
npm run dev
-
For Frontend:
cd ../frontend
npm start
# Preview
