A Next.js-based web application that helps users avoid parking tickets by sending SMS or WhatsApp reminders when their parking time is about to expire.
- Modern UI built with Next.js 15 and Tailwind CSS
- License Plate Input with German license plate validation
- Multiple Contact Channels
- SMS notifications
- WhatsApp notifications
- User Tracking with unique visitor identification
- Responsive Design that works on all devices
- GDPR Compliance with data protection information
- Analytics to track user interactions and conversions
- Real-time Updates using Supabase Realtime
- Frontend: Next.js 15 (App Router)
- Styling: Tailwind CSS
- Database: Supabase (PostgreSQL)
- Authentication: Supabase Auth
- Deployment: Vercel
- Form Handling: React Hook Form with Zod validation
- UI Components: Radix UI Primitives with Shadcn/ui
- State Management: React Hooks
- Package Manager: npm/yarn
src/
├── app/ # App router pages
│ ├── api/ # API routes
│ │ ├── subscribe/ # Handle subscription requests
│ │ ├── visit/ # Track user visits
│ │ └── feedback/ # Process user feedback
│ ├── components/ # Reusable components
│ │ ├── ui/ # Shadcn/ui components
│ │ └── customized/ # Custom application components
│ ├── lib/ # Utility functions
│ │ └── supabase.ts # Supabase client configuration
│ └── ...
├── public/ # Static assets (images, fonts)
└── styles/ # Global styles
Handles new subscriptions and updates existing ones.
Request Body:
{
"uniqueId": "user-uuid",
"plate": "M-AB123",
"channel": "sms" | "whatsapp",
"phone": "+49123456789",
"name": "John Doe"
}Responses:
200: Subscription successful400: Invalid input data500: Server error
Tracks user visits and creates/updates visitor records.
Request Body:
{
"uniqueId": "user-uuid"
}Processes user feedback and updates the database.
Stores user subscription information.
| Column | Type | Description |
|---|---|---|
| id | bigint | Primary key |
| unique_id | uuid | Unique visitor identifier |
| plate | text | License plate |
| channel | text | Notification channel (sms/whatsapp) |
| phone | text | User's phone number |
| name | text | User's name |
| status | text | Subscription status |
| created_at | timestamp | Record creation timestamp |
| updated_at | timestamp | Last update timestamp |
| visited_at | timestamp | Last visit timestamp |
| Variable Name | Required | Description |
|---|---|---|
NEXT_PUBLIC_SUPABASE_URL |
✅ | Your Supabase project URL |
NEXT_PUBLIC_SUPABASE_ANON_KEY |
✅ | Your Supabase anon/public key |
SUPABASE_SERVICE_ROLE_KEY |
✅ | Your Supabase service role key (server-side only) |
NODE_ENV |
❌ | Set to 'production' in production |
- Node.js 18+
- npm or yarn
- Supabase account
- Vercel account (for deployment)
-
Clone the repository
git clone https://github.com/yourusername/reminder-prototype.git cd reminder-prototype -
Install dependencies
npm install # or yarn install -
Set up environment variables Create a
.env.localfile in the root directory:# Supabase NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key # App Configuration NODE_ENV=development
Security Note: The
SUPABASE_SERVICE_ROLE_KEYshould never be exposed to the client-side code. -
Run the development server
npm run dev # or yarn devOpen http://localhost:3000 in your browser.
npm testnpm run lint- Push your code to a GitHub/GitLab/Bitbucket repository
- Import the project to Vercel
- Add the required environment variables in the Vercel dashboard
- Deploy!
This is a standard Next.js application and can be deployed to any platform that supports Node.js applications.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request