A blazing-fast entertainment discovery platform.
Real-time ratings, curated collections, personalised watchlists, and a cinema-grade browsing experience — built for how people actually discover and watch content today.
- Movie Discovery — Browse trending and top-rated movies with a cinema-grade UI
- Genre Browsing — Explore movies filtered by genre
- Search — Find any movie instantly by title
- Detailed Pages — View cast, ratings, awards, and box office info
- Personalised Watchlist — Save and manage movies across sessions
- Dark / Light Mode — Theme toggle with system preference support
- Responsive Design — Optimised for all screen sizes including mobile
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS |
| Data | OMDb API |
| Linting | ESLint 9 |
| Deployment | Vercel |
- Node.js v18+
- A free OMDb API key
# Clone the repository
git clone https://github.com/UtkarshK95/moviebee.git
cd moviebee
# Install dependencies
npm installcp .env.example .envOpen .env and add your API key:
OMDB_API_KEY=your_omdb_api_key_herenpm run devApp runs at http://localhost:3000.
npm run buildmoviebee/
├── public/ # Static assets (icons, images)
├── src/
│ ├── app/ # Next.js App Router pages and API routes
│ ├── components/ # Reusable React components (ui, layout, movie)
│ ├── context/ # React context (WatchlistContext)
│ ├── lib/ # API logic, constants, storage utilities
│ └── types/ # Shared TypeScript interfaces
├── .env.example # Environment variable template
├── tailwind.config.js # Tailwind CSS configuration
├── next.config.mjs # Next.js configuration
└── package.json
- GitHub: https://github.com/UtkarshK95/moviebee
- Buy Me a Coffee: https://buymeacoffee.com/utkarshk95
This project is licensed under the MIT License.
Made with ❤️ by Utkarsh Katiyar