A comprehensive movie tracking and social platform built with React and Node.js. Track movies you want to watch, have watched, and discuss them with friends.
- User registration and authentication with JWT
- Profile customization (display name, bio, avatar, favorite genres)
- Password management
- Watchlist - Movies you want to watch
- Watched - Movies you've seen
- Favorites - Your favorite movies
- Add ratings, notes, and watch dates
- Move movies between lists
- Send and accept friend requests
- View friends' movie lists
- Discussion forums for movies
- Like and comment on discussions
- User search
- Set reminders for upcoming movie releases
- Multiple notification types
- Track active and sent reminders
- React 19
- React Router DOM
- Vite
- TailwindCSS
- TMDB API integration
- Node.js
- Express.js
- MongoDB with Mongoose
- JWT authentication
- bcryptjs for password hashing
- Node.js (v16 or higher)
- MongoDB (local or MongoDB Atlas)
- TMDB API key (get one at https://www.themoviedb.org/settings/api)
- Clone the repository:
git clone https://github.com/ashyune/MovieTrackr.git
cd MovieTrackr- Install frontend dependencies:
npm install- Install backend dependencies:
cd backend
npm install- Set up environment variables:
Frontend (root directory) - Create .env file:
VITE_API_URL=http://localhost:5000/api
VITE_TMDB_API_KEY=your_tmdb_api_key_hereBackend - Create backend/.env file:
PORT=5000
MONGODB_URI=mongodb://localhost:27017/movietrackr
JWT_SECRET=your_jwt_secret_key_change_this_in_production
JWT_EXPIRE=7d
TMDB_API_KEY=your_tmdb_api_key_here- Start MongoDB (if running locally):
mongod- Start the backend server:
cd backend
npm run dev- Start the frontend (in a new terminal):
npm run dev- Open your browser and navigate to
http://localhost:5173
MovieTrackr/
├── backend/
│ ├── config/
│ │ └── db.js # MongoDB connection
│ ├── middleware/
│ │ └── auth.js # JWT authentication middleware
│ ├── models/
│ │ ├── User.js # User model
│ │ ├── List.js # Movie lists model
│ │ ├── Reminder.js # Reminders model
│ │ └── Discussion.js # Discussions model
│ ├── routes/
│ │ ├── auth.js # Authentication routes
│ │ ├── users.js # User routes
│ │ ├── lists.js # Lists routes
│ │ ├── reminders.js # Reminders routes
│ │ ├── discussions.js # Discussions routes
│ │ └── friends.js # Friends routes
│ ├── server.js # Express server
│ └── package.json
├── src/
│ ├── api/
│ │ ├── tmdb.js # TMDB API integration
│ │ └── userApi.js # Backend API integration
│ ├── components/
│ │ ├── MovieCard.jsx # Movie card component
│ │ ├── Navbar.jsx # Navigation bar
│ │ └── SearchBar.jsx # Search component
│ ├── context/
│ │ └── AuthContext.jsx # Authentication context
│ ├── hooks/
│ │ └── useAuth.js # Authentication hook
│ ├── pages/
│ │ ├── Home.jsx # Home page
│ │ ├── Browse.jsx # Browse movies
│ │ ├── Login.jsx # Login page
│ │ ├── Signup.jsx # Registration page
│ │ ├── Profile.jsx # User profile
│ │ ├── MyList.jsx # User's lists
│ │ ├── Reminders.jsx # Reminders page
│ │ ├── Discussions.jsx # Discussions page
│ │ ├── StartDiscussion.jsx # Create discussion
│ │ └── friends.jsx # Friends page
│ ├── App.jsx
│ └── main.jsx
└── package.json
See backend/README.md for detailed API documentation.
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
- Movie data provided by The Movie Database (TMDB)
- Built with React and Vite