geekDb: A Fullstack Movie Database Built with Next.js
geekDb is a full-stack web application inspired by IMDB, developed as part of my journey to deepen my skills in frontend and backend web development using the modern Next.js framework. The project focuses on building a user-friendly, responsive interface with real-time CRUD operations connected to a MongoDB backend.
🎯 Project Goals
- Build a scalable full-stack web app with Next.js and MongoDB
- Practice server-side rendering (SSR) and API route handling
- Create a modern UI using Tailwind CSS
- Implement basic CRUD functionality for movie entries
⚙️ Tech Stack
- Frontend: React, Next.js, TailwindCSS
- Backend: Next.js API Routes, MongoDB
- Database: MongoDB Atlas (cloud-hosted NoSQL)
- Authentication: Simple local routing (future version could use OAuth/Auth0)
📦 Features
- 📋 List of movies with title, genre, release year, and cover image
- ➕ Add new movie entries via a form
- 📝 Edit existing movies
- ❌ Delete movies
- 🔍 Client-side routing and clean navigation
🧠 What I Learned
- How to connect a Next.js frontend with a cloud-hosted MongoDB backend
- Writing modular API endpoints inside the
/pages/apidirectory - Styling modern UI layouts using Tailwind CSS utility classes
- Handling dynamic routing and data fetching in SSR
🚧 Future Improvements
- Add user authentication and protected routes
- Implement search and filter capabilities
- Add star ratings and user reviews
- Optimize performance with ISR (Incremental Static Regeneration)
🔗 Source Code
Check out the full repository here:
👉 github.com/matlesz/geekDb
This project helped reinforce full-stack JavaScript concepts and prepare me for real-world development tasks that involve both UI design and backend API development. It’s a key part of my portfolio as I work toward a role in cybersecurity with a solid foundation in web technologies.