I'll integrate the login system with MongoDB Atlas to store and authenticate users properly. Here's the complete implementation:
# Copy your MongoDB Atlas connection string to .env.local
MONGODB_URI=mongodb+srv://username:password@cluster0.abc123.mongodb.net/smart_parking?retryWrites=true&w=majoritynpm install mongodb bcryptjs @types/bcryptjsnpx ts-node scripts/seed-database.tsnpm run devThe system now uses MongoDB Atlas for secure user authentication and data persistence! 🎯
Here's a complete step-by-step guide to run the Smart Parking System with MongoDB Atlas on your PC:
Make sure you have these installed on your PC:
# Check if Node.js is installed (should be v14 or higher)
node --version
# Check if npm is installed
npm --version
# If not installed, download from: https://nodejs.org/Option A: Using the Download Button (Recommended)
Option B: Manual Setup
# Create new Next.js project
npx create-next-app@latest smart-parking-system
cd smart-parking-system
# Install required dependencies
npm install mongodb bcryptjs @types/bcryptjs lucide-react
npm install @radix-ui/react-tabs @radix-ui/react-select @radix-ui/react-label
npm install tailwindcss autoprefixer postcss
npm install typescript @types/node @types/react @types/react-domCreate MongoDB Atlas Account:
Create Database Cluster:
Create Database User:
admin (or your choice)yourpassword123 (or your choice)Setup Network Access:
Get Connection String:
mongodb+srv://admin:<password>@cluster0.abc123.mongodb.net/?retryWrites=true&w=majorityCreate .env.local file in your project root:
# Create the file
touch .env.local
# Or on Windows
echo. > .env.localAdd this content to .env.local:
# Replace with your actual MongoDB Atlas connection string
MONGODB_URI=mongodb+srv://admin:yourpassword123@cluster0.abc123.mongodb.net/smart_parking?retryWrites=true&w=majority
# Next.js Configuration
NEXTAUTH_SECRET=your-super-secret-key-here-make-it-long-and-random
NEXTAUTH_URL=http://localhost:3000
NODE_ENV=development⚠️ Important: Replace yourpassword123 with your actual MongoDB password!
If you're doing manual setup, copy all the code files from the project above into your project structure:
your-project/
├── lib/
│ ├── mongodb.ts
│ ├── auth.ts
│ ├── models/
│ └── services/
├── components/
│ ├── login-form.tsx
│ ├── admin-dashboard.tsx
│ └── ... (other components)
├── app/
│ ├── api/
│ └── page.tsx
├── scripts/
│ └── seed-database.ts
├── .env.local
└── package.json# Initialize shadcn/ui
npx shadcn@latest init
# When prompted, choose:
# - TypeScript: Yes
# - Style: Default
# - Base color: Slate
# - Global CSS: app/globals.css
# - CSS variables: Yes
# - Tailwind config: tailwind.config.js
# - Components: components
# - Utils: lib
# - RSC: Yes
# Install required UI components
npx shadcn@latest add button card badge input label tabs select# Run the database seeding script
npx ts-node scripts/seed-database.ts
# If ts-node is not installed globally:
npm install -g ts-node
# Then run again:
npx ts-node scripts/seed-database.tsYou should see output like:
🌱 Seeding MongoDB Atlas database...
👤 Creating users...
✅ Users created successfully
🅿️ Creating parking slots...
✅ Parking slots created successfully
🎉 Database seeded successfully!# Start the development server
npm run devYou should see:
▲ Next.js 14.0.0
- Local: http://localhost:3000
- Network: http://192.168.1.100:3000
✓ Ready in 2.3shttp://localhost:3000Use these demo credentials:
Quick Login Buttons:
MongoDB Connection Error:
# Check your .env.local file
# Make sure MONGODB_URI is correct
# Verify your MongoDB Atlas user credentialsModule Not Found Errors:
# Install missing dependencies
npm install
# If shadcn components are missing:
npx shadcn@latest add button card badge input label tabs selectTypeScript Errors:
# Install TypeScript dependencies
npm install -D typescript @types/node @types/react @types/react-domPort Already in Use:
# Use different port
npm run dev -- -p 3001Check Database Connection:
smart_parking database with collectionsCheck API Endpoints:
http://localhost:3000/api/auth/login (should show method not allowed)Check Login:
Once running, you can:
You'll know it's working when:
If you encounter any issues, check the browser console (F12) and terminal for error messages! 🚀
You can send messages while the preview loads