Client Overview

The Fast Forward Dev client is a Next.js 16 application built with the App Router, TypeScript, Tailwind CSS, and DaisyUI. It provides a modern, responsive frontend for your application.

Architecture

The client follows Next.js App Router conventions with a clear separation of concerns:

src/
├── app/              # Next.js App Router pages and layouts
├── components/       # Reusable React components
├── config/           # Configuration files
├── utils/            # Helper functions and utilities
├── types/            # TypeScript type definitions
└── assets/           # SVG components and assets

Tech Stack

Core Framework

• Next.js 16 - React framework with App Router
• React 19 - JavaScript library for building user interfaces
• TypeScript - Type-safe development

Styling

• Tailwind CSS - Utility-first CSS framework
• DaisyUI - Component library built on Tailwind
• Custom themes - FFD theme configuration

Authentication

• NextAuth - Authentication library for Next.js
• JWT tokens - Secure token-based sessions
• Multiple providers - Email/password and Google OAuth

Data Fetching

• TanStack Query (React Query) - Server state management
• Axios - HTTP client for API requests
• Server Components - Next.js native data fetching

Payment Processing

• Stripe - Payment integration
• @stripe/stripe-js - Stripe SDK

Additional Libraries

• React Icons - Icon library
• React Markdown - Markdown rendering (for blog)
• Gray Matter - Frontmatter parser (for blog)
• Cookies Next - Cookie management

Project Structure

/app Directory

The App Router structure follows Next.js conventions where folders represent routes:

app/
├── page.tsx                  # Home page (/)
├── layout.tsx                # Root layout
├── globals.css               # Global styles
├── providers.tsx             # React Query provider
│
├── about/
│   └── page.tsx              # About page (/about)
│
├── admin/
│   ├── page.tsx              # Admin dashboard (/admin)
│   └── user/[id]/
│       └── page.tsx          # User detail page (/admin/user/[id])
│
├── api/
│   ├── auth/
│   │   └── [...nextauth]/
│   │       └── route.ts      # NextAuth API routes
│   └── checkout_session/
│       └── route.ts          # Stripe checkout API
│
├── auth/
│   ├── login/
│   │   └── page.tsx          # Login page (/auth/login)
│   └── error/
│       └── page.tsx          # Auth error page
│
├── blog/
│   ├── page.tsx              # Blog listing (/blog)
│   ├── layout.tsx            # Blog layout
│   └── [slug]/
│       └── page.tsx          # Blog post (/blog/[slug])
│
├── docs/                     # Documentation (Nextra)
│
└── (legal)/
    ├── privacy-policy/
    ├── terms-conditions/
    └── license-agreement/

/components Directory

Organized by feature/category:

components/
├── About/                    # About section components
├── Admin/                    # Admin dashboard components
├── Button/                   # Button components (CTA, Login, etc.)
├── CTA/                      # Call-to-action components
├── Docs/                     # Documentation components (being replaced)
├── FAQ/                      # FAQ accordion components
├── Footer/                   # Footer component
├── Header/                   # Header and navigation
├── Hero/                     # Hero section component
├── MadeWith/                 # Tech stack showcase
├── Pricing/                  # Pricing table component
├── Product/                  # Product/plan components
├── Pros/                     # Benefits/features section
├── Providers/                # Auth providers component
└── WithOrWithout/            # Before/after comparison

Each component folder typically contains:

• Component file (e.g., Hero.tsx)
• Related sub-components if needed
• All logic contained within the component

/config Directory

config/
├── config.ts                 # Main application config
└── stripe.ts                 # Stripe configuration

• config.ts: Central configuration for environment detection, product types, backend URL, theme, and Stripe settings
• stripe.ts: Stripe initialization and configuration

/utils Directory

utils/
├── auth-token.ts             # JWT token utilities
├── redirectToCheckout.ts     # Stripe checkout helper
├── cn.ts                     # Tailwind class utility
└── blog/
    ├── blog.ts               # Blog post utilities
    └── blog-types.ts         # Blog type definitions

Utility Functions:

cn.ts - Tailwind class merging utility:

import { cn } from '@/utils/cn'
 
// Merge Tailwind classes intelligently
<div className={cn('px-4 py-2', isActive && 'bg-primary', className)} />

auth-token.ts - JWT token utilities for client-side:

import { getTokenFromCookie, setTokenInCookie } from '@/utils/auth-token'
 
// Store JWT token in cookie
setTokenInCookie(token)
 
// Retrieve JWT token from cookie
const token = getTokenFromCookie()

redirectToCheckout.ts - Stripe checkout redirect:

import { redirectToCheckout } from '@/utils/redirectToCheckout'
import { ProductType } from '@/config/config'
 
// Redirect user to Stripe checkout
await redirectToCheckout(ProductType.PRO)

blog/blog.ts - Blog post management:

import { getAllPosts, getPostBySlug } from '@/utils/blog/blog'
 
// Get all blog posts
const posts = getAllPosts()
 
// Get specific post
const post = getPostBySlug('hello-world')

/types Directory

types/
└── user.ts                   # User type definitions

TypeScript interfaces and types used throughout the application.

/assets Directory

assets/
└── svgs/
    ├── Checkmark.tsx         # Checkmark SVG component
    └── Cross.tsx             # Cross/X SVG component

SVG icons as React components for better performance and customization.

Rendering Strategy

Fast Forward Dev uses a mix of rendering strategies optimized for performance:

Server Components (Default)

Most pages are Server Components for:

• Better SEO
• Faster initial load
• Reduced JavaScript bundle size

Examples:

• Home page
• About page
• Blog pages
• Documentation pages

Client Components (‘use client’)

Used sparingly for interactivity:

• Forms with state management
• Interactive UI elements (modals, dropdowns)
• Components using hooks (useState, useEffect)
• Authentication providers

Data Flow

Authentication Flow

Payment Flow

Environment Modes

The application behaves differently based on NODE_ENV:

Development Mode

• Uses test Stripe keys
• Points to local backend (localhost:5001)
• Hot reload enabled
• Detailed error messages

Production Mode

• Uses live Stripe keys
• Points to production backend
• Optimized builds
• Error logging to external services

Configuration is managed in /config/config.ts:

export const isProd = () => process.env.NODE_ENV === 'production'

Styling System

Tailwind CSS

Utility-first CSS framework for rapid UI development:

<div className="flex items-center gap-4 p-6 rounded-lg bg-base-100">
  <h1 className="text-2xl font-bold">Hello World</h1>
</div>

DaisyUI

Component library providing semantic class names:

<button className="btn btn-primary">
  Click me
</button>

Custom Theme

The FFD theme is configured in src/app/globals.css using Tailwind CSS v4 and DaisyUI:

@plugin "daisyui/theme" {
  name: "ffd";
  default: true;
  
  /* Primary - Bright blue #007dff */
  --color-primary: oklch(60% 0.22 250);
  --color-primary-content: oklch(99% 0 0);
  
  /* Secondary - Muted green #5d8562 */
  --color-secondary: oklch(55% 0.06 150);
  
  /* ... more colors */
}

To customize colors, edit the globals.css file and modify the OKLCH color values.

Key Features

Authentication

• Email/password signup and login
• Google OAuth integration
• Protected routes with middleware
• Session management with JWT

Payments

• Stripe checkout integration
• Multiple pricing tiers
• Subscription management
• Webhook handling

Admin Dashboard

• User management
• Billing information
• Analytics and stats
• User search and filtering

Blog System

• Markdown-based blog posts
• Frontmatter for metadata
• Dynamic routes
• SEO optimization

Responsive Design

• Mobile-first approach
• Tablet and desktop layouts
• Hamburger menu on mobile
• Responsive images and text

Performance Optimizations

Image Optimization

• Next.js Image component
• WebP format support
• Lazy loading
• Proper sizing

Code Splitting

• Automatic route-based splitting
• Dynamic imports for heavy components
• Tree shaking

Caching

• React Query for API responses
• Static page generation where possible
• API route caching headers

SEO Features

Meta Tags

• Dynamic meta tags per page
• Open Graph tags
• Twitter Card tags

Sitemap

• Automatic sitemap generation at /sitemap.xml

Structured Data

• JSON-LD for rich snippets
• Proper heading hierarchy

Development Patterns

Component Structure

'use client' // Only if needed
 
import React from 'react'
import { ComponentProps } from './types'
 
const MyComponent: React.FC<ComponentProps> = ({ prop1, prop2 }) => {
  // Component logic
  
  return (
    <div className="container">
      {/* JSX */}
    </div>
  )
}
 
// Helper functions below component
function helperFunction() {
  // ...
}
 
export default MyComponent

File Naming

• Components: PascalCase (e.g., Hero.tsx)
• Utilities: camelCase (e.g., auth-token.ts)
• Pages: lowercase (e.g., page.tsx)
• Types: camelCase (e.g., user.ts)

Import Order

1. React and Next.js imports
2. Third-party libraries
3. Internal utilities and types
4. Components
5. Styles

Next Steps

• Configuration - Learn about the config system
• Components - Explore available components