Technical Challenge - Monorepo Project

A full-stack application built with a Node.js Express API and React frontend, organized as a monorepo using pnpm and Turborepo.

🏗️ Project Structure

/
├── packages/
│   ├── api/                 # Express.js API server
│   │   ├── src/
│   │   ├── db/
│   │   └── package.json
│   └── client/              # React frontend application
│       ├── src/
│       └── package.json
├── package.json             # Root package.json
├── pnpm-workspace.yaml      # pnpm workspace configuration
├── turbo.json              # Turborepo configuration
├── biome.json              # Biome linting/formatting config
├── docker-compose.yml      # Docker compose configuration
└── .vscode/                # VS Code settings

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• pnpm (v8 or higher)
• Docker (v24 or higher)

Installation

1. Clone the repository
2. Start up the MongoDB container with Docker:

   docker-compose up -d mongo

3. Install dependencies:

   pnpm install

Development

Start both the API and client in development mode:

pnpm dev

This will start:

• API Server: http://localhost:3001
• Client App: http://localhost:3000
• MongoDB: mongodb://localhost:27017

Individual Services

Start only the API:

cd packages/api
pnpm dev

Start only the client:

cd packages/client
pnpm dev

Start only the database:

docker-compose up -d technical-challenge-mongodb

🛠️ Available Scripts

Root Level

• pnpm dev - Start all services in development mode
• pnpm build - Build all packages
• pnpm lint - Run Biome linting
• pnpm format - Format code with Biome
• pnpm check - Run both linting and formatting checks

API Scripts

• pnpm dev - Start API server with hot reload
• pnpm build - Build TypeScript to JavaScript
• pnpm start - Start production server

Client Scripts

• pnpm dev - Start Vite development server
• pnpm build - Build for production
• pnpm preview - Preview production build

🎯 Features

Frontend (React + TypeScript)

• Modern UI: Built with React 18 and TypeScript
• Routing: React Router for navigation
• Styling: Custom CSS with Source Sans Pro font
• Icons: Font Awesome icons
• Responsive: Mobile-friendly design
• Interactive Accordion: Collapsible task sections with progress tracking

Backend (Express + TypeScript)

• RESTful API: Express.js server with TypeScript
• Database: Pre seeded MongoDB database running in a Docker container
• CORS: Cross-origin resource sharing enabled
• Room Data: /rooms/:roomCode endpoint

Development Tools

• Monorepo: pnpm workspaces + Turborepo
• Code Quality: Biome for linting and formatting
• Type Safety: Full TypeScript support
• Hot Reload: Fast development experience

📁 Key Components

Frontend Components

• Header: Shared navigation component
• Home: Landing page with main title section
• About: Project information page
• Room: Interactive room page with accordion
• Accordion: Collapsible task display with progress tracking

API Endpoints

• GET /rooms/:roomCode - Get room data with tasks and questions

🎨 Styling

The project uses a custom CSS approach with:

• Color Scheme: Dark theme with green/red progress indicators
• Typography: Source Sans Pro font family
• Layout: Flexbox and CSS Grid
• Responsive: Mobile-first design approach
• Animations: Smooth transitions and hover effects

🔧 Configuration

Biome (Code Quality)

• Indentation: 2 spaces (no tabs)
• Line Width: 100 characters
• Linting: Recommended rules enabled
• Formatting: Automatic on save (VS Code)

TypeScript

• Strict Mode: Enabled
• Module Resolution: Node.js style
• Target: ES2020

🚀 Deployment

Build for Production

pnpm build

Environment Variables

Create a .env file in the API package:

DATABASE_URL=mongodb://localhost:27017/technical-challenge?directConnection=true
PORT=3001

📝 Development Notes

• The project uses pnpm for fast, efficient package management
• Turborepo provides intelligent caching and parallel execution
• Biome ensures consistent code formatting and catches common issues
• The API uses MongoDB with a pre seeded database running in a Docker container for development
• All components are built with accessibility in mind

🤝 Contributing

1. Follow the existing code style (2 spaces, Biome formatting)
2. Use TypeScript for all new code
3. Add proper type definitions
4. Test your changes locally with pnpm dev
5. Run pnpm check before committing

📄 License

This project is part of a technical challenge.