Skip to main content

Technical Implementation

Architecture Overview​

SPO Academy consists of two main applications working together:

1. spoacademyapp - Marketing Website​

  • Technology: Next.js 15.3 with App Router, React 19, Tailwind CSS 4
  • Purpose: Public-facing landing page and lead generation
  • URL: https://spo.academy
  • Key Features:
    • Responsive design with dark/light mode
    • Form validation and Google Sheets integration
    • Course overview and benefits presentation
    • SPO application form with validation

2. spoacademydocs - Documentation Site​

3. Andamio Platform Integration​

Development Stack​

Frontend Technologies​

  • Next.js 15.3 with App Router architecture
  • React 19 with modern hooks and patterns
  • TypeScript for type safety
  • Tailwind CSS 4 for styling
  • next-themes for dark mode support

Backend Integration​

  • Google Sheets API for form data storage
  • Google Authentication using service accounts
  • Environment Variables for secure configuration

Development Tools​

  • ESLint with Next.js configuration
  • PostCSS with Tailwind CSS processing
  • GitLab CI/CD for deployment automation

Repository Structure​

spoacademy/
├── spoacademyapp/          # Next.js marketing website
│   ├── src/
│   │   ├── app/            # Next.js App Router
│   │   ├── components/     # React components
│   │   ├── lib/            # Utilities and validation
│   │   └── styles/         # Global styles
│   └── public/             # Static assets
├── spoacademydocs/         # Docusaurus documentation
│   ├── docs/               # Documentation content
│   ├── src/                # Custom components
│   └── static/             # Static files
└── *.csv                   # Course structure data

Form Integration​

Google Sheets Setup​

  1. Service Account: Created with Editor permissions
  2. API Configuration: Google Sheets API enabled in GCP
  3. Environment Variables:
    • GOOGLE_SHEETS_SPREADSHEET_ID
    • GOOGLE_SHEETS_CLIENT_EMAIL
    • GOOGLE_SHEETS_PRIVATE_KEY

Form Validation​

  • Client-side: Real-time validation with TypeScript
  • Server-side: API route validation using shared validation module
  • Fields: Name, Email, Discord Handle, Pool Ticker, Pool ID
  • Validation Rules:
    • Pool Ticker: 3-5 uppercase letters/numbers
    • Pool ID: 56-character hex or Bech32 format (starting with "pool")
    • Discord Handle: 3-32 characters with optional discriminator

Deployment​

Marketing Website (spoacademyapp)​

  • Platform: Production deployment details TBD
  • Build Command: npm run build
  • Environment: Requires Google Sheets API credentials

Documentation Site (spoacademydocs)​

  • Platform: GitLab Pages
  • URL: catalyst.pages.fluid7.co.uk/spoacademydocs
  • Branch: gl-pages
  • Build Command: yarn build

Development Workflow​

Local Development​

# Marketing website
cd spoacademyapp
npm install
npm run dev

# Documentation site  
cd spoacademydocs
yarn install
yarn start

Production Build​

# Marketing website
npm run build
npm start

# Documentation site
yarn build
yarn serve

Security Considerations​

  • API Keys: Stored in environment variables, never committed
  • Form Validation: Both client and server-side validation
  • CORS: Proper configuration for API endpoints
  • Rate Limiting: Consider implementing for form submissions
  • SSL/TLS: HTTPS required for production deployment