• Johnson Manasseh

  • Let's grow together

Phone

0123 456 789

Address

121 King Street, Melbourne Victoria 3000 Australia

Building a Full-Stack Web App in 45 Days – Day 7 (System Design Deep Dive)

It’s been a week since I started this challenge, and last week’s focus was system design. A well-planned design ensures the app is scalable, maintainable, and efficient. In this post, I’ll cover the key decisions I’ve made so far, including high-level design (HLD), low-level design (LLD), deployment, and scaling strategies.

1. High-Level Design (HLD)

This project follows a monolithic architecture, meaning that the backend, frontend, and database are part of a single, unified system. This approach is simpler to develop and maintain at this stage, and as the project scales, I can refactor certain components into microservices if needed.

At a high level, the system consists of:

  • Frontend: React + TailwindCSS (static site hosted on NGINX)

  • Backend: Node.js + Express (handling business logic and API requests)

  • Database: MongoDB Atlas (managed cloud database)

  • Authentication: JWT-based authentication

  • Deployment: Dockerized services hosted on DigitalOcean

  • Load Balancer: NGINX (to distribute traffic and ensure reliability)

This setup makes it easy to add new features or switch to a microservices approach later if needed.

2. Low-Level Design (LLD)

For better performance and maintainability, I have structured the backend into separate layers:

  • Controller Layer: Handles incoming API requests and responses

  • Service Layer: Business logic and data processing

  • Repository Layer: Handles database queries using Mongoose

Example folder structure:

backend/

 ├── controllers/

 ├── services/

 ├── models/

 ├── routes/

 ├── middleware/

 ├── config/

This approach keeps the codebase clean and modular.

Facebook
Twitter
LinkedIn

3. Database Schema Design

Since MongoDB is a NoSQL database, it offers flexibility. Here’s how I structured the collections:

  • Users Collection → Stores user profiles, emails, and authentication details.

  • Data Collection → Stores app-related data (details to be shared later 😉).

  • Logs Collection → Stores logs for debugging and analytics.

To ensure scalability, I’ve implemented indexing, proper schema validation, and optimized queries.

4. API Structure

I’m following a RESTful API approach with clear, modular endpoints. Example:

POST /api/auth/login → User authentication
GET /api/data → Fetch core data
POST /api/data → Add new data
PUT /api/data/:id → Update data
DELETE /api/data/:id → Remove data

For scalability, I’m considering GraphQL in the future to allow flexible queries.

5. Deployment Strategy (Docker, Vercel & DigitalOcean)

I’ve chosen Docker for containerized deployment, making the system portable and easy to manage. Setup includes:

  • Frontend Deployment: Hosted on Vercel for optimized performance.

  • Backend Deployment: Hosted on DigitalOcean with Docker.

  • Docker Containers: Separate containers for backend, frontend, and database.

  • Docker Compose: To manage multi-container applications easily.

  • NGINX Reverse Proxy: Handles API requests and serves static files.

  • PM2 Process Manager: Ensures the Node.js server runs smoothly.

I am using Docker because it allows me to move easily between cloud providers like AWS as the project grows. DigitalOcean is ideal for startups due to its affordability and simplicity.

Skyrocket your customer base with our digital marketing specialists

Get a free consultation
limited time

6. Scaling Strategy

Since I want the app to handle increased traffic smoothly, I’ve planned the following scaling strategies:

Horizontal Scaling: Running multiple instances of the backend with a load balancer (NGINX) distributing traffic.

CDN for Static Assets: Storing images and static content on a CDN (like Cloudflare) to reduce server load.

Autoscaling (Future Consideration): If the app grows, migrating to AWS ECS or Kubernetes for automatic scaling.

Next Steps

The system design is now solid, and moving forward, the focus will be on building core features, optimizing api , and improving security along with documenting.

I’ll be sharing updates in the next blog (Day 14), where I’ll cover apis and documentation! Stay tuned. 

Have any system design-related suggestions? Drop them in the comments!

“Don’t miss out on our latest computer science, technology, lifestyle, and design updates! Keep our notifications on to stay up-to-date.”

Want to get weekly knowledge ?

Get notified whenever we post new stuffs.