Buster Block

Overview#

Buster Block is a full-stack movie review platform that brings film enthusiasts together to share their passion for cinema. Users can add movies, write detailed reviews, and rate films on a 5-star scale. Built with Next.js 15, MongoDB, and Clerk authentication, the platform demonstrates modern full-stack development practices with a focus on security, validation, and user experience.

Key Features#

🎬 Complete Movie Management#

Full CRUD (Create, Read, Update, Delete) operations for movies:

Add new movies with title, director, release year, and genre
Edit existing movie information
Delete movies (with proper authorization)
Browse all movies in a responsive grid layout

⭐ Rating & Review System#

Comprehensive review functionality:

5-star rating system for quick feedback
Detailed written reviews for in-depth opinions
One review per user per movie (prevents spam)
View all reviews for any movie
User attribution for all reviews

🔒 Secure Authentication#

Clerk integration provides:

Email/password authentication
Social login options
Protected routes and API endpoints
User session management
Secure user identification for reviews and edits

📝 Input Validation#

Zod schema validation ensures:

Data integrity at API level
Type-safe request/response handling
Clear error messages for invalid input
Prevention of malformed data in database

🌐 RESTful API#

Well-structured API with proper HTTP methods:

GET /api/movies - Fetch all movies
POST /api/movies - Create new movie
GET /api/movies/:id - Fetch single movie
PUT /api/movies/:id - Update movie
GET /api/movies/:id/reviews - Fetch reviews
POST /api/movies/:id/reviews - Create review

Technical Implementation#

Full-Stack Architecture#

Frontend: Next.js 15 with App Router and React Server Components
Backend: Next.js API Routes with TypeScript
Database: MongoDB with Mongoose ODM
Authentication: Clerk for secure user management
Validation: Zod for runtime type checking

Database Schema#

Movie Model:

{
  title: string;
  director: string;
  releaseYear: number;
  genre: string;
  createdBy: string; // Clerk user ID
  reviews: Review[];
  createdAt: Date;
  updatedAt: Date;
}

Review Model:

{
  movieId: ObjectId;
  userId: string; // Clerk user ID
  userName: string;
  reviewText: string;
  rating: number; // 1-5
  createdAt: Date;
}

API Design Patterns#

Proper HTTP Status Codes:

200 OK - Successful GET/PUT
201 Created - Successful POST
400 Bad Request - Validation errors
401 Unauthorized - Missing authentication
403 Forbidden - Insufficient permissions
404 Not Found - Resource doesn't exist
409 Conflict - Duplicate review attempt
500 Internal Server Error - Server errors

Error Handling: Consistent error response format:

{
  "success": false,
  "error": "Descriptive error message"
}

Security Measures#

Authentication Checks:

All write operations require valid Clerk session
User ownership verification for updates/deletes
Protected API routes with middleware

Data Validation:

Zod schemas validate all incoming data
Type-safe database operations with Mongoose
Sanitized user input to prevent injection

Authorization:

Users can only edit/delete their own movies
Review ownership tied to Clerk user ID
One review per user per movie enforcement

Challenges & Solutions#

Challenge: Preventing Duplicate Reviews#

Solution: Implemented a unique compound index on movieId and userId in MongoDB. The database enforces the constraint, and the API returns a clear 409 Conflict error if a user tries to review the same movie twice.

Challenge: Secure User Attribution#

Solution: Used Clerk's authentication system to securely identify users. User IDs from Clerk are stored with movies and reviews, ensuring proper ownership and preventing impersonation.

Challenge: Type Safety Across Stack#

Solution: TypeScript throughout the entire stack, combined with Zod for runtime validation. This catches errors at compile time and runtime, ensuring data integrity.

Challenge: Database Connection Management#

Solution: Implemented a connection pooling pattern that reuses MongoDB connections across serverless function invocations, improving performance and reducing connection overhead.

Development Workflow#

Testing with Postman#

Included Postman collection (Buster-Block-API.postman_collection.json) provides:

Pre-configured requests for all endpoints
Example request bodies
Environment variables for easy testing
Documentation for each endpoint

Local Development#

MongoDB connection via connection string
Clerk development keys for authentication
Hot reload with Next.js dev server
TypeScript type checking in real-time

Deployment#

Automatic deployment to Vercel on git push
Environment variables configured in Vercel dashboard
Production MongoDB cluster
Clerk production instance

Results#

✅ Fully functional movie review platform
✅ Secure authentication and authorization
✅ Type-safe full-stack application
✅ RESTful API with proper status codes
✅ Responsive design for all devices
✅ Production-ready deployment on Vercel

Future Enhancements#

🔍 Advanced search and filtering
🏷️ Movie tags and categories
👥 User profiles and activity feeds
💬 Comment threads on reviews
📊 Rating statistics and analytics
🎯 Personalized movie recommendations
📱 Progressive Web App (PWA) support
🖼️ Movie poster uploads
🔔 Notification system
📈 Trending movies section

Lessons Learned#

This project provided valuable experience with:

Full-stack Next.js development with App Router
MongoDB database design and Mongoose ODM
Third-party authentication integration (Clerk)
RESTful API design and best practices
Input validation with Zod schemas
TypeScript in a full-stack context
Secure authorization patterns
Error handling and status codes
Deployment and environment management
API testing with Postman

Buster Block demonstrates how modern web technologies can create secure, scalable full-stack applications with excellent developer experience and user experience.

"All we have to decide is what to do with the films that are given to us."