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 api server processes request #http

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

EMS

This is a management system to interact with employes and distribute task effectively. This app is made to enhance the work and tas distribution for the owners to there employes.

Nov 08, 2024Read More

Explore My Work & Insights

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

EMS

Stay Updated