Unit 7.1 · Tutorial 2

Tech Stack Selection & Data Modeling

Chapter 21 · Capstone Project
~2.5 hours Intermediate Tech Stack · API Design · Data Modeling

Overview

With requirements defined, it's time to choose your technology stack. This tutorial covers selecting the right frontend, backend, and database technologies for your capstone project. You'll also learn to design a RESTful API contract and create a data model that supports your requirements.

Why this matters: Technology choices have long‑term implications for performance, maintainability, and team productivity. A well‑chosen stack makes development smoother and future‑proofs your application.

1. Choosing a Tech Stack

A tech stack is the combination of technologies used to build an application. It typically includes:

  • Frontend: Framework/library (React, Vue, Angular, Svelte)
  • Backend: Framework (Node.js/NestJS, Python/Django, Java/Spring Boot, Go/Gin)
  • Database: Relational (PostgreSQL, MySQL) or NoSQL (MongoDB, DynamoDB)
  • Infrastructure: Cloud platform (AWS, GCP, Azure) and tools (Docker, CI/CD)

Key considerations:

  • Team expertise: Use technologies your team already knows.
  • Project requirements: Performance, scalability, and real‑time needs.
  • Community support: Larger communities mean better documentation and libraries.
  • Career goals: Choose stacks that are in demand.

2. Frontend Options

// Comparison of popular frontend frameworks | Framework | Learning Curve | Performance | Ecosystem | |-----------|----------------|-------------|-----------| | React | Medium | Excellent | Largest | | Vue.js | Easy | Excellent | Large | | Angular | Steep | Good | Large | | Svelte | Easy | Excellent | Growing |

Recommendation for capstone

  • React: Most popular, largest ecosystem, great for SPAs.
  • Vue.js: Gentle learning curve, excellent documentation.
  • For this course: We'll use React (as covered in Module 2).
Tip: If you want to expand your portfolio, consider using a framework you haven't worked with before (but be realistic about the learning time).

3. Backend Options

// Comparison of popular backend frameworks | Framework | Language | Performance | Suitability | |------------------|----------|-------------|--------------------| | Node.js (Express)| JS/TS | Good (I/O) | SPAs, real‑time | | NestJS | TS | Good (I/O) | Enterprise, modular| | Django | Python | Moderate | Data‑heavy apps | | FastAPI | Python | Good (async)| APIs, microservices| | Spring Boot | Java | Excellent | Enterprise, large | | Laravel | PHP | Moderate | Web apps, CMS | | Go (Gin) | Go | Excellent | High‑performance |

For this course: You can choose any backend you're comfortable with. Node.js/NestJS, Python/Django, or Java/Spring Boot are excellent choices.

4. Database Selection

// Comparison of database types | Database Type | Examples | Best For | |---------------|-----------------|------------------------------| | Relational | PostgreSQL, MySQL| Structured data, ACID, joins | | Document | MongoDB | Flexible schemas, JSON data | | Key‑Value | Redis | Caching, sessions, real‑time | | Graph | Neo4j | Social networks, relationships|

Recommendation:

  • PostgreSQL: Excellent for most applications, supports JSON, excellent reliability.
  • MongoDB: Great if you have a flexible schema or need fast iteration.
  • Redis: Use as a cache layer, not as a primary database.

5. API Contract Design

Design your API before you start coding. Use OpenAPI (Swagger) to document your endpoints.

// Example OpenAPI (Swagger) spec for a product endpoint paths: /api/products: get: summary: Get all products responses: 200: description: List of products content: application/json: schema: type: array items: $ref: '#/components/schemas/Product' post: summary: Create a product requestBody: required: true content: application/json: schema: $ref: '#/components/schemas/ProductInput' responses: 201: description: Product created content: application/json: schema: $ref: '#/components/schemas/Product'

API design principles

  • Use nouns, not verbs: /products not /getProducts.
  • Use HTTP methods: GET (read), POST (create), PUT (update), DELETE.
  • Version your API: /api/v1/products.
  • Use consistent response formats: `{ data: ..., error: ... }`.

Quiz

Question 1

Which database type is best suited for applications requiring complex joins and ACID transactions?

  • Document (NoSQL)
  • Relational
  • Key‑Value
  • Graph
Show answer
B. Relational (e.g., PostgreSQL, MySQL).

Question 2

What is the recommended HTTP method for updating a resource?

  • GET
  • POST
  • PUT (or PATCH)
  • DELETE
Show answer
C. PUT (or PATCH for partial updates).

Question 3

Which of the following is NOT a factor in choosing a tech stack?

  • Team expertise
  • Project requirements
  • The colour of the logo
  • Community support
Show answer
C. The colour of the logo.

Exercises

Exercise 1

Choose a tech stack for a real‑time chat application. Justify your choices for frontend, backend, database, and caching.

Sample answer
  • Frontend: React – great for real‑time UI updates.
  • Backend: Node.js with Socket.io – excellent for WebSocket connections.
  • Database: PostgreSQL for message persistence (with JSON support).
  • Cache: Redis – for session storage and real‑time message queues.

Exercise 2

Design a simple API endpoint for user registration and login (JWT). Write the OpenAPI spec or a detailed description.

Sample answer
POST /api/v1/auth/register Body: { "email": "user@ex.com", "password": "secure123", "name": "John" } Response: 201 { "id": 1, "email": "user@ex.com", "name": "John" } POST /api/v1/auth/login Body: { "email": "user@ex.com", "password": "secure123" } Response: 200 { "token": "jwt-token-here", "user": { ... } }

Homework

Homework 1

For your capstone project, define your complete tech stack with justifications. Then design your data model (ER diagram) and API endpoints (list with methods and descriptions).

Sample outline
  • Tech Stack: List all technologies with brief justification for each.
  • Data Model: Create an ER diagram or text representation of your entities and relationships.
  • API Endpoints: List all endpoints with HTTP methods, request/response formats, and descriptions.

Mini‑Project

Complete Architecture Design

For your capstone project, complete the following:

  • Define your tech stack with justifications (frontend, backend, database, caching, deployment)
  • Create a detailed ER diagram (or text schema) for your data model
  • Design all API endpoints with OpenAPI specification
  • Create a Level 3 (Components) C4 diagram for your backend
Sample outline
  • Tech Stack: React, Node.js/NestJS, PostgreSQL, Redis, Docker, AWS
  • ER Diagram: Users, Posts, Comments, Categories (with relationships)
  • API: RESTful endpoints for each entity with OpenAPI specs
  • C4 Level 3: Components of the backend (controllers, services, repositories)

Tutorial Summary

You learned how to choose a technology stack for your capstone project, design a data model, and define an API contract. These decisions form the foundation of your implementation phase. With your tech stack, data model, and API design in place, you're ready to start building.

Key takeaway: A well‑designed data model and API contract prevent costly rework. Invest time in getting these right before writing code.