# verekia/js-stack-from-scratch **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/verekia-js-stack-from-scratch).** 20,179 stars · 1,962 forks · JavaScript · MIT ## Links - GitHub: https://github.com/verekia/js-stack-from-scratch - awesome-repositories: https://awesome-repositories.com/repository/verekia-js-stack-from-scratch.md ## Description This project is a JavaScript full-stack tutorial providing a step-by-step guide to building a complete web application from scratch. It focuses on the manual implementation of a custom JavaScript toolchain, encompassing the development of a server-side rendering workflow and a client-side state manager. The project distinguishes itself by implementing core development utilities without high-level frameworks, including custom solutions for bundling, transpilation, linting, and hot module replacement. It also features a real-time communication system based on WebSockets for bidirectional messaging and group broadcasting. The broader capability surface covers the assembly of a modern frontend toolchain, centralized immutable state management, and the creation of automated CI/CD deployment pipelines to move code from version control to a platform-as-a-service provider. It further includes support for server-side style rendering, HTTP response compression, and the integration of unit tests with coverage tracking. ## Tags ### Web Development - [Full-Stack Development](https://awesome-repositories.com/f/web-development/full-stack-development.md) — Provides a comprehensive guide to assembling a full-stack JavaScript development stack from scratch. ([source](https://github.com/verekia/js-stack-from-scratch#readme)) - [Centralized State Management](https://awesome-repositories.com/f/web-development/hydration-state-management/browser-side-state-management/centralized-state-management.md) — Creates a centralized source of truth for application data to ensure predictable UI updates. - [Real-Time Communication](https://awesome-repositories.com/f/web-development/real-time-communication.md) — Establishes bidirectional real-time communication between client and server using WebSockets. - [Server-Side Rendering](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering.md) — Generates initial HTML and CSS on the server to improve SEO and initial page load speed. - [WebSocket Communication](https://awesome-repositories.com/f/web-development/websocket-communication.md) — Implements WebSocket-based communication for real-time message exchange and broadcasting. - [Client-side Routing](https://awesome-repositories.com/f/web-development/client-side-routing.md) — Provides client-side routing to update page content dynamically without full browser reloads. - [Client-Side Navigation Components](https://awesome-repositories.com/f/web-development/routing-systems/routing/frontend-navigation-systems/client-side-navigation-components.md) — Manages internal application navigation and history without triggering full page reloads. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/06-react-router-ssr-helmet.md)) - [WebSocket State Synchronization](https://awesome-repositories.com/f/web-development/state-syncing-reactivity/websocket-state-synchronization.md) — Integrates real-time WebSocket message listeners with the state manager to trigger UI updates from server events. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/07-socket-io.md)) ### Education & Learning Resources - [JavaScript Tutorials](https://awesome-repositories.com/f/education-learning-resources/javascript-tutorials.md) — Offers a detailed educational guide to building a full-stack JavaScript application from scratch. ### Networking & Communication - [Real-Time Web Communication](https://awesome-repositories.com/f/networking-communication/real-time-web-communication.md) — Establishes bidirectional WebSocket connections for instant client-server messaging and data synchronization. - [Room-Based Message Routing](https://awesome-repositories.com/f/networking-communication/communication-platforms-services/messaging-notification-systems/messaging-architectures/room-based-message-routing.md) — Organizes connected users into rooms to broadcast targeted messages to specific subsets of clients. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/07-socket-io.md)) ### Programming Languages & Runtimes - [Educational Toolchains](https://awesome-repositories.com/f/programming-languages-runtimes/compiler-toolchain-development/minimalist-toolchains/educational-toolchains.md) — Provides step-by-step instructions for creating a custom development environment without high-level frameworks. - [JavaScript Transpilers](https://awesome-repositories.com/f/programming-languages-runtimes/javascript-transpilers.md) — Implements a custom transpilation step to ensure modern JavaScript syntax works across different browsers. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/02-babel-es6-eslint-flow-jest-husky.md)) ### Software Engineering & Architecture - [Asynchronous Action Handlers](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/state-logic-and-utilities/asynchronous-action-handlers.md) — Provides handlers to manage asynchronous logic like API calls before updating the global application state. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/05-redux-immutable-fetch.md)) - [Immutable Data Patterns](https://awesome-repositories.com/f/software-engineering-architecture/immutable-data-patterns.md) — Employs immutable state patterns to ensure predictable data updates by returning new objects instead of mutating state. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/05-redux-immutable-fetch.md)) - [Centralized State Stores](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/centralized-state-stores.md) — Implements a centralized state store as a single source of truth for application data. - [Immutable State Patterns](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/immutable-data-strategies/immutable-state-patterns.md) — Uses immutable state patterns to ensure predictable data updates through new object creation. - [Server-Side Rendering Style Registries](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/framework-specific-integrations/server-side-rendering-style-registries.md) — Generates CSS on the server for the initial page load to prevent style flashing. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/08-bootstrap-jss.md)) - [Static Type Checkers](https://awesome-repositories.com/f/software-engineering-architecture/static-type-checkers.md) — Includes tools for verifying type safety in the JavaScript codebase through static analysis. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/02-babel-es6-eslint-flow-jest-husky.md)) ### Testing & Quality Assurance - [Custom Toolchain Implementations](https://awesome-repositories.com/f/testing-quality-assurance/code-quality-review/code-quality-tools/formatting-and-linting-pipelines/javascript-and-typescript-toolchains/custom-toolchain-implementations.md) — Features manual implementations of bundling, transpilation, and hot module replacement. - [Frontend Build Toolchains](https://awesome-repositories.com/f/testing-quality-assurance/code-quality-review/code-quality-tools/formatting-and-linting-pipelines/javascript-and-typescript-toolchains/frontend-build-toolchains.md) — Implements a custom toolchain including manual bundling, transpilation, and hot module replacement. - [Unit Testing](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/testing-frameworks/unit/unit-testing.md) — Executes a suite of unit tests to verify application behavior and identify untested code sections. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/02-babel-es6-eslint-flow-jest-husky.md)) ### User Interface & Experience - [Reactive State Syncing](https://awesome-repositories.com/f/user-interface-experience/state-driven-ui-controllers/reactive-state-syncing.md) — Connects the centralized data store to UI components for automatic updates when state changes. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/05-redux-immutable-fetch.md)) - [Component-Driven Architectures](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/component-driven-architectures.md) — Builds user interfaces by composing independent and reusable visual components. - [User Interface Frameworks](https://awesome-repositories.com/f/user-interface-experience/user-interface-frameworks.md) — Implements a component-based architecture for building interactive user interfaces using JavaScript-centric syntax. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/04-webpack-react-hmr.md)) - [CSS-in-JS Implementations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/css-in-js-implementations.md) — Implements CSS-in-JS to define visual styles within JavaScript, enabling dynamic style composition. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/08-bootstrap-jss.md)) ### Part of an Awesome List - [Code Formatting and Linting](https://awesome-repositories.com/f/awesome-lists/devtools/code-formatting-and-linting.md) — Implements custom linting to analyze source code for style consistency and browser API compatibility. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/02-babel-es6-eslint-flow-jest-husky.md)) - [GUI Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/gui-frameworks.md) — Comprehensive starter kit for modern web stacks. ### Development Tools & Productivity - [Module Bundlers](https://awesome-repositories.com/f/development-tools-productivity/module-bundlers.md) — Implements a custom bundler to combine multiple source files into a single executable file. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/04-webpack-react-hmr.md)) - [Hot Module Replacement](https://awesome-repositories.com/f/development-tools-productivity/platforms-runtimes-language-services/hot-module-replacement.md) — Implements hot module replacement to update active code modules instantly during development. ### DevOps & Infrastructure - [Automated Deployment Pipelines](https://awesome-repositories.com/f/devops-infrastructure/automated-deployment-pipelines.md) — Sets up automated CI/CD workflows to deploy code from version control to a cloud provider. - [CI CD Pipelines](https://awesome-repositories.com/f/devops-infrastructure/ci-cd-pipelines.md) — Automates the testing and deployment of the application through a version control workflow. - [Cloud Deployment](https://awesome-repositories.com/f/devops-infrastructure/cloud-deployment.md) — Provides automated build scripts and configurations to publish the application to a cloud PaaS provider. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/09-travis-coveralls-heroku.md)) - [Continuous Integration](https://awesome-repositories.com/f/devops-infrastructure/continuous-integration.md) — Automates the execution of test and build scripts upon code push to maintain stability. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/09-travis-coveralls-heroku.md)) - [Deployment Pipelines](https://awesome-repositories.com/f/devops-infrastructure/deployment-pipelines.md) — Implements deployment pipelines that use pull requests to promote code through staging and production environments. ([source](https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/09-travis-coveralls-heroku.md))