Site Structure & Navigation

Home (/) - Landing page with hero, services overview, about, contact, footer

About (/about) - Developer bio, skills, experience, education, certifications

Services (/services) - Service listings: Web Development, App Development, Backend & AI, Consulting. Each links to /order?item=[web, app, consulting, backend]

Content (/content) - Blog/project listings with pagination, search, filter by tags

Content Detail (/content/[slug]) - Individual blog/project with full content, reactions, comments

Pages (/pages) - Static page listings

Page Detail (/pages/[slug]) - Individual static page

Contact (/contact) - Contact form with validation

Policy (/policy) - Policy listings (privacy, terms, refund, cookie)

Policy Detail (/policy/[slug]) - Individual policy page

Product (/product) - Product listings (if any)

Resume (/resume) - Downloadable resume

Auth Routes (/login, /signup, /forgot-password, /reset-password) - Clerk-powered authentication

Order Form (/order?item=[web, app, consulting, backend]) - Customer order/request form with budget, requirements, timeline

Checkout (/checkout?orderId=...) - Razorpay payment integration for accepted quotes

Dashboard Routes (Authenticated)

/dashboard - Main dashboard with recent orders, payments, profile status, activity

/dashboard/order - Customer order list with DataTable (pagination, search, sort)

/dashboard/order/[id] - Order detail: shows customerBudget, finalAmount, status, requirements, quote acceptance, checkout button

/dashboard/payments - Payment history

/dashboard/services - Service management (customer view)

/dashboard/assets - Asset upload/management

/dashboard/contact - Customer contact messages

/dashboard/notifications - Notification center

/dashboard/profile - Profile management

Admin Dashboard Routes (Admin Only)

/dashboard/users - User management

/dashboard/links - Link management

/dashboard/logs - Activity logs

/dashboard/faqs - FAQ management

/dashboard/content - Content CMS (create, edit, publish, draft)

/dashboard/pages - Page management

/dashboard/application - App licensing/registration

/dashboard/admin - Admin settings

/dashboard/settings - System settings

Key User Flows

Quotation Flow: Customer submits request (status: requested, customerBudget) → Admin reviews & sets finalAmount (status: quoted) → Customer accepts quote (status: payment_pending) → Checkout with Razorpay (amount = finalAmount) → Payment verified → Order completed

Content Reaction: Like/dislike on content items, stored in likedBy/dislikedBy arrays with MongoDB ObjectId

Comments: Nested comments on content with approval workflow

Contact: Customer submits contact form → Admin views in dashboard/contact

Order: Customer submits request via /order → Admin quotes → Customer accepts → Payment

Key DOM Elements for Navigation

Navigation: nav with links to /, /about, /services, /content, /contact

Sidebar (Dashboard): aside with links to all dashboard routes

Order Table: table with columns: #, Type, Item, Payment Id, Download Link, Status, Notes

Order Detail: dl with Order ID, Type, Status, Customer Budget, Final Amount, Quoted At, Accepted At

Quote Actions: "Accept Quote" button (when status=quoted), "Proceed to Checkout" button (when status=payment_pending and finalAmount > 0)

Content Reactions: Like/Dislike buttons with counts

Comments: Threaded comment sections with reply, edit, delete

Search: Input with placeholder "Search..." on DataTables

Pagination: Previous/Next buttons with page info

Authentication & Roles

Clerk-based authentication with roles: guest, customer, admin

Middleware protects /dashboard/* routes

Admin routes: /dashboard/users, /dashboard/links, /dashboard/logs, /dashboard/faqs, /dashboard/content, /dashboard/pages, /dashboard/application, /dashboard/admin, /dashboard/settings

Customer routes: /dashboard/order, /dashboard/payments, /dashboard/services, /dashboard/assets, /dashboard/contact, /dashboard/notifications, /dashboard/profile

Explore My Work & Insights

All Projects Blogs|#backend #api #how apis work #web

Featured

Highlight

How APIs Work: A Step-by-Step Guide for Developers

Wondering how APIs actually work behind the scenes? This step-by-step guide breaks down requests, responses, validation, and error handling in a simple, developer-friendly way.

View Details

PROJECT

flask-url-shortener

This is a simple URL shortener application built with Flask and Python. It allows users to shorten long URLs and then redirect to the original URLs using a short key.

Aug 25, 2024Read More

Explore My Work & Insights

How APIs Work: A Step-by-Step Guide for Developers

flask-url-shortener

Stay Updated