Smart Parking Management System

A modern Next.js + TypeScript web application for intelligent parking lot management with real-time slot booking, QR-based ticketing, and multi-role access control.

Built by Team: Priyanshu Dan (002311001053), and Sushar Hembram (002311001041), Anay Saha (002311001054)

For the BETA VERSION of this project follow this repository given here, from which the architecture inspiration adn knowldge and work was taken

Repository Link :: https://github.com/Priyanshu-Dan/SmartParkingSystem

Website Link :: http://smart-park-ify.vercel.app/

This app after adding few stuffs

Website :: https://smart-park-parking-hub.onrender.com

Frontend Inspiration

Repository Link :: https://github.com/AnaySaha2005/webtech-eval

About This Project

We built a complete smart parking solution using modern web technologies. Our system allows users to book parking spots in real-time, receive QR-coded tickets, and pay only for the time actually used. Administrators can configure pricing, monitor lot occupancy, and track parking activity.

The development process involved iterative improvements:

• Anay built the initial frontend architecture and UI components
• Priyanshu designed and implemented the backend architecture and database layer with extraordinary power and scalability
• Sushar refined both frontend and backend, optimizing performance and user experience
• This cycle repeated, with each iteration improving code quality and features

The system includes offline-first capabilities, ensuring the app continues to work even when the database is unreachable, with automatic fallback to localStorage.

Quick Start

Get the application running in 3 steps:

cd smartpark
npm install
npm run dev

Then open http://localhost:3000 in your browser.

Note: See smartpark/.env.local instructions below for database configuration.

Repository Structure

.
├── smartpark/                 # Main Next.js application
│   ├── app/                  # App Router with route groups
│   ├── components/           # React components
│   ├── lib/                  # Utilities and Mongoose models
│   ├── models/               # Database schemas
│   ├── public/               # Static assets
│   ├── scripts/              # Build and seed scripts
│   ├── .env.local            # Environment config (not in git)
│   ├── package.json
│   └── README.md             # Full project documentation
├── LICENSE                   # Project license
└── README.md                 # This file

Key Features

• User Management: JWT authentication with role-based access (user/admin)
• Parking Operations: Real-time slot booking, vehicle-type zoning, QR ticketing
• Admin Dashboard: Pricing config, occupancy monitoring, ticket tracking
• Resilience: Automatic offline fallback with localStorage when MongoDB is unavailable
• Modern Tech Stack: Next.js 16, React 19, TypeScript, Tailwind CSS, MongoDB

Tech Stack Overview

• Frontend: Next.js 16 (App Router) + React 19 + Tailwind CSS 4
• Backend: Node.js API routes with Mongoose ODM
• Database: MongoDB Atlas (with localStorage fallback)
• Authentication: JWT tokens with bcryptjs hashing
• UI/UX: Lucide icons, Leaflet maps, QR code generation
• Build: Turbopack for fast development builds

Documentation

For detailed information, see the smartpark/README.md file, which includes:

• Complete feature documentation
• Full tech stack details
• Detailed setup instructions
• Project directory structure
• Pricing model and slot architecture
• Troubleshooting guide
• Future enhancement roadmap

Environment Setup

Create a .env.local file inside the smartpark/ directory:

MONGODB_URI=mongodb+srv://user:password@cluster.mongodb.net/smartpark
JWT_SECRET=your-secret-key-min-32-characters-long

If you don't have MongoDB, the app will automatically fall back to localStorage.

Development Commands

From the smartpark/ directory, we use these commands:

npm run dev      # Start development server with hot reload (what we use daily)
npm run build    # Create production build
npm run start    # Run production server (for deployment)
npm run lint     # Run ESLint checks (we do this before commits)
npm run seed:slots  # Seed database with initial slot data (what Priyanshu set up)

Project Highlights

Through our iterative development process, we achieved:

• 🎯 Role-Based Access: We built separate flows for users and administrators with proper authorization
• 🗺️ Interactive Maps: We integrated Leaflet.js for lot selection with real-time availability tracking
• 🛢️ Flexible Storage: Our system works seamlessly with MongoDB or localStorage (designed by Priyanshu and refined by Sushar)
• ⚡ Fast Development: We use Turbopack to enable rapid hot reloads during development
• 🔐 Secure Auth: We implemented JWT tokens with bcrypt password hashing (Priyanshu's backend expertise)
• 📱 Responsive Design: We built a mobile-friendly UI with Tailwind CSS for any device
• 🎫 QR Tickets: We implemented client-side QR code generation for parking tickets

Contributing

This is a collaborative lab project for the Smart Parking Management course. We follow Next.js and React best practices throughout our codebase. All development was done by our team: Anay, Priyanshu, and Sushar.

Support

For issues or questions, refer to the smartpark/README.md troubleshooting section or check the code comments throughout the project that we documented.