LeetCode but for System Design Interview Preparation

About

Distributed Design is a comprehensive platform designed to help software engineers prepare for system design interviews. It provides a collection of real-world system design problems with varying difficulty levels, allowing users to practice and improve their system design skills.

Features

• Diverse Problem Set: Collection of system design problems ranging from easy to hard difficulty levels
• Interactive Interface: User-friendly interface to navigate through problems and track progress
• Detailed Requirements: Each problem comes with functional and non-functional requirements
• Realistic Constraints: Problems include realistic usage estimates and assumptions
• Progress Tracking: Track your solved problems and improvement over time
• User Authentication: Secure login and profile management

Tech Stack

• Frontend: React, Next.js, TailwindCSS
• UI Components: Radix UI, Shadcn UI
• LLM: Perplexity API (sonar-deep-research)
• Authentication: NextAuth.js
• Database: Prisma ORM
• API: tRPC
• Styling: Tailwind CSS
• Deployment: Vercel (recommended)

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/yourusername/distributed-design.git
   cd distributed-design

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   cp .env.example .env
   # Update the .env file with your configuration

4. Set up the database

   npx prisma generate
   npx prisma db push

5. Start the development server

   npm run dev
   # or
   yarn dev

6. Open http://localhost:3000 in your browser

Folder Structure

├── app/                  # Next.js app directory (pages and routing)
│   ├── _trpc/           # tRPC client setup
│   ├── admin/           # Admin panel pages
│   ├── api/             # API routes
│   ├── login/           # Login page
│   ├── problems/        # System design problems pages
│   ├── profile/         # User profile pages
│   ├── settings/        # User settings pages
│   └── signup/          # Signup page
├── components/          # React components
│   └── ui/              # UI components (buttons, inputs, etc.)
├── hooks/               # Custom React hooks
├── lib/                 # Utility functions and libraries
├── prisma/              # Prisma ORM configuration and schema
├── public/              # Static assets
│   ├── images/          # Image assets including logo
│   └── models/          # Model files
├── server/              # Server-side code
│   └── router/          # tRPC routers
├── styles/              # Global styles
└── types/               # TypeScript type definitions