gaps.md 7.5 KB
Gaps: Implementation vs. SDD
This document lists all identified gaps between the Software Design Documents (SDD) and the current implementation in ./jenado-unlimited-website.
1. Technical Stack Gaps
| SDD Requirement | Current Implementation | Status |
|---|---|---|
| React + Tailwind CSS | ✅ Next.js (React) + Tailwind | Implemented |
| Node.js + Express backend | ❌ No Express server — all server logic lives in Next.js | Missing |
| PostgreSQL database | ❌ No database, no ORM, no migrations, no DB client | Missing |
| Vercel (frontend hosting) | ✅ README mentions Vercel; standard Next.js deploy | Implemented |
| AWS (backend/DB hosting) | ❌ No AWS infrastructure configured | Missing |
2. Core Feature Gaps
2.1 User Authentication (JWT)
SDD Requirement: User authentication using JWT tokens for secure login/signup.
Current State: No authentication system exists. There are no login or signup pages, no auth routes, no JWT middleware, no session management, and no protected pages.
Impact: Users cannot create accounts, log in, or have any personalized experience.
2.2 Shopping Cart
SDD Requirement: Full shopping cart with add-to-cart buttons, quantity adjustment, cart page, and subtotal calculation.
Current State: No cart state management (no Context, localStorage, or store). No "add to cart" buttons anywhere in the UI. No cart page. No quantity handling.
Impact: Users cannot add products to a cart or manage their selections before checkout.
2.3 Checkout Process (Stripe Integration)
SDD Requirement: Checkout page with shipping details, payment processing via Stripe, and order summary.
Current State: No checkout page exists. No Stripe library installed. No payment processing of any kind.
Impact: Users cannot complete purchases. This is the core revenue-generating feature described in the SDD and it is entirely missing.
2.4 User Profile Management
SDD Requirement: User profile page with order history, profile settings, and saved addresses.
Current State: No user accounts means no profile pages, no order history, and no settings.
Impact: No post-purchase experience or account management.
3. Website Design Document Gaps
3.1 Home Page — Missing Testimonials
SDD Requirement: Home page with hero section, featured products, and testimonials.
Current State: Home page has a hero section and an offerings grid. No testimonials, no reviews, no social proof section.
Gap: No testimonials component or data structure for customer reviews.
3.2 Product Listing Page — Missing Search & Filters
SDD Requirement: Product listing page with filters, search, and product cards.
Current State: The /offerings page displays a static grid of offerings with status badges (active/soft-launch/coming-soon). There is no search input, no category filters, and no sorting.
Gap: No search functionality. No filter UI or logic. No dynamic filtering by category, price, or status.
3.3 Product Detail Page — Missing Cart Integration & Reviews
SDD Requirement: Product detail page with image gallery, descriptions, reviews, and add-to-cart button.
Current State: Detail pages (/offerings/[slug]) show a summary, description, pillars as emojis, and an "Inquire" CTA linking to the contact form. There is no "Add to Cart" button and no reviews section.
Gap: No add-to-cart CTA. No reviews/ratings system. The inquiry form is a lead capture, not a purchase.
3.4 Image Galleries
SDD Requirement: Image galleries on product detail pages.
Current State: The GalleryGrid component and VerticalGallery data structure exist but all galleries are empty or show "coming soon" placeholders. The public/ directory contains no images.
Gap: No real product images uploaded. Gallery component is wired up but has no visual content.
3.5 Shopping Cart Page
SDD Requirement: Shopping cart page with list of items, quantity adjustment, and subtotal.
Current State: No cart page exists at all. No /cart route.
Gap: Entirely missing.
3.6 Checkout Page
SDD Requirement: Checkout page with shipping details, payment integration, and order summary.
Current State: No /checkout route. No shipping forms. No payment integration.
Gap: Entirely missing.
3.7 User Account Page
SDD Requirement: User account page with order history, profile settings, and saved addresses.
Current State: No user accounts exist. No /account route.
Gap: Entirely missing.
4. Design & Branding Gaps
4.1 Color Palette
| SDD | Actual Implementation |
|---|---|
Primary: #000000 (Black) |
#1c1917 (Warm stone) / #0c0a09 (headings) |
Secondary: #FFFFFF (White) |
#fafaf9 (Light bg) / #fff (surface) |
Accent: #FFD700 (Gold) |
#a16207 (Warm amber/brown) |
Gap: The implementation uses a warm stone/earthy amber palette instead of the SDD's black/white/gold. This may be intentional but deviates from the brand spec.
4.2 Typography
| SDD | Actual Implementation |
|---|---|
| Headings: Inter, sans-serif | Tailwind system font stack |
| Body: Roboto, sans-serif | Tailwind system font stack |
Gap: Inter and Roboto fonts are not loaded or applied. The implementation relies on Tailwind's default system font stack.
5. Implemented Features (for reference)
| Feature | Status | Notes |
|---|---|---|
| Home page with hero | ✅ | Hero section + offerings grid |
| Offerings catalog listing | ✅ | Static grid with status badges |
| Offerings detail pages | ✅ | Description, pillars, inquiry CTA |
| Contact form | ✅ | Zod validation, honeypot, Resend email |
| Responsive design | ✅ | Mobile-first, all breakpoints |
| Accessibility | ✅ | Skip-to-content, semantic HTML, ARIA labels |
| Dark/light theme toggle | ✅ | Persisted via localStorage |
| JSON-LD structured data | ✅ | Organization, WebSite, ContactPage schemas |
| Favicon + metadata | ✅ | Next.js image config |
6. Summary by Development Phase
| SDD Phase | Status | Gap Level |
|---|---|---|
| Phase 1: Foundation | ✅ | None — project structure, deployment config, and contact form are solid |
| Phase 2: Core Features | ❌ | Critical — auth, catalog (dynamic), cart, and checkout are all missing |
| Phase 3: Refinement | ⚠️ | Partial — UI is polished but missing testimonials, search, filters, galleries, and reviews |
| Phase 4: Launch | ⚠️ | Partial — site is deployable as a brochure but not as the full e-commerce store described in the SDD |
7. Priority Recommendations
- P0 — Database & Backend: Set up PostgreSQL + Prisma/Drizzle to store products, users, orders, and cart data.
- P0 — Authentication: Implement JWT or NextAuth.js for user registration, login, and session management.
- P0 — Shopping Cart: Add cart state management (Context + localStorage), add-to-cart buttons, and a cart page.
- P0 — Checkout: Integrate Stripe for payment processing with shipping forms and order summaries.
- P1 — Dynamic Catalog: Replace static vertical data with database-backed products, search, and filters.
- P1 — Testimonials & Reviews: Add a testimonials component and a review system.
- P1 — Image Galleries: Upload real product images and wire them into the gallery component.
- P2 — User Profile: Add order history, saved addresses, and account settings.
- P2 — Brand Alignment: Apply Inter/Roboto fonts and adjust color palette to match the SDD if desired.