Problem
Car Pulse Dubai needed more than a basic website. The business faced several real challenges.
Customer-facing gaps
- No strong online presence — Potential customers could not easily discover services, pricing deals, or the workshop's expertise from home or on mobile.
- Manual booking and inquiry handling — Service requests and contact messages came through phone, WhatsApp, or walk-ins, with no structured way to track or manage them.
- No customer account system — Repeat customers had no way to register, log in, or view their booking history online.
Operational gaps
- Content updates required technical help — Changing services, gallery images, FAQs, or business information meant depending on a developer for every small update.
- Scattered business information — Stats, trusted brands, highlights, and contact details were not organized in one manageable system.
The client needed a professional, scalable solution that would work for both customers and internal staff — built for the UAE market and easy to maintain long term.
Solution
A custom-built, full-stack platform was designed and developed from the ground up:
1. Customer Website
A public digital storefront — informative, trustworthy, and easy to book through. Visitors explore services, view gallery and highlights, read FAQs, and book appointments online.
2. Admin Dashboard
A private control panel where workshop staff manage everything: business profile, services, marketing content, customer users, bookings, and contact requests — without touching code.
3. Backend API
The central engine that stores all data, handles user and admin authentication, processes bookings and appointments, sends welcome and password-reset emails, and manages image uploads to the cloud.
The solution is content-driven: almost everything on the public site — services, gallery, FAQs, business info, highlights, and brands — is managed through the admin panel and served live via the API. The platform is deployed on Google Cloud Run, making it reliable, scalable, and accessible from anywhere.
My Role
Full-Stack Developer (Freelance — UAE)
I was responsible for designing and building the entire platform end to end:
| Area | Responsibilities |
|---|---|
| Planning | System architecture and feature set with the client |
| Backend API | REST API — authentication, business logic, database models, file uploads, and email notifications |
| Customer Website | All pages, sections, booking flow, and responsive design |
| Admin Dashboard | Full content management, booking management, user overview, and operational tools |
| Integrations | Cloudinary for image storage; Nodemailer for welcome and password-reset emails |
| Deployment | Google Cloud Run setup with Docker containerization |
| Delivery | Delivered for client Adnan Khan (Car Pulse Dubai) |
Key Features
Customer Website
| Feature | Description |
|---|---|
| Landing page | Hero section, services preview, about, why choose us, FAQ, and contact |
| Services catalog | Full service pages with detailed sub-services |
| Online booking | Registered users select service → sub-service → confirm |
| Guest appointments | Name, email, phone, and message without needing an account |
| Highlights / news | Featured work and updates section |
| Gallery & brands | Showcase trusted brands and workshop gallery |
| User accounts | Registration, login, profile avatar, forgot password and secure reset |
| Quick contact | WhatsApp button, privacy policy, and terms pages |
| Responsive design | Mobile-friendly with splash screen and smooth navigation |
Admin Dashboard
| Feature | Description |
|---|---|
| Dashboard overview | Live stats — users, content items, pending bookings, services count |
| Business profile | Logo, contact, address, owner details, stats, hero section, social links |
| Services management | Create, edit, delete services with images, deals, and nested sub-services |
| Booking management | View all bookings, update status (pending / confirmed / cancelled), delete |
| Appointment management | View and delete contact/appointment requests |
| Content management | Gallery, FAQs, why choose us, highlights, trusted brands |
| User overview | View all registered customers and their booking activity |
| Admin users | Create, edit, and delete admin accounts |
| Live count badges | Sidebar badges that refresh automatically every 30 seconds |
Backend API
| Feature | Description |
|---|---|
| Authentication | Secure user and admin auth with JWT tokens and automatic token refresh |
| Full CRUD APIs | All content and business data endpoints |
| Booking system | Linked to users, services, and sub-services |
| Appointments | Contact form submission capture |
| Image uploads | Cloudinary for avatars, services, gallery, brands, and highlights |
| Transactional email | Welcome email on signup, password reset for users and admins |
| Deployment | Containerized and running on Google Cloud Run |
Technologies & Capabilities
Customer Website
| Area | Approach |
|---|---|
| Framework | Next.js 16, React 19, TypeScript |
| Styling | Tailwind CSS v4, responsive mobile-first layout |
| Pages | Landing, services, booking, gallery, highlights, FAQs, legal |
| Auth | JWT-based registration, login, profile, password reset |
| UX | Splash screen, scroll animations, WhatsApp quick contact |
Admin Dashboard
| Area | Approach |
|---|---|
| Framework | Next.js 16, React 19, TypeScript, Redux |
| CMS | Full content management for all public site data |
| Operations | Booking pipeline, appointment inbox, user overview |
| Live badges | Auto-refreshing sidebar counts every 30 seconds |
| Media | Cloudinary upload integration for all image types |
Backend API
| Area | Approach |
|---|---|
| Runtime | Node.js, Express 5, TypeScript |
| Database | MongoDB with Mongoose models |
| Auth | JWT access + refresh tokens, bcrypt hashing, dual customer/admin flows |
| Nodemailer — welcome on signup, password reset for users and admins | |
| Deployment | Docker container on Google Cloud Run |
Architecture / Workflow
System Architecture
Content Pipeline
Admin updates flow to the public site without redeploying either frontend — the same pattern used across the platform.
Online Booking Flow (Sequence)
Guest Appointment Flow
Authentication Flow
Booking Status Workflow
| Status | Set By | Customer Experience |
|---|---|---|
| Pending | System on submission | Booking received — awaiting workshop confirmation |
| Confirmed | Admin in dashboard | Service appointment confirmed |
| Cancelled | Admin in dashboard | Booking cancelled with status update |
Data Model (Core Areas)
| Area | Purpose |
|---|---|
| Users | Registered customers with profile, avatar, and booking history |
| Admins | Dashboard operators with role-based access |
| Services | Main service categories with images, deals, and descriptions |
| Sub-Services | Nested service items linked to parent categories |
| Bookings | Registered user appointments linked to services |
| Appointments | Guest contact/appointment requests from the website |
| Business Profile | Logo, contact, address, owner details, hero section, stats |
| Gallery | Workshop photos managed via admin |
| Highlights | Featured work and news items |
| Trusted Brands | Brand logos and partner showcase |
| FAQs | Frequently asked questions |
| Why Choose Us | Marketing differentiators |
Production Deployment Layout
| Service | Technology | Delivery |
|---|---|---|
| Backend API | Node.js + Express 5, Docker | Google Cloud Run |
| Customer Website | Next.js 16, React 19, Tailwind v4 | Production hosting |
| Admin Dashboard | Next.js 16, React 19, Redux | autopulse.me |
| Database | MongoDB + Mongoose | Cloud-hosted instance |
| Images | Cloudinary | CDN-backed media for all surfaces |
| Nodemailer (Gmail SMTP) | Welcome + password reset |
How It Works
- Admin updates content — Staff log into the admin dashboard, add or edit services, upload gallery images, update business info. Data is saved to MongoDB via the API.
- Website displays content live — The customer website fetches the latest data from the API. Any admin change appears on the public site without redeploying.
- Customer books a service — A visitor browses services, creates an account (or logs in), selects a service and sub-service, and submits a booking. The booking is stored and visible in the admin panel.
- Guest sends an appointment request — Via the contact form, without logging in. Staff see it under Appointments in the admin dashboard.
- Admin manages operations — Staff review bookings, confirm or cancel them, respond to appointment requests, and monitor user activity.
Challenges
1. Dual authentication system
Challenge: The platform serves both customers and admins with separate login flows, permissions, and token handling on shared API routes.
Solution: Separate auth flows with role-based access and automatic token refresh — no conflicts between customer and admin sessions.
2. Rich content management
Challenge: The business needed control over many content types (services with nested sub-services, gallery, highlights, business profile, brands, FAQs) — each with its own structure and image handling.
Solution: Dedicated admin UI for each content type with consistent patterns, keeping management easy while supporting complex nested data.
3. Image handling at scale
Challenge: Services, gallery, avatars, brands, and highlights all involve image uploads across two frontends.
Solution: Unified upload flow — upload → store in Cloudinary → save URL in MongoDB → display on both website and admin panel.
4. Real-time admin awareness
Challenge: The dashboard needed live counts (pending bookings, total users, content items) without manual refresh.
Solution: Polling system keeps sidebar badges and stats updated every 30 seconds.
5. Booking flow without payments
Challenge: The client wanted online booking without payment integration — the flow had to feel complete and professional.
Solution: Status management (pending, confirmed, cancelled) with clear customer confirmation and admin workflow — simple for staff, polished for customers.
6. Deployment and environment setup
Challenge: Backend containerization with Docker, Cloud Run deployment, CORS for two separate frontends, and environment variables across three projects.
Solution: Careful coordination of Docker builds, Cloud Run config, and CORS rules so both Next.js frontends communicate securely with the API.
Final Result
Live Production Platform
Delivered Outcomes
- Fully functional, production-ready digital platform for Car Pulse Dubai.
- Backend running on Google Cloud Run; frontends ready for production hosting.
- Self-service for the business — The client can update services, gallery, FAQs, business info, and more without developer involvement.
- Professional customer experience — Modern, responsive website with clear service discovery, easy booking, and multiple contact options (phone, email, WhatsApp, contact form).
- Streamlined operations — All bookings, appointments, and customer data in one admin dashboard.
- Secure and scalable — JWT authentication, encrypted passwords, cloud image storage, and a containerized backend built to grow with the business.
- Complete ownership — Three separate, well-structured codebases (backend, admin panel, user website) with clear separation of concerns and room for future features such as payments, notifications, or a mobile app.
The platform positions Car Pulse Dubai as a modern, trustworthy automotive service provider — online and offline — with the tools to manage and grow the business digitally.