Parking Hub

By Team Wild Tech

Services Used

Backend

• User Authentication: Firebase Authentication
• Database Management: Firebase Firestore
• Media Storage: Firebase Storage
• Push Notification Service: Firebase Cloud Messaging

Frontend

• User Interface Theme: next-themes
• User Interface Components: shadcn-ui, sonner, & react-datetime-picker
• Icon Pack: lucide-react
• Data Visualization: chart.js
• Animations: framer-motion

.env.local

# LOCALHOST CONFIGS
#----------------------------------------------#
# FIREBASE APP (AUTH, DATABASE)
# Can be obtained at:
# 1. https://console.firebase.google.com
# 2. Click into your project or create new if you don't have one yet. Note: This configuration has Google Analytics turned on.
# 3. Project Overview > Project Settings > General
# 4. Your apps > SDK setup and configuration

NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=

# FIREBASE CLOUD MESSAGING (FOR PUSH NOTIFS)
# Can be obtained at:
# Steps 1-2 above.
# 3. Project Overview > Project Settings > Cloud Messaging
# 4. Web configuration > Generate a key pair
# Note: Don't forget to edit the `@/public/firebase-messaging-sw.js` file with your actual setup and config keys from above.

NEXT_PUBLIC_FIREBASE_FCM_VAPID_KEY=
#----------------------------------------------#

# FIREBASE SERVICE KEYS
#----------------------------------------------#
# Can be obtained at:
# Steps 1-2 above.
# 3. Project Overview > Project Settings > Service Accounts
# 4. Generate new private key (It shall let you download a .json file) > Extract the contents with their respective fields below

FIREBASE_PROJECT_ID=
FIREBASE_PRIVATE_KEY=
FIREBASE_CLIENT_EMAIL=
FIREBASE_CLIENT_ID=
FIREBASE_AUTH_URI=
FIREBASE_TOKEN_URI=
FIREBASE_AUTH_PROVIDER_CERT_URL=
FIREBASE_CLIENT_CERT_URL=
FIREBASE_UNIVERSE_DOMAIN=
#----------------------------------------------#

Running Locally

1. Clone this repository into your machine.

2. Run this code in your terminal to install all dependencies used in this project.

npm install

3. Fill in all the necessary variables in the .env.local outlined above. You can obtain these keys by watching the video from the playlist linked in the References below.

4. Build and run your web app at http://localhost:3000 by running the code below in the terminal.

npm run dev

Admin Only

Keyboard Keys for Editing a Parking Slot Component

Key	Function
,	Move Up
,	Move Left
,	Move Down
,	Move Right
	Rotate Counterclockwise
	Rotate Clockwise
	Increase Width
	Decrease Width
	Increase Height
	Decrease Height

References

• Rifik : AUTHENTICATION made EASY with Usernames and Passwords using NextJS 13 and Firebase