Smart Parking App

A full-stack parking space booking and management application that allows users to find, book, and pay for parking spots in real-time. Built with the MERN stack (MongoDB, Express.js, React, Node.js) and integrated with Google Maps and Stripe payment processing.

Features

For Renters

• Interactive Map: Browse available parking spots on Google Maps
• Real-time Booking: Book parking spots with custom date/time ranges
• Secure Payments: Integrated Stripe payment processing
• Vehicle Options: Support for different vehicle sizes (sedan, SUV, truck)
• Add-ons: Optional features like covered parking, EV charging, security cameras
• Booking History: Track all your past and upcoming reservations

For Spot Owners

• Add Parking Spots: List your parking spaces on the platform
• Earn Income: Monetize your unused parking spaces
• Manage Listings: Update availability and pricing

Technical Features

• JWT Authentication: Secure user authentication and authorization
• Role-Based Access: Different permissions for renters, owners, and admins
• Responsive Design: Works seamlessly on desktop and mobile devices
• RESTful API: Clean and well-structured backend architecture
• Comprehensive Logging: Detailed logging system for debugging and presentations

Tech Stack

Frontend

• React 19.1.1 - Modern UI library with hooks
• Google Maps API - Interactive map integration
• Stripe.js - Payment processing
• Axios - HTTP client
• Lucide React - Modern icon library
• Tailwind CSS - Utility-first styling

Backend

• Node.js - JavaScript runtime
• Express.js 4.19.2 - Web application framework
• MongoDB - NoSQL database
• Mongoose 8.5.1 - MongoDB ODM
• JWT - JSON Web Tokens for authentication
• bcryptjs - Password hashing
• CORS - Cross-Origin Resource Sharing

Payment Integration

• Stripe - Secure payment processing

Prerequisites

Before running this application, make sure you have the following installed:

• Node.js (v14 or higher)
• MongoDB (v4.4 or higher)
• npm or yarn
• Google Maps API Key
• Stripe Account (for payment processing)

Installation

1. Clone the repository

git clone https://github.com/yourusername/parking-app.git
cd parking-app

2. Install root dependencies

npm install

3. Install backend dependencies

cd backend
npm install

4. Install frontend dependencies

cd ../frontend
npm install

Environment Variables

Backend (.env)

Create a .env file in the backend directory:

# Server Configuration
PORT=5001
NODE_ENV=development

# Database
MONGO_URI=mongodb://127.0.0.1:27017/parking-app

# JWT Secret
JWT_SECRET=your_jwt_secret_key_here

# Stripe (optional for payment features)
STRIPE_SECRET_KEY=your_stripe_secret_key_here

Frontend (.env)

Create a .env file in the frontend directory:

# Google Maps API
REACT_APP_GOOGLE_MAPS_API_KEY=your_google_maps_api_key_here

# Stripe Public Key
REACT_APP_STRIPE_PUBLIC_KEY=your_stripe_public_key_here

Running the Application

Option 1: Run everything at once (Recommended)

From the root directory:

npm start

This will start both the backend server (port 5001) and frontend (port 3000) concurrently.

Option 2: Run separately

Start Backend:

cd backend
npm start

Server will run on http://localhost:5001

Start Frontend:

cd frontend
npm start

React app will run on http://localhost:3000

Option 3: Development mode with auto-reload

cd backend
npm run dev

API Endpoints

Authentication

• POST /api/auth/register - Register a new user
• POST /api/auth/login - Login user

Spots

• GET /api/spots - Get all parking spots
• POST /api/spots - Create a new parking spot (owner only)
• GET /api/spots/:id - Get spot by ID
• PUT /api/spots/:id - Update spot (owner only)
• DELETE /api/spots/:id - Delete spot (owner only)

Bookings

• GET /api/bookings - Get user's bookings
• POST /api/bookings - Create a new booking
• GET /api/bookings/:id - Get booking by ID
• PUT /api/bookings/:id - Update booking
• DELETE /api/bookings/:id - Cancel booking

Database Schema

User

• name: String (required)
• email: String (required, unique)
• password: String (hashed)
• role: Enum ['renter', 'owner', 'admin']
• createdAt: Date

Spot

• name: String
• address: String
• location: Object (lat, lng)
• price: Number
• availability: Boolean
• owner: Reference to User
• amenities: Array

Booking

• user: Reference to User
• spot: Reference to Spot
• startTime: Date
• endTime: Date
• vehicleSize: Enum ['sedan', 'suv', 'truck']
• addons: Array
• totalPrice: Number
• paymentStatus: Enum ['pending', 'completed', 'failed']
• stripePaymentId: String

Testing

# Run frontend tests
cd frontend
npm test

Features in Detail

Multi-Step Booking Process

1. Date & Time Selection: Choose start and end times for parking
2. Vehicle & Options: Select vehicle size and optional add-ons
3. Payment: Secure payment processing via Stripe

Dynamic Pricing

• Base rate per hour
• Variable pricing based on vehicle size
• Additional charges for amenities (covered parking, EV charging, etc.)

Real-time Availability

• Spots update availability in real-time
• Prevent double bookings
• Visual indicators on map

Security Features

• Password hashing with bcryptjs
• JWT-based authentication
• Protected routes with middleware
• CORS configuration
• Environment variable protection
• Secure payment processing via Stripe

Future Enhancements

• Email notifications for bookings
• SMS alerts for parking reminders
• Rating and review system
• Admin dashboard for analytics
• Mobile app (React Native)
• Push notifications
• Advanced search filters
• Favorite spots feature
• Recurring bookings

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Google Maps Platform for mapping services
• Stripe for payment processing
• MongoDB for database solutions
• The amazing React and Node.js communities

Support

For support, email akkiusemail@gmail.com or create an issue in the GitHub repository.

Star this repository if you find it helpful!