Book Local. Live Better.
ClickNGo is a full-stack local services booking platform that lets users discover and book trusted services near them — from grooming and healthcare to real estate and sports — all in a few taps. Live at : https://click-n-go-frontend-skd2.vercel.app/
The goal of ClickNGo is to bridge the gap between local service providers and customers by offering a seamless, category-driven booking experience. Users can browse services by category, view provider availability in real time, and complete secure bookings — all from a single, intuitive web application.
| Feature | Description |
|---|---|
| Service Categories | Browse Grooming, Real Estate, HealthCare, and Sports & Gaming with sub-categories |
| Location-Aware | City-based service discovery displayed in the navbar |
| User Authentication | Secure sign-up / login with profile management |
| Real-Time Booking Calendar | View live provider availability and lock in a time slot |
| Secure Payments | Integrated payment flow (Razorpay / Stripe ready) |
| Instant Notifications | SMS and email updates at every booking step |
| Booking Dashboard | Track total, completed, cancelled, and pending-review bookings |
| Global Search | Search bar for quick service discovery across all categories |
ClickNGo-Complete/
├── ClickNGo-frontend-main/ # React-based frontend application
│ ├── src/
│ │ ├── components/ # Reusable UI components (Navbar, Cards, etc.)
│ │ ├── pages/ # Route-level pages (Home, Profile, Category, etc.)
│ │ ├── assets/ # Icons, images, and static files
│ │ └── App.jsx # Root component and routing setup
│ └── package.json
│
├── backend/ # Node.js/Express backend API
│ ├── routes/ # API route handlers (auth, bookings, services)
│ ├── controllers/ # Business logic layer
│ ├── models/ # Database models / schema definitions
│ ├── middleware/ # Auth middleware, error handlers
│ └── index.js # Server entry point
│
└── .idea/ # IDE configuration files
Languages used: JavaScript (92.4%) · PLpgSQL (7.5%) · HTML (0.1%)
| Layer | Technology |
|---|---|
| Frontend | React.js, CSS (custom design system) |
| Backend | Node.js, Express.js |
| Database | PostgreSQL (with PLpgSQL for stored procedures/queries) |
| Auth | JWT-based authentication |
| Payments | Razorpay / Stripe (integration-ready) |
Challenge: Establishing reliable communication between the React frontend and the Node/Express backend was a major hurdle — especially handling CORS, API base URLs across environments, and synchronizing async state with API responses.
How I solved it: Through iterative debugging and learning from each failure, I progressively built a working integration. I studied CORS configuration, set up proper Axios/fetch base URLs, and structured API calls inside React hooks and useEffect blocks. Each error became a learning point that deepened my understanding of how full-stack data flow actually works.
Optimization applied:
- Centralized all API calls in a dedicated service layer to keep components clean
- Used environment variables (
.env) to manage base URLs across development and production - Added loading and error states in the UI so users always have feedback during API calls
Challenge: Supporting four very different service categories (Grooming, Real Estate, HealthCare, Sports & Gaming), each with their own sub-services and booking flows, without duplicating code.
Optimization applied:
- Built a generic, data-driven category page that renders dynamically based on route/category params
- Stored category and sub-category data in a normalized database schema
- Reused shared UI components (cards, grids, modals) across all categories
Challenge: Implementing secure user authentication while keeping the experience smooth (no unnecessary re-logins, persistent sessions).
Optimization applied:
- Used JWT tokens stored securely on the client
- Protected routes on both frontend (React Router guards) and backend (middleware)
- Reflected auth state globally via context so the navbar and profile page stay in sync
Challenge: Accurately tracking booking states (pending, completed, cancelled) and surfacing them to users without stale data.
Optimization applied:
- Designed a clear
statusfield in the bookings table with PostgreSQL constraints - Dashboard stats (Total, Completed, Cancelled, Pending Reviews) are computed via efficient SQL queries rather than client-side filtering
- Node.js v18+
- PostgreSQL
# Clone the repository
git clone https://github.com/HEYDEV001/ClickNGo-Complete.git
cd ClickNGo-Complete
# Setup Backend
cd backend
npm install
# Create a .env file with your DB credentials and JWT secret
npm start
# Setup Frontend (in a new terminal)
cd ../ClickNGo-frontend-main
npm install
npm run devHEYDEV001 github.com/HEYDEV001