A modern parking spot booking application built with Next.js that allows users to search, view, and book parking spots in London. The project demonstrates the implementation of complex real-time systems, scalable architecture, and modern development practices.
Homepage:
Homepage1.mov
About Us:
AboutUs.mov
Searcb for booking:
Searchforbooking.mov
Payment:
Payment.mov
Bookings:
MyBookings.mov
Contact Us:
ContactUs.mov
Register:
Register.mov
Login:
Login.mov
Privacy Policy:
Privacy.Policy.mov
Terms of Service:
term1.mov
How it works:
How.it.works.mov
- Urban Congestion: Reduces traffic from parking spot hunting
- Resource Utilisation: Optimises existing parking infrastructure
- Time Efficiency: Eliminates wasted time searching for parking
- Environmental Impact: Reduces emissions from circling for spots
- Revenue Generation: Enables property owners to monetise unused spaces
- Serves both individual drivers and property owners
- Integrates with focuses on London's urban parking challenges
- Supports sustainable urban mobility goals
- Provides real-time parking availability data
- Next.js App Router Architecture: Leverages Next.js 14's App Router for efficient server-side rendering and API routes
- Component-Driven Design: Modular components using Shadcn UI and custom components for reusability
- Repository Pattern: Clean separation of data access through Prisma ORM
- Responsive Design: Mobile-first approach using Tailwind CSS with custom utilities
- RESTful API Design: Well-structured API endpoints following REST principles
- Next.js Server Component for improved SEO and initial load
- Built-in Image Optimisation with Next.js Image component and lazy loading
- Automatic Route Optimisation with dynamic imports and prefetching
- Prisma Query Performance with connection pooling and type-safe queries
- Next.js Build Optimisations including automatic asset minification and bundling
- NextAuth.js Authentication with secure session management
- Role-based Access (Driver/Owner permissions)
- TypeScript Type Safety and input validation
- Next.js Security Headers and XSS protection
- Secure API Routes with middleware protection
- Interactive Location Selection with Leaflet maps
- Custom Spot Markers with location details
- OpenStreetMap Integration for accurate mapping
- Dynamic Location Updates with real-time position
- Responsive Map Controls for mobile and desktop
-
Booking System
- Interactive spot search and selection
- Hourly and daily booking options
- Real-time price calculation
- Secure Stripe payments
- Booking status tracking
-
User Dashboard
- Role-specific dashboard views such as Driver, Owner and Admin
- Active bookings management
- Booking history tracking
- Profile settings and preferences
- Secure session handling
-
TypeScript Integration
- Strict type checking enabled
- Type-safe API routes
- Prisma type generation
-
Testing Framework
- Jest unit testing
- React Testing Library
- Accessibility testing suite
- Security testing suite
-
Code Standards
- Next.js ESLint configuration
- Tailwind class organization
- Consistent project structure
- Unit Testing
- Jest for component testing
- React Testing Library for interactions
- Mock service testing
- Security Testing
- Authentication flow validation
- Authorization checks
- Input sanitization tests
- XSS prevention
- Accessibility Testing
- Screen reader compatibility
- Keyboard navigation
- ARIA compliance
- Colour contrast checks
Framework
- Next.js 14 (App Router)
- TypeScript
- React Server Components
Styling
- Tailwind CSS
- Shadcn UI Components
- Custom UI Components
Maps & Location
- Leaflet Maps Integration
- OpenStreetMap Tiles
- Nominatim Geocoding
Core
- Next.js API Routes
- Server-side TypeScript
- WebSocket Server
Database
- PostgreSQL
- Prisma ORM
- Type-safe Queries
Authentication & Payments
- NextAuth.js
- Stripe Integration
- Session Management
- Node.js 18+
- PostgreSQL database
- npm or yarn
- Clone the repository
git clone https://github.com/HenryOnilude/BookMySpot.git- Install dependencies
cd BookMySpot
npm install- Set up environment variables
# Create .env.local with:
DATABASE_URL=
NEXTAUTH_SECRET=
STRIPE_SECRET_KEY=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
NEXT_PUBLIC_APP_URL=- Set up the database
# Generate Prisma client
npx prisma generate
# Push schema to database
npx prisma db push- Start the development server
npm run dev- Run tests (optional)
# Run all tests
npm run test:allOpen http://localhost:3000 in your browser to see the application.
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run test- Run tests
DATABASE_URL- PostgreSQL connection stringNEXTAUTH_SECRET- JWT encryption keySTRIPE_SECRET_KEY- Stripe API secret keyNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY- Stripe publishable keyNEXT_PUBLIC_APP_URL- Application URLNEXTAUTH_URL- NextAuth URL
Progressive Web App (PWA)
- Offline functionality
- Mobile-optimised experience
- Push notifications
Real-time Features
- WebSocket booking updates
- Live availability tracking
- Instant payment confirmations
Enhanced Booking System
- Advanced search filters
- Dynamic pricing options
- Corporate booking portal
Analytics & Reporting
- Booking analytics dashboard
- Revenue tracking tools
- Usage pattern reports
Platform Extensions
- Public API documentation
- Multiple payment gateways
- Partner integrations
Mobile App Development
- React Native mobile app
- Cross-platform support
- Native device features
Smart Parking Features
- AI-powered spot recommendations
- IoT parking sensors integration
- Predictive pricing model
Advanced Features
- Multi-language support
- Advanced booking algorithms
- Machine learning optimisations
Testing Coverage
- Component Tests: 80%+ coverage
- Security Tests: Key flows covered
- Accessibility Tests: WCAG compliance
- Integration Tests: API endpoints tested
Performance Metrics
- Next.js Server Components
- First Load JS: < 100KB
- Time to Interactive: < 3s
- API Response: < 200ms
Code Quality
- TypeScript Strict Mode
- ESLint Rules: All passed
- Accessibility Score: WCAG 2.1 AA
- Zero known security vulnerabilities