# sudeepacharjee/the-50-front-end-project architecture

> Architecture diagram of the GitHub repository sudeepacharjee/the-50-front-end-project, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sudeepacharjee/the-50-front-end-project
- Repository: https://github.com/sudeepacharjee/the-50-front-end-project

## Overview

This repository is a collection of 50 independent browser-based frontend projects, not one application with a shared runtime. The README says users open each project’s HTML page separately. The graph groups the documented projects by capability; it does not imply shared code or a common runtime. Source excerpts support details for only a few projects, so unsampled implementation and wiring are not inferred.

Main entry points: [`02.Blog-Website(With Admin Panel)/defualt.js`](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/02.Blog-Website(With%20Admin%20Panel)/defualt.js) (Blog with admin panel), [`06.Hotel Website/luxe/js/custom.js`](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/06.Hotel%20Website/luxe/js/custom.js) (Hotel website), [`07.Photography Portfolio Website/public/src/js/theme.js`](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/07.Photography%20Portfolio%20Website/public/src/js/theme.js) (Photography portfolio), [`08.Fitness Website/zacson-master/contact_process.php`](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/08.Fitness%20Website/zacson-master/contact_process.php) (Fitness website)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_sites["Websites"]
  node_websites["Portfolio and business sites"]
  node_blog["Blog with admin panel<br/>[defualt.js]"]
  node_ebook["E-book website"]
  node_ecommerce["E-commerce website"]
  node_restaurant["Restaurant website"]
  node_hotel["Hotel website<br/>[custom.js]"]
  node_photography["Photography portfolio<br/>[theme.js]"]
  node_fitness["Fitness website"]
end

subgraph group_tools["Browser tools"]
  node_tools["Password and QR tools"]
  node_weather["Weather app<br/>[script.js]"]
  node_shortener["Link shortener<br/>[main.js]"]
  node_translator["Text translator<br/>[script.js]"]
  node_image_tools["Image resize and edit<br/>[script.js]"]
  node_downloader["File downloader<br/>[script.js]"]
  node_file_saver["Text file saver<br/>[script.js]"]
  node_dictionary["Dictionary app<br/>[script.js]"]
  node_audio_text["Speech conversion<br/>[script.js]"]
end

subgraph group_games["Games"]
  node_games["Board and casual games"]
  node_quiz["Timed quiz<br/>[script.js]"]
  node_dragon["Dragon game<br/>[file.js]"]
end

subgraph group_media["Media and content"]
  node_drawing["Drawing app<br/>[script.js]"]
  node_meme["Meme generator<br/>[script.js]"]
  node_piano["Playable piano<br/>[script.js]"]
  node_music["Music player<br/>[script.js]"]
  node_chat["Chat clones<br/>[whatsappclon.js]"]
  node_quote["Random quote generator<br/>[script.js]"]
end

subgraph group_apps["Productivity and dashboards"]
  node_productivity["Personal productivity"]
  node_calculator["Calculator<br/>[script.js]"]
  node_notes["Notes app<br/>[script.js]"]
  node_calendar["Dynamic calendar<br/>[script.js]"]
  node_todo["To-do list<br/>[script.js]"]
  node_clock["Alarm and clocks<br/>[script.js]"]
  node_stopwatch["Stopwatch<br/>[script.js]"]
end

node_visitor(("Project visitor"))

node_visitor -->|"opens project"| node_websites
node_visitor -->|"opens project"| node_blog
node_visitor -->|"opens project"| node_ebook
node_visitor -->|"opens project"| node_ecommerce
node_visitor -->|"opens project"| node_restaurant
node_visitor -->|"opens project"| node_hotel
node_visitor -->|"opens project"| node_photography
node_visitor -->|"opens project"| node_fitness
node_visitor -->|"opens project"| node_tools
node_visitor -->|"opens project"| node_weather
node_visitor -->|"opens project"| node_shortener
node_visitor -->|"opens project"| node_translator
node_visitor -->|"opens project"| node_image_tools
node_visitor -->|"opens project"| node_downloader
node_visitor -->|"opens project"| node_file_saver
node_visitor -->|"opens project"| node_dictionary
node_visitor -->|"opens project"| node_audio_text
node_visitor -->|"opens project"| node_drawing
node_visitor -->|"opens project"| node_meme
node_visitor -->|"opens project"| node_piano
node_visitor -->|"opens project"| node_music
node_visitor -->|"opens project"| node_chat
node_visitor -->|"opens project"| node_quote
node_visitor -->|"opens project"| node_games
node_visitor -->|"opens project"| node_quiz
node_visitor -->|"opens project"| node_dragon
node_visitor -->|"opens project"| node_productivity
node_visitor -->|"opens project"| node_calculator
node_visitor -->|"opens project"| node_notes
node_visitor -->|"opens project"| node_calendar
node_visitor -->|"opens project"| node_todo
node_visitor -->|"opens project"| node_clock
node_visitor -->|"opens project"| node_stopwatch

click node_blog "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/02.Blog-Website(With%20Admin%20Panel)/defualt.js"
click node_hotel "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/06.Hotel%20Website/luxe/js/custom.js"
click node_photography "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/07.Photography%20Portfolio%20Website/public/src/js/theme.js"
click node_fitness "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/08.Fitness%20Website/zacson-master/contact_process.php"
click node_weather "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/11.Weather%20App/script.js"
click node_shortener "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/13.Link-Shorten-Website/main.js"
click node_translator "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/19.Translator/script.js"
click node_image_tools "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/21.Image%20Resizer/Image%20Resizer%20JavaScript/script.js"
click node_downloader "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/23.File%20Downloader/File%20Downloader%20with%20JavaScript/script.js"
click node_file_saver "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/35.Text-File%20saver(all%20extention)/Save%20Text%20As%20File%20JavaScript/script.js"
click node_dictionary "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/36.Dictionary%20App/Dictionary%20App%20in%20JavaScript/script.js"
click node_audio_text "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/40.Text%20To%20Word%20Convertor/Text%20to%20Speech%20Converter/script.js"
click node_drawing "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/14.Drawing%20App/script.js"
click node_meme "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/16.Meme-Generator/script.js"
click node_piano "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/20.Playable-Piano/script.js"
click node_music "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/31.Music%20Player/Music%20Player%20in%20JavaScript/js/script.js"
click node_chat "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/45.Whatsapp%20Clone/index_files/whatsappclon.js"
click node_quote "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/47.Random%20Qoute%20Generator/Random%20Quote%20Generator%20in%20JavaScript/script.js"
click node_quiz "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/48.Online%20Quiz%20Website/Quiz%20Application%20with%20Timer/js/script.js"
click node_dragon "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/49.Dragon%20Game/js/file.js"
click node_calculator "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/32.Calculator/Calculator/script.js"
click node_notes "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/34.Note-App/Notes%20App%20in%20JavaScript/script.js"
click node_calendar "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/22.Dynamic%20Calander/Dynamic%20Calendar%20JavaScript/script.js"
click node_todo "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/41.Todo%20list%20app/Todo%20List%20App/js/script.js"
click node_clock "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/15.Alarm%20Clock/script.js"
click node_stopwatch "https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/39.Stop%20watch/Stopwatch%20Application/script.js"

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_websites,node_blog,node_ebook,node_ecommerce,node_restaurant,node_hotel,node_photography,node_fitness toneBlue
class node_tools,node_weather,node_shortener,node_translator,node_image_tools,node_downloader,node_file_saver,node_dictionary,node_audio_text toneAmber
class node_games,node_quiz,node_dragon toneMint
class node_drawing,node_meme,node_piano,node_music,node_chat,node_quote toneRose
class node_productivity,node_calculator,node_notes,node_calendar,node_todo,node_clock,node_stopwatch,node_visitor toneIndigo
```

## Components

### Websites

- **Portfolio and business sites**
- [Blog with admin panel](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/02.Blog-Website(With%20Admin%20Panel)/defualt.js): `02.Blog-Website(With Admin Panel)/defualt.js`
- **E-book website**
- **E-commerce website**
- **Restaurant website**
- [Hotel website](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/06.Hotel%20Website/luxe/js/custom.js): `06.Hotel Website/luxe/js/custom.js`
- [Photography portfolio](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/07.Photography%20Portfolio%20Website/public/src/js/theme.js): `07.Photography Portfolio Website/public/src/js/theme.js`
- [Fitness website](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/08.Fitness%20Website/zacson-master/contact_process.php): `08.Fitness Website/zacson-master/contact_process.php`

### Browser tools

- **Password and QR tools**
- [Weather app](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/11.Weather%20App/script.js): `11.Weather App/script.js`
- [Link shortener](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/13.Link-Shorten-Website/main.js): `13.Link-Shorten-Website/main.js`
- [Text translator](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/19.Translator/script.js): `19.Translator/script.js`
- [Image resize and edit](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/21.Image%20Resizer/Image%20Resizer%20JavaScript/script.js): `21.Image Resizer/Image Resizer JavaScript/script.js`
- [File downloader](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/23.File%20Downloader/File%20Downloader%20with%20JavaScript/script.js): `23.File Downloader/File Downloader with JavaScript/script.js`
- [Text file saver](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/35.Text-File%20saver(all%20extention)/Save%20Text%20As%20File%20JavaScript/script.js): `35.Text-File saver(all extention)/Save Text As File JavaScript/script.js`
- [Dictionary app](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/36.Dictionary%20App/Dictionary%20App%20in%20JavaScript/script.js): `36.Dictionary App/Dictionary App in JavaScript/script.js`
- [Speech conversion](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/40.Text%20To%20Word%20Convertor/Text%20to%20Speech%20Converter/script.js): `40.Text To Word Convertor/Text to Speech Converter/script.js`

### Games

- **Board and casual games**
- [Timed quiz](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/48.Online%20Quiz%20Website/Quiz%20Application%20with%20Timer/js/script.js): `48.Online Quiz Website/Quiz Application with Timer/js/script.js`
- [Dragon game](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/49.Dragon%20Game/js/file.js): `49.Dragon Game/js/file.js`

### Media and content

- [Drawing app](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/14.Drawing%20App/script.js): `14.Drawing App/script.js`
- [Meme generator](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/16.Meme-Generator/script.js): `16.Meme-Generator/script.js`
- [Playable piano](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/20.Playable-Piano/script.js): `20.Playable-Piano/script.js`
- [Music player](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/31.Music%20Player/Music%20Player%20in%20JavaScript/js/script.js): `31.Music Player/Music Player in JavaScript/js/script.js`
- [Chat clones](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/45.Whatsapp%20Clone/index_files/whatsappclon.js): `45.Whatsapp Clone/index_files/whatsappclon.js`
- [Random quote generator](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/47.Random%20Qoute%20Generator/Random%20Quote%20Generator%20in%20JavaScript/script.js): `47.Random Qoute Generator/Random Quote Generator in JavaScript/script.js`

### Productivity and dashboards

- **Personal productivity**
- [Calculator](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/32.Calculator/Calculator/script.js): `32.Calculator/Calculator/script.js`
- [Notes app](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/34.Note-App/Notes%20App%20in%20JavaScript/script.js): `34.Note-App/Notes App in JavaScript/script.js`
- [Dynamic calendar](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/22.Dynamic%20Calander/Dynamic%20Calendar%20JavaScript/script.js): `22.Dynamic Calander/Dynamic Calendar JavaScript/script.js`
- [To-do list](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/41.Todo%20list%20app/Todo%20List%20App/js/script.js): `41.Todo list app/Todo List App/js/script.js`
- [Alarm and clocks](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/15.Alarm%20Clock/script.js): `15.Alarm Clock/script.js`
- [Stopwatch](https://github.com/sudeepacharjee/the-50-front-end-project/blob/main/39.Stop%20watch/Stopwatch%20Application/script.js): `39.Stop watch/Stopwatch Application/script.js`

### Other components

- **Project visitor**

## Connections

- Project visitor → Portfolio and business sites: opens project
- Project visitor → Blog with admin panel: opens project
- Project visitor → E-book website: opens project
- Project visitor → E-commerce website: opens project
- Project visitor → Restaurant website: opens project
- Project visitor → Hotel website: opens project
- Project visitor → Photography portfolio: opens project
- Project visitor → Fitness website: opens project
- Project visitor → Password and QR tools: opens project
- Project visitor → Weather app: opens project
- Project visitor → Link shortener: opens project
- Project visitor → Text translator: opens project
- Project visitor → Image resize and edit: opens project
- Project visitor → File downloader: opens project
- Project visitor → Text file saver: opens project
- Project visitor → Dictionary app: opens project
- Project visitor → Speech conversion: opens project
- Project visitor → Drawing app: opens project
- Project visitor → Meme generator: opens project
- Project visitor → Playable piano: opens project
- Project visitor → Music player: opens project
- Project visitor → Chat clones: opens project
- Project visitor → Random quote generator: opens project
- Project visitor → Board and casual games: opens project
- Project visitor → Timed quiz: opens project
- Project visitor → Dragon game: opens project
- Project visitor → Personal productivity: opens project
- Project visitor → Calculator: opens project
- Project visitor → Notes app: opens project
- Project visitor → Dynamic calendar: opens project
- Project visitor → To-do list: opens project
- Project visitor → Alarm and clocks: opens project
- Project visitor → Stopwatch: opens project