Stack, Phases, and Cross-Cutting Requirements
12. Technical stack
warning
This is the stack as specified in the original requirements document. The delivered implementation differs: the frontend is React 19 + Vite (not Next.js) with SCSS modules (not Tailwind), and the backend is Express + Prisma over Neon Postgres with its own JWT auth (not Next.js API routes with NextAuth and Supabase). See Architecture for what actually runs.
Frontend
| Technology | Choice |
|---|---|
| Framework | Next.js 14 (App Router) |
| Styling | Tailwind CSS v3 |
| Animations | Framer Motion |
| 3D / Canvas | Three.js or Spline |
| Icons | Lucide React plus custom SVG |
| Forms | React Hook Form + Zod |
| State | Zustand |
Backend / API
| Technology | Choice |
|---|---|
| Runtime | Node.js (Next.js API routes) |
| Chat | WebSocket (Socket.io) or the Vercel AI SDK |
| Resend or EmailJS | |
| Auth | NextAuth.js |
| DB | Supabase (PostgreSQL) |
Deployment
| Service | Purpose |
|---|---|
| Vercel | Frontend hosting |
| Supabase | Database plus auth |
| Cloudflare | CDN plus DNS |
Delivery phases
Phase 1 — landing page (MVP)
- Base Next.js project structure
- Design system (colours, fonts, components)
- Hero section (
#hero) - Vertical navigation
- Features section (
#features) - Pricing section (
#pricing) - FAQ section (
#faq) - Footer plus download section
Phase 2 — content sections
- All Services (
#application) - Road Map (
#roadmap) - Collaboration & Partners (
#collaboration) - MVP Demo section (
#demo)
Phase 3 — interactivity
- Interactive Demo section (
#interactive) - Marketplace (
#marketplace) - Agent detail page (
/agent/[id]) - Chat demo (
#chat-demo)
Phase 4 — settings (user cabinet)
- Settings shell — an overlay/modal with the horizontal tab menu
- Profile tab (
/settings/profile) - Notifications tab (
/settings/notifications) - Plans tab (
/settings/plans) - Privacy tab (
/settings/privacy) - Data tab (
/settings/data) - System Settings tab (
/settings/system) - Delete Account modal
- Payment History modal
Phase 5 — auth and backend
- Sign In / Sign Up flow
- User dashboard
- Payment integration (Stripe)
- WebSocket chat with the AI
Responsiveness
| Breakpoint | Width | Behaviour |
|---|---|---|
| Mobile | < 768px | Single column, bottom nav |
| Tablet | 768–1024px | Two columns, compact navigation |
| Desktop | > 1024px | Full layout, right nav rail |
SEO and metadata
<title>: AMADEQ — AI Tutor That Feels Like a Real Teacher.<description>: personalized learning with real-time AI avatars.- OG image: a Hero screenshot.
- Structured data:
Course,Product,Organization. - Sitemap: auto-generated by Next.js.
Accessibility (a11y)
- WCAG 2.1 AA.
- Keyboard navigation for every interactive element.
- ARIA labels for icons and buttons without text.
- Contrast ratio ≥ 4.5:1 for text.
- Alt text for every image.
Open questions
| # | Question | Priority |
|---|---|---|
| 1 | Video avatar format: an Unreal Engine stream or pre-rendered? | Critical |
| 2 | Marketplace API: our own backend or a third party? | High |
| 3 | Launch countdown: take the date from a CMS or hard-code it? | Medium |
| 4 | QR code: static or dynamic? | Low |
| 5 | Languages: localization through i18n or separate subdomains? | Medium |