SystemStudio

A collaborative platform for practicing and mastering system design

🎯 Overview

SystemStudio is an open-source platform designed to help developers practice and master system design skills. Whether you're preparing for technical interviews, building distributed systems, or simply want to learn from the community, SystemStudio provides a comprehensive environment to create, share, and discuss system design solutions.

Key Features

• 📚 Challenge Library: Browse and solve system design challenges across different difficulty levels (Easy, Medium, Hard)
• ✏️ Interactive Solution Editor: Create solutions with:
  • Rich text editor powered by Tiptap for detailed explanations
  • Integrated Excalidraw canvas for system architecture diagrams
  • Auto-save functionality to never lose your work
• 💬 Community Engagement:
  • Comment on solutions to ask questions and provide feedback
  • Vote on challenges, solutions, and comments
  • View community activity and recent submissions
• 🏆 Leaderboard: Track your progress and compete with other designers
  • Points system: 10 points per solution, 3 points per comment, 1 point per upvote received
• 📊 User Statistics: Track your solutions, comments, and voting activity

🚀 Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Authentication: Clerk
• Database: PostgreSQL with Prisma
• UI Components: Radix UI + shadcn/ui
• Styling: Tailwind CSS
• Diagramming: Excalidraw
• Rich Text: Tiptap
• Animations: Anime.js

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 18+ or Bun latest
• PostgreSQL 14+ (or use a cloud provider like Neon, Supabase, or Railway)
• Git

🛠️ Installation

1. Clone the repository

git clone https://github.com/olucasandrade/systemstudio.git
cd systemstudio

2. Install dependencies

Using npm:

npm install

Using yarn:

yarn install

Using pnpm:

pnpm install

Using bun:

bun install

3. Set up environment variables

Create a .env.local file in the root directory:

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/systemstudio?schema=public"

# Clerk Authentication (get these from https://dashboard.clerk.com)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/challenges
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/challenges

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

# Optional: Documentation URL (for help links)
NEXT_PUBLIC_DOCS_URL=https://docs.systemstudio.com
NEXT_PUBLIC_WEB_URL=https://systemstudio.com

4. Set up the database

Run Prisma migrations to create the database schema:

npx prisma migrate dev

Generate the Prisma client:

npx prisma generate
# or
bunx prisma generate

5. Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 in your browser to see the application.

📁 Project Structure

systemstudio/
├── app/                          # Next.js app directory
│   ├── (authenticated)/          # Authenticated routes
│   │   ├── challenges/          # Challenge pages
│   │   ├── community/           # Community page
│   │   ├── leaderboard/         # Leaderboard page
│   │   ├── search/              # Search page
│   │   ├── components/          # Reusable components
│   │   └── hooks/               # React hooks
│   ├── (unauthenticated)/       # Public routes
│   │   └── sign-in/             # Sign-in page
│   ├── api/                     # API routes
│   ├── auth/                    # Authentication setup
│   ├── database/                # Database utilities
│   ├── design-system/            # UI components and theme
│   └── seo/                     # SEO utilities
├── prisma/                      # Prisma schema and migrations
│   └── schema.prisma            # Database schema
├── public/                      # Static assets
└── generated/                   # Generated Prisma client

🗄️ Database Schema

The application uses the following main models:

• Challenge: System design challenges with title, description, difficulty, and tags
• Solution: User solutions to challenges with descriptions and diagram data
• Comment: Comments on solutions
• Vote: Upvotes/downvotes on challenges, solutions, and comments
• UserStats: User statistics including score, solution count, and voting activity

See prisma/schema.prisma for the complete schema definition.

🤝 Contributing

We welcome contributions from the community! Whether it's bug fixes, new features, documentation improvements, or design enhancements, your help makes SystemStudio better for everyone.

How to Contribute

1. Fork the repository and create your branch from main:

   git checkout -b feature/amazing-feature

2. Make your changes:

   • Follow the existing code style and conventions
   • Write clear commit messages
   • Add comments for complex logic
   • Ensure your code is properly formatted
   • Implement unit or integration tests for everything (I know I'm not the best example, but I intend to ensure that every feature is covered as soon as possible)

3. Test your changes:

   • Test locally to ensure everything works
   • Check for linting errors: npm run lint
   • Verify the build succeeds: npm run build

4. Submit a Pull Request:

   • Provide a clear description of your changes
   • Reference any related issues
   • Include screenshots for UI changes if applicable

Contribution Guidelines

• Code Style: Follow the existing TypeScript/React patterns
• Commits: Use clear, descriptive commit messages
• PRs: Keep pull requests focused and reasonably sized
• Issues: Check existing issues before creating new ones
• Documentation: Update documentation for new features

Areas for Contribution

• 🐛 Bug Fixes: Help us squash bugs
• ✨ New Features: Propose and implement new functionality
• 📝 Documentation: Improve guides, comments, and README
• 🎨 UI/UX: Enhance the user interface and experience
• 🧪 Testing: Add tests to improve code quality
• 🌐 Internationalization: Add support for more languages
• 🔧 Performance: Optimize queries, caching, and rendering

📝 Development Guidelines

Code Style

• Use TypeScript for type safety
• Follow React best practices (hooks, functional components)
• Use meaningful variable and function names
• Keep components small and focused
• Extract reusable logic into custom hooks

Database

• Use Prisma migrations for schema changes
• Always provide migration files with schema changes
• Test migrations on a local database

API Routes

• Use Next.js App Router API routes
• Implement proper error handling
• Return consistent response formats
• Add appropriate HTTP status codes

UI Components

• Use shadcn/ui components from app/design-system/components/ui
• Follow the existing design system patterns
• Ensure responsive design for mobile devices
• Support both light and dark themes

🐛 Reporting Bugs

If you find a bug, please open an issue with:

• Clear description of the bug
• Steps to reproduce the issue
• Expected behavior vs actual behavior
• Screenshots if applicable
• Environment details (OS, Node version, browser)

💡 Feature Requests

Have an idea for a new feature? We'd love to hear it! Open an issue with:

• Feature description and use case
• Proposed implementation (if you have ideas)
• Benefits to the community

📚 Documentation

• API Documentation: See /app/api for available endpoints
• Component Documentation: Check component files in app/design-system/components
• Database Schema: See prisma/schema.prisma

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js for the amazing framework
• Clerk for authentication
• Prisma for database management
• Excalidraw for diagramming
• shadcn/ui for UI components
• NextForge for the template that inspired me
• All contributors and users of SystemStudio

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions

🌟 Star History

If you find SystemStudio helpful, please consider giving it a star ⭐ on GitHub!

---

Made with ❤️ by olucasandrade

Contributors