# shivam2-tech/fullstack-learning-journey architecture
> Architecture diagram of the GitHub repository shivam2-tech/fullstack-learning-journey, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-25). It is an AI-made overview: check details against the source.
- Interactive diagram: https://gitdiagram.com/shivam2-tech/fullstack-learning-journey
- Repository: https://github.com/shivam2-tech/fullstack-learning-journey
## Overview
This repository is a curated collection of **independent learning projects**, not a single unified application. The main architectural boundary is the folder-level separation: each subproject has its own entry point, assets, and runtime assumptions, and there is very little shared code across projects.
1. **Top-level structure as progression**
The repo is organized by learning stage: frontend basics, API-driven apps, DOM exercises, Node.js backend exercises, and React apps. A diagram should show these as parallel tracks rather than one dependency chain.
2. **Static browser apps**
The `01-api-projects`, `02-mini-projects`, and `03-dom-projects` folders are mostly plain HTML/CSS/JavaScript apps. Each one runs directly in the browser, with `index.html`/`script.js`/`style.css` or similar as the whole application boundary.
3. **API consumer apps**
The API projects include Pokémon, Weather, and Movie apps. Their core flow is:
browser UI → JavaScript fetch logic → external public API → render results back into the DOM.
These projects are important because they introduce asynchronous data loading and API response handling, but they do not have their own backend.
4. **Local state and browser persistence**
Several mini-projects, especially to-do list variants, rely on browser-side state and likely `localStorage` for persistence. In architecture terms, the “database” is the browser storage layer, not an external service.
5. **DOM-interaction exercises**
The `03-dom-projects` folder is centered on event handling and UI updates: clock, counter, and calculator. These are client-only apps with direct user interaction loops:
user event → JS state update → DOM re-render/update.
6. **Node.js fundamentals**
The `04-Node js/01-Basic`, `02-file-system`, `03-Modules`, and `04-npm` folders are backend/Node practice modules. They demonstrate server-side JavaScript primitives, filesystem access, module exports/imports, and package management, but they are not a single product service.
7. **Express REST API layer**
The `04-Node js/05-express-basics` and `04-Node js/Movie API` folders introduce an HTTP server boundary. Here the flow becomes:
client request → Express route → middleware/handler → JSON response.
This is the first real server-side API layer in the repo.
8. **In-memory API service**
`04-Node js/Movie API` uses a file-based data module (`data/movies.js`) rather than a database. The architecture is a classic REST API with route handlers and middleware for logging, validation, and error handling, but persistence is in-memory/static data.
9. **MongoDB-backed backend apps**
`04-Node js/Movie-API-MongoDB` and `04-Node js/Notes-API-MongoDB` add a real persistence layer through MongoDB. These projects have a clearer backend architecture:
Express routes → middleware → Mongoose models → MongoDB.
Authentication is introduced in these versions through dedicated auth middleware and auth routes.
10. **Backend cross-cutting concerns**
Both MongoDB-backed services include middleware for auth, validation, logging, and error handling. These are shared architectural concerns that sit between incoming requests and the domain models/routes.
11. **React frontend apps**
The `05-React` folder contains separate Vite-based React projects: health tracker, score keeper, to-do list, and username preview. Each has its own `src/main.jsx`, `App.jsx`, and styling entry point, so they should be diagrammed as standalone SPAs.
12. **React component boundaries**
These React projects are small component trees rather than multi-page systems. For example, `score-keeper` includes a reusable `Player` component, while others are mostly single-root `App` apps managing local component state.
13. **Build/runtime tooling**
The repo mixes runtime models: browser-only static files, Node.js scripts/servers, and Vite-bundled React apps. Package manifests and lockfiles appear only where npm-based tooling is needed, while plain HTML/JS exercises do not require a build step.
14. **Overall architectural story**
The repository is best represented as a learning portfolio of isolated apps that progressively evolve from:
static UI → DOM interaction → public API consumption → Node/Express servers → database-backed REST APIs → React component apps.
There is no central shared backend or monorepo orchestration layer.
Main entry points: [`03-dom-projects/COUNTER APP`](https://github.com/shivam2-tech/fullstack-learning-journey/tree/HEAD/03-dom-projects/COUNTER%20APP) (Counter), [`04-Node js/02-file-system/file.js`](https://github.com/shivam2-tech/fullstack-learning-journey/blob/HEAD/04-Node%20js/02-file-system/file.js) (File system), [`04-Node js/03-Modules/greetings.js`](https://github.com/shivam2-tech/fullstack-learning-journey/blob/HEAD/04-Node%20js/03-Modules/greetings.js) (Modules), [`04-Node js/04-npm/index.js`](https://github.com/shivam2-tech/fullstack-learning-journey/blob/HEAD/04-Node%20js/04-npm/index.js) (NPM setup)
## Diagram (Mermaid)
```mermaid
flowchart TD
subgraph group_browser_static["Browser learning apps"]
node_api_pokemon["Pokemon fetch
browser app"]
node_api_weather["Weather API
browser app"]
node_api_movie["Movie API
browser app"]
node_api_advanced_pokemon["Advanced Pokémon
browser app"]
node_mini_todo["To-do list
browser app"]
node_mini_advanced_todo["Advanced todo
browser app"]
node_mini_guess["Number game
browser app"]
node_mini_stopwatch["Stopwatch
browser app"]
node_mini_converter["Unit converter
browser app"]
node_dom_clock(("Clock
DOM exercise"))
node_dom_counter(("Counter
DOM exercise"))
node_dom_calculator(("Calculator
DOM exercise"))
node_browser_storage[("Browser storage
client storage")]
node_api_service[("Public APIs
external service")]
end
subgraph group_node_backend["Node backends"]
node_node_basic["Basic Node
node script
[app.js]"]
node_node_fs["File system
node script
[file.js]"]
node_node_modules["Modules
node script
[greetings.js]"]
node_node_npm["NPM setup
tooling
[index.js]"]
node_express_basic["Express basics
http server
[index.js]"]
node_movie_api["Movie API
rest api
[index.js]"]
node_movie_api_mongo["Movie API Mongo
rest api
[index.js]"]
node_notes_api_mongo["Notes API Mongo
rest api
[index.js]"]
node_mongo_db[("MongoDB
database")]
end
subgraph group_react_spa["React apps"]
node_react_health["Health tracker
react spa"]
node_react_score["Score keeper
react spa"]
node_react_todo["React todo
react spa"]
node_react_username["Username preview
react spa"]
end
node_api_pokemon -->|"fetches"| node_api_service
node_api_weather -->|"fetches"| node_api_service
node_api_movie -->|"fetches"| node_api_service
node_api_advanced_pokemon -->|"fetches"| node_api_service
node_mini_todo -->|"persists"| node_browser_storage
node_mini_advanced_todo -->|"persists"| node_browser_storage
node_dom_clock -.->|"shares pattern"| node_dom_counter
node_dom_counter -.->|"shares pattern"| node_dom_calculator
node_node_basic -.->|"progresses to"| node_node_fs
node_node_fs -.->|"progresses to"| node_node_modules
node_node_modules -.->|"progresses to"| node_node_npm
node_node_npm -.->|"progresses to"| node_express_basic
node_express_basic -->|"extends"| node_movie_api
node_movie_api -->|"upgrades persistence"| node_movie_api_mongo
node_movie_api_mongo -->|"stores in"| node_mongo_db
node_notes_api_mongo -->|"stores in"| node_mongo_db
node_react_health -.->|"same runtime"| node_react_score
node_react_score -.->|"same runtime"| node_react_todo
node_react_todo -.->|"same runtime"| node_react_username
click node_api_pokemon "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/01-api-projects/Pokemon ( fetch Api )"
click node_api_weather "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/01-api-projects/Weather API"
click node_api_movie "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/01-api-projects/Movie API"
click node_api_advanced_pokemon "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/01-api-projects/ADVANCED POKEMON"
click node_mini_todo "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/02-mini-projects/TO-DO LIST"
click node_mini_advanced_todo "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/02-mini-projects/Advanced To-do List"
click node_mini_guess "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/02-mini-projects/NUMBER GUESSING GAME"
click node_mini_stopwatch "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/02-mini-projects/STOPWATCH"
click node_mini_converter "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/02-mini-projects/UNIT CONVERTER"
click node_dom_clock "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/03-dom-projects/CLOCK"
click node_dom_counter "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/03-dom-projects/COUNTER APP"
click node_dom_calculator "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/03-dom-projects/Simple Calculator"
click node_node_basic "https://github.com/shivam2-tech/fullstack-learning-journey/blob/main/04-Node js/01-Basic/app.js"
click node_node_fs "https://github.com/shivam2-tech/fullstack-learning-journey/blob/main/04-Node js/02-file-system/file.js"
click node_node_modules "https://github.com/shivam2-tech/fullstack-learning-journey/blob/main/04-Node js/03-Modules/greetings.js"
click node_node_npm "https://github.com/shivam2-tech/fullstack-learning-journey/blob/main/04-Node js/04-npm/index.js"
click node_express_basic "https://github.com/shivam2-tech/fullstack-learning-journey/blob/main/04-Node js/05-express-basics/index.js"
click node_movie_api "https://github.com/shivam2-tech/fullstack-learning-journey/blob/main/04-Node js/Movie API/index.js"
click node_movie_api_mongo "https://github.com/shivam2-tech/fullstack-learning-journey/blob/main/04-Node js/Movie-API-MongoDB/index.js"
click node_notes_api_mongo "https://github.com/shivam2-tech/fullstack-learning-journey/blob/main/04-Node js/Notes-API-MongoDB/index.js"
click node_react_health "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/05-React/Health_Tracker/health_tracker"
click node_react_score "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/05-React/score-keeper"
click node_react_todo "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/05-React/to_doList"
click node_react_username "https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/05-React/username_preview"
classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_api_pokemon,node_api_weather,node_api_movie,node_api_advanced_pokemon,node_mini_todo,node_mini_advanced_todo,node_mini_guess,node_mini_stopwatch,node_mini_converter,node_dom_clock,node_dom_counter,node_dom_calculator,node_browser_storage,node_api_service toneBlue
class node_node_basic,node_node_fs,node_node_modules,node_node_npm,node_express_basic,node_movie_api,node_movie_api_mongo,node_notes_api_mongo,node_mongo_db toneAmber
class node_react_health,node_react_score,node_react_todo,node_react_username toneMint
```
## Components
### Browser learning apps
Static HTML/CSS/JS projects, DOM exercises, and API-consuming browser apps.
- [Pokemon fetch](https://github.com/shivam2-tech/fullstack-learning-journey/tree/HEAD/01-api-projects/Pokemon%20(%20fetch%20Api%20)): browser app · Client-side Pokémon app that fetches public API data and renders results in the DOM. · `01-api-projects/Pokemon ( fetch Api )`
- [Weather API](https://github.com/shivam2-tech/fullstack-learning-journey/tree/HEAD/01-api-projects/Weather%20API): browser app · Browser weather app centered on asynchronous API requests and DOM rendering. · `01-api-projects/Weather API`
- [Movie API](https://github.com/shivam2-tech/fullstack-learning-journey/tree/HEAD/01-api-projects/Movie%20API): browser app · Client-side movie search app with fetch logic and result rendering. · `01-api-projects/Movie API`
- [Advanced Pokémon](https://github.com/shivam2-tech/fullstack-learning-journey/tree/HEAD/01-api-projects/ADVANCED%20POKEMON): browser app · More involved Pokémon browser app with richer client-side interaction. · `01-api-projects/ADVANCED POKEMON`
- [To-do list](https://github.com/shivam2-tech/fullstack-learning-journey/tree/HEAD/02-mini-projects/TO-DO%20LIST): browser app · Simple browser to-do app with local state and DOM updates. · `02-mini-projects/TO-DO LIST`
- [Advanced todo](https://github.com/shivam2-tech/fullstack-learning-journey/tree/HEAD/02-mini-projects/Advanced%20To-do%20List): browser app · Todo variant with richer client-side state and persistence concerns. · `02-mini-projects/Advanced To-do List`
- [Number game](https://github.com/shivam2-tech/fullstack-learning-journey/tree/HEAD/02-mini-projects/NUMBER%20GUESSING%20GAME): browser app · Interactive guessing game driven by input handling and UI feedback loops. · `02-mini-projects/NUMBER GUESSING GAME`
- [Stopwatch](https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/02-mini-projects/STOPWATCH): browser app · Timer-style mini project with repeated UI updates in the browser. · `02-mini-projects/STOPWATCH`
- [Unit converter](https://github.com/shivam2-tech/fullstack-learning-journey/tree/HEAD/02-mini-projects/UNIT%20CONVERTER): browser app · Client-side conversion exercise built as a static page app. · `02-mini-projects/UNIT CONVERTER`
- [Clock](https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/03-dom-projects/CLOCK): DOM exercise · Client-only clock built around scheduled DOM updates. · `03-dom-projects/CLOCK`
- [Counter](https://github.com/shivam2-tech/fullstack-learning-journey/tree/HEAD/03-dom-projects/COUNTER%20APP): DOM exercise · Event-driven counter app with local UI state. · `03-dom-projects/COUNTER APP`
- [Calculator](https://github.com/shivam2-tech/fullstack-learning-journey/tree/HEAD/03-dom-projects/Simple%20Calculator): DOM exercise · Interactive calculator focused on user events and DOM state updates. · `03-dom-projects/Simple Calculator`
- **Browser storage**: client storage · Local browser persistence layer used by stateful mini projects.
- **Public APIs**: external service · External public APIs consumed by the browser API projects.
### Node backends
Node.js fundamentals, Express APIs, and MongoDB-backed services.
- [Basic Node](https://github.com/shivam2-tech/fullstack-learning-journey/blob/HEAD/04-Node%20js/01-Basic/app.js): node script · Introductory Node.js script demonstrating runtime fundamentals. · `04-Node js/01-Basic/app.js`
- [File system](https://github.com/shivam2-tech/fullstack-learning-journey/blob/HEAD/04-Node%20js/02-file-system/file.js): node script · Node file-system exercises built around reading and writing local files. · `04-Node js/02-file-system/file.js`
- [Modules](https://github.com/shivam2-tech/fullstack-learning-journey/blob/HEAD/04-Node%20js/03-Modules/greetings.js): node script · CommonJS module examples showing imports, exports, and reuse. · `04-Node js/03-Modules/greetings.js`
- [NPM setup](https://github.com/shivam2-tech/fullstack-learning-journey/blob/HEAD/04-Node%20js/04-npm/index.js): tooling · Package-managed Node exercise showing npm-based project scaffolding. · `04-Node js/04-npm/index.js`
- [Express basics](https://github.com/shivam2-tech/fullstack-learning-journey/blob/HEAD/04-Node%20js/05-express-basics/index.js): http server · First Express server boundary with routing and request/response handling. · `04-Node js/05-express-basics/index.js`
- [Movie API](https://github.com/shivam2-tech/fullstack-learning-journey/blob/HEAD/04-Node%20js/Movie%20API/index.js): rest api · Express REST API using routes, middleware, and a file-backed movie data module. · `04-Node js/Movie API/index.js`
- [Movie API Mongo](https://github.com/shivam2-tech/fullstack-learning-journey/blob/HEAD/04-Node%20js/Movie-API-MongoDB/index.js): rest api · MongoDB-backed Express API with auth, validation, and model-driven persistence. · `04-Node js/Movie-API-MongoDB/index.js`
- [Notes API Mongo](https://github.com/shivam2-tech/fullstack-learning-journey/blob/HEAD/04-Node%20js/Notes-API-MongoDB/index.js): rest api · MongoDB-backed notes service with auth routes and model-based persistence. · `04-Node js/Notes-API-MongoDB/index.js`
- **MongoDB**: database · External persistence layer used by the MongoDB-backed backend projects.
### React apps
Standalone Vite-powered React single-page apps.
- [Health tracker](https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/05-React/Health_Tracker/health_tracker): react spa · Vite-based React app with a small component tree and local UI state. · `05-React/Health_Tracker/health_tracker`
- [Score keeper](https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/05-React/score-keeper): react spa · React score-keeping app with reusable player component boundaries. · `05-React/score-keeper`
- [React todo](https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/05-React/to_doList): react spa · React todo application organized as a standalone Vite app. · `05-React/to_doList`
- [Username preview](https://github.com/shivam2-tech/fullstack-learning-journey/tree/main/05-React/username_preview): react spa · Small React app for live previewing username input. · `05-React/username_preview`
## Connections
- Pokemon fetch → Public APIs: fetches · Browser app requests Pokémon data from a public API.
- Weather API → Public APIs: fetches · Browser app loads weather data from a public API.
- Movie API → Public APIs: fetches · Browser app queries an external movie API.
- Advanced Pokémon → Public APIs: fetches · Enhanced Pokémon app still depends on external API responses.
- To-do list → Browser storage: persists · Todo state is kept in browser storage rather than a backend.
- Advanced todo → Browser storage: persists · Advanced todo variants rely on local browser persistence.
- Clock → Counter: shares pattern · Both are client-only event/update exercises.
- Counter → Calculator: shares pattern · Calculator continues the DOM interaction learning track.
- Basic Node → File system: progresses to · Node fundamentals lead into filesystem exercises.
- File system → Modules: progresses to · Filesystem practice is followed by module system exercises.
- Modules → NPM setup: progresses to · Module basics transition into npm-managed projects.
- NPM setup → Express basics: progresses to · Package-managed Node work expands into an HTTP server.
- Express basics → Movie API: extends · Express basics evolve into a structured REST API.
- Movie API → Movie API Mongo: upgrades persistence · Movie API gains real database-backed storage and auth.
- Movie API Mongo → MongoDB: stores in · Mongo-backed service persists data in MongoDB.
- Notes API Mongo → MongoDB: stores in · Notes service also persists data in MongoDB.
- Health tracker → Score keeper: same runtime · Standalone React/Vite apps with similar SPA structure.
- Score keeper → React todo: same runtime · All React projects are separate entry points, not one app.
- React todo → Username preview: same runtime · Each React folder is an isolated Vite-based SPA.