ParkX is a web application that helps solve parking conflicts through QR code-based notifications. Vehicle owners register their vehicles and get a unique QR code. When someone needs them to move their vehicle, they can simply scan the QR code and send a notification.

• Vehicle Registration: Register your vehicle and get a unique QR code
• QR Code Generation: Generate printable QR codes for your dashboard
• QR Code Scanning: Scan any ParkX QR code to notify the vehicle owner
• Push Notifications: Receive instant notifications via Firebase Cloud Messaging
• Real-time Updates: See notifications in real-time on your dashboard

• Frontend: React.js (Vite)
• Backend: Firebase (Firestore, Cloud Functions)
• Database: Firestore
• Notifications: Firebase Cloud Messaging (FCM)
• QR Code: qrcode.react, html5-qrcode

• Node.js 18+
• Firebase CLI
• A Firebase project

1. Clone the repository:

   git clone <repository-url>
   cd parkx

2. Install dependencies:

   npm install
   cd functions && npm install && cd ..

3. Set up Firebase:

   • Create a Firebase project at Firebase Console
   • Enable Firestore and Cloud Messaging
   • Copy your Firebase config

4. Configure environment variables:

   cp .env.example .env

   Fill in your Firebase configuration values.

5. Update the service worker:

   • Edit public/firebase-messaging-sw.js with your Firebase config

Run the development server:

npm run dev

1. Build the app:

   npm run build

2. Deploy to Firebase:

   firebase deploy

parkx/
├── src/
│   ├── components/       # Reusable components
│   │   ├── QRGenerator.jsx
│   │   └── QRScanner.jsx
│   ├── config/          # Firebase configuration
│   │   └── firebase.js
│   ├── pages/           # Page components
│   │   ├── Home.jsx
│   │   ├── Register.jsx
│   │   ├── Dashboard.jsx
│   │   ├── Scan.jsx
│   │   └── Notify.jsx
│   ├── services/        # API services
│   │   └── notificationService.js
│   ├── App.jsx
│   └── App.css
├── functions/           # Firebase Cloud Functions
│   └── index.js
├── public/
│   └── firebase-messaging-sw.js
├── firestore.rules
├── firebase.json
└── package.json

1. Vehicle Owner:

   • Register vehicle on the app
   • Allow notification permissions
   • Download and print QR code
   • Place QR code on vehicle dashboard

2. Person Needing to Notify:

   • Open the app and go to "Scan"
   • Scan the QR code on the vehicle
   • Select or write a message
   • Send notification

3. Vehicle Owner Receives:

   • Push notification on their device
   • Real-time update on the dashboard

MIT