Rokn — Steel & Aluminium Profiles Showcase

Project Overview

My Responsibilities

• Architecture: Designed the full-stack architecture on Next.js App Router, covering route groups for the public site and admin panel, API routes, MongoDB schema design, and authentication flow.
• Database Design: Modeled Mongoose schemas for Products, Categories, Homepage (singleton, section-based), Site Settings (singleton), Contact Details (singleton), Admins, and Inquiries, using embedded sub-schemas and ObjectId references to avoid data duplication.
• Admin Panel Development: Built the complete admin experience — dashboard, product/category managers, section-by-section homepage editor, site settings editor, contact details editor, and inquiries manager — using reusable resource-manager and form components.
• Authentication & Security: Implemented JWT issuing/verification with the `jose` library, HTTP-only auth cookies, Edge middleware route protection, bcrypt password hashing, and login rate limiting.
• Image Pipeline: Integrated Cloudinary upload/delete flows so all admin-managed images are hosted externally and referenced by URL/public ID.
• Public Site Development: Built the homepage, product catalogue, category pages, category detail pages, and contact page as Server Components by default, isolating client-side interactivity to where it's actually needed.
• Data Fetching Layer: Set up TanStack Query on the client and server-side data-access helper modules (`lib/products.js`, `lib/categories.js`, `lib/homepage.js`, etc.) for consistent data access across API routes and pages.
• SEO & Performance: Implemented dynamic sitemap/robots generation and structured the app to favor Server Components, Next.js Image optimization, and minimal client JavaScript.

Key Features

• Configurable Homepage: Every homepage section (hero, about, featured categories, featured products, why-choose-us, statistics, final CTA) is editable from the admin panel with per-section enable/disable toggles, rather than hard-coded content.
• Product & Category Catalogue: Full CRUD for products and categories with slugs, images, descriptions, specifications, ordering, and active/inactive status; public catalogue pages and category detail pages.
• Reference-Based Content: Featured products and categories on the homepage reference the existing Product/Category collections by ID instead of duplicating data, keeping content consistent.
• Inquiry System: A public contact form captures name, email, phone, company, subject, and message; submissions are stored and managed from an admin inquiries list with status tracking.
• Site Settings Management: Admin-editable logo, site name display, social media links, and a configurable WhatsApp contact button.
• Image Uploads via Cloudinary: Admin image uploads (products, categories, homepage sections, logo) are streamed to Cloudinary and stored as URL/public ID pairs, never as binary data in the database.
• JWT-Based Admin Authentication: Secure login with hashed passwords (bcrypt), HS256-signed JWTs verified in an Edge middleware for fast redirects, plus server-side re-verification on protected routes and APIs.
• Login Rate Limiting: In-memory attempt throttling on the login endpoint to slow down password-guessing attempts.
• SEO-Ready: Dynamic sitemap and robots.txt generation, semantic HTML structure, and per-page metadata.
• Responsive, Animated UI: Tailwind CSS v4 utility-first design with subtle motion/reveal animations, built mobile-first for an industrial B2B audience.