Skip to content

stack.md

Latest commit

 

History

History
163 lines (134 loc) · 4.58 KB

stack.md

File metadata and controls

163 lines (134 loc) · 4.58 KB
Raw

📘 Technology Stack: Reportly

Overview

Reportly is built using a modern technology stack that prioritizes developer experience, performance, and scalability. This document outlines the key technologies used in the project.

Frontend Technologies

Technology Version Purpose
Next.js 15.x React framework with server-side rendering
React 19.x UI component library
TypeScript 5.x Type-safe JavaScript
Tailwind CSS 3.x/4.x Utility-first CSS framework
TipTap 2.x Extensible rich text editor
React Hook Form 7.x Form handling
Zod 3.x Schema validation
Lucide React 0.x Icon library
React Hot Toast 2.x Toast notifications
SWR 2.x Data fetching and caching

Backend Technologies

Technology Version Purpose
Node.js 20.x JavaScript runtime
Next.js Server Actions 15.x Server-side API functions
MongoDB 6.x NoSQL database
Mongoose 8.x MongoDB object modeling
Supabase 2.x Authentication and storage
OpenAI API - AI integration
Pinecone - Vector database for embeddings

Development Tools

Tool Purpose
ESLint Code linting
Prettier Code formatting
Jest Unit testing
Testing Library Component testing
Cypress End-to-end testing
Husky Git hooks
Commitlint Commit message linting

Infrastructure

Service Purpose
Vercel Hosting and deployment
MongoDB Atlas Database hosting
Supabase Authentication and storage
GitHub Version control
GitHub Actions CI/CD

Key Dependencies

Frontend Dependencies

{
  "dependencies": {
    "@supabase/auth-helpers-nextjs": "^0.8.1",
    "@supabase/supabase-js": "^2.38.4",
    "@tiptap/extension-image": "^2.1.12",
    "@tiptap/extension-link": "^2.1.12",
    "@tiptap/extension-placeholder": "^2.1.12",
    "@tiptap/pm": "^2.1.12",
    "@tiptap/react": "^2.1.12",
    "@tiptap/starter-kit": "^2.1.12",
    "date-fns": "^2.30.0",
    "lucide-react": "^0.292.0",
    "mongoose": "^8.0.0",
    "next": "14.0.2",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.48.2",
    "react-hot-toast": "^2.4.1",
    "swr": "^2.2.4",
    "zod": "^3.22.4"
  }
}

Development Dependencies

{
  "devDependencies": {
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/react": "^14.1.0",
    "@types/jest": "^29.5.8",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "cypress": "^13.5.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.2",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "postcss": "^8",
    "tailwindcss": "^3.3.0", // For Tailwind CSS v3
    "@tailwindcss/postcss": "^4.1.3", // For Tailwind CSS v4
    "typescript": "^5"
  }
}

Environment Setup

Required Environment Variables

# MongoDB Connection
MONGODB_URI=mongodb+srv://...

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=https://...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...
SUPABASE_SERVICE_ROLE_KEY=...

# OpenAI Configuration
OPENAI_API_KEY=...

# Application Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000

Development Environment

  1. Node.js 20.x or higher
  2. npm 10.x or higher
  3. MongoDB instance (local or Atlas)
  4. Supabase project
  5. OpenAI API key

Performance Considerations

  • Server-side Rendering: Critical pages use SSR for improved performance
  • Static Site Generation: Documentation pages use SSG for fast loading
  • Image Optimization: Next.js Image component for optimized images
  • Code Splitting: Automatic code splitting for smaller bundle sizes
  • Caching Strategy: SWR for efficient data fetching and caching
  • Database Indexing: Strategic indexes for faster queries

Scalability Considerations

  • Horizontal Scaling: Stateless architecture for easy scaling
  • Database Sharding: MongoDB sharding for large datasets
  • Edge Caching: Vercel Edge Network for global performance
  • Serverless Functions: Next.js API routes scale automatically
  • Rate Limiting: Protection against abuse

Security Measures

  • Authentication: JWT-based authentication with Supabase
  • Authorization: Role-based access control
  • Input Validation: Server-side validation with Zod
  • XSS Protection: React's built-in XSS protection
  • CSRF Protection: Next.js built-in CSRF protection
  • Content Security Policy: Strict CSP headers
  • Database Security: Proper indexing and access controls