Start Date : October 29, 2025

Tech Stack :

• Frontend - React.js + Vite
• Backend - Express.js

React.js

• Vite (For faster)
• Axios (For api calling instead of fetch)
• websockets install
• TypeScript (Optional for bug detection and strict)
• bycrypt (Optional for hashing, converting hash etc.)
• etc.

Express.js

• bycrypt (Optional For hashing passwords, keys etc.)
• websockets install

FullStack Plans, Infrastructure, Requirements, Helpers! etc.

• Personal Use
• Steps & Plan in building effective fullstack project!
• Making clean fullstack project, managing folders, codes, strategies, designs
• Reusable codes
• Websockets to stay in sync
• Flexible and adaptive database based on env. (docker or localhost) should work.
• Security

Docker Set-up

• Docker files and Docker-compose comese from https://github.com/EricJamesSonio/Guitar-store
• docker
• Maintain flexibility between local and Docker environments
• Keep local .env for development (XAMPP)
• Use .env.docker for containerized deployment
• Avoid code duplication and redundant configurations
• Support full-stack Docker orchestration (client, server, database)
• Ensure portability and consistency across environments

SOME DETAILS:

• Client : [Architecture]

• Modulized files, folders
• SRP, DRY etc.
• Sync Connection between client and server
• WebSockets, Context provider
• Customizable design
• Flexible design
• Clean structures

• Server: [Architecture]

• Modulized files, folders
• SRP, DRY, OOP, Algorithms
• Sync Connection using sockets
• Testable Codes
• Reusable services
• Database seeds, creation, configs
• Error handling

[FullStack] - Root Folder

• [Client] - This is the Frontend Side! read The README.MD of that folder!
• [Server] - This is the Backend Side! read The README.MD of that folder!