One page first
Start with the whole system before you discuss tables, endpoints, cache, or scale.
A good sketch shows what talks to what. It lets a reviewer see your app in 30 seconds.
What to sketch
Use boxes for parts and arrows for calls. Keep it boring and clear.
Most hackathon apps need these boxes: user, client app, backend server, database, file storage, and any external service like UPI, WhatsApp, Maps, or an AI API.
Build the first diagram
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done
Example repo note
Put this in a file named SYSTEM_DESIGN.md. You can draw the diagram later, but write the parts today.
This example is for a canteen pre-order app on a college campus.
# System design
## User action
A student orders food before lunch break and picks it up at the canteen.
## Parts
- Client: React web app used by students and canteen staff
- Server: Node.js Express API for login, menu, orders, and order status
- Database: PostgreSQL for users, menu items, orders, and payments
- External service: UPI payment link or payment gateway for collecting money
- Notification: Email or WhatsApp provider for order-ready alerts
## First request flow
1. Student opens the React app.
2. React calls the Express API to fetch today’s menu.
3. Student places an order.
4. Express saves the order in PostgreSQL.
5. Express creates a payment request using the payment service.
6. Staff dashboard reads pending orders from the API.
7. Staff marks an order ready.
8. Server sends a notification to the student.
## Open choices
- We still need to decide if payments are confirmed by webhook or manual status.
- We still need to decide if notifications are sent directly or through a queue.Use AI carefully
Ask ChatGPT, Gemini, or Claude to turn your idea into a system sketch. Then check every box yourself.
Remove parts you will not build. If your hackathon app has one Express server, do not claim microservices. Reviewers prefer honest scope.
Prompt:
I am building a hackathon app for [users] to [main action].
Give me a simple system design with client, server, database, external services, request flow, and open choices.
Keep it realistic for a 2-day college hackathon.Do not start tiny
Beginners often start with database tables or a login endpoint. That makes the design hard to explain.
First show the whole journey. Later lessons will help you design APIs, data, caching, queues, and scaling choices.
Do this now
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done