Programming · Intermediate
Build and ship a production-grade React application from scratch
One large project, developed lesson by lesson: configuration, UI kit, architecture, tests, optimisation, CI/CD and deployment to a real server.
- 45+ hours of video lessons
- One large real-world project
- Unit, screenshot and e2e tests
- Community chat for questions
- 14-day refund policy
Why tutorials stop helping at some point
Most React tutorials end where real work begins. You can build a to-do list or a small shop, yet a job posting asks about project architecture, bundle size, testing strategy, continuous integration and deployment. Those topics are rarely taught together, so they stay a collection of unfamiliar words on a job description.
This programme closes that gap in a practical way. Instead of isolated lessons, you follow the development of a single large application from an empty folder to a live deployment. Every decision is made on screen: why a folder is structured this way, why a module may not import from another layer, why a test is written before a refactor.
The result is not only knowledge but an artefact. You finish with a complex project and a long history of commits that you can open at any time to see how a particular problem was solved. For a job seeker that is a strong portfolio piece. For a working developer it is a reference implementation of practices that are usually scattered across several teams.
What you will be able to do
- Configure a project from scratch with Webpack
Set up React, TypeScript, Babel, SCSS and CSS modules, and split the configuration into clean, reusable parts.
- Design a modular frontend architecture
Apply decomposition, low coupling and high cohesion to real business entities.
- Build a library of more than 20 accessible UI components
Modals with portals, dropdowns, drawers, skeletons, popups and lazy images.
- Cover the code with three kinds of tests
Write unit tests with Jest, component tests with React Testing Library, screenshot tests and Cypress end-to-end tests.
- Reduce bundle size and fix slow rendering
Use bundle analysers, code splitting, async reducers, virtualised lists, throttling and debouncing.
- Automate quality checks
Run linters, tests and builds in a CI pipeline and pre-commit hooks, and publish test reports.
- Write your own tooling
Create custom ESLint rules, Babel plugins and code generators that remove repetitive work.
- Deploy to a cloud server
Configure nginx, HTTPS, a domain name, compression and a deployment script.
- 45+
- hours of video lessons
- 20+
- UI components built
- 3
- colour themes and 2 interface languages
- 4 months
- suggested pace
A course about frontend, not only about React
React is one of the tools in this programme, not its subject. The material covers the wider craft of frontend development: build systems, project structure, testing, performance, tooling and delivery. If you work with Vue, Svelte or Angular, most of the concepts transfer directly, although some parts are specific to React.
You will also see how problems are really solved. Along the way you read documentation, search for answers, debug with browser and framework developer tools, and fix mistakes live. That process is as valuable as the final code, because it is what working on a real team looks like.
The project grows over time. You start with configuration and basic pages, then add data fetching, themes, translations, a component library, tests and optimisation, and finally migrate to React 18 and carry out a complete redesign without breaking the existing interface.
How the course works
The lessons are recorded video, edited to be compact and voiced over after recording, so you do not sit through long pauses while code compiles. The programme contains more than 45 hours of material, and the lessons follow the order in which the project is built, so each one rests on the previous one.
There is no fixed schedule. The programme is designed for about four months, with roughly 8 to 10 hours a week, but you can go faster or slower depending on your experience. The material is demanding, and it is better to type the code yourself and stop to understand each step than to rush through.
Questions are handled in two places: a community chat divided by topic, such as technical questions and job-interview preparation, and a discussion area under each video where you can leave comments and read those of other learners.
The programme
The lessons follow one continuous project. Topics are grouped below by stage of development.
1Part 1 — Project foundation and configurationBuild the project infrastructure by hand so that nothing is a black box.4 lessons
- Setting up Webpack from scratch with a decomposed config
- Connecting React, TypeScript and Babel
- Styles with SCSS and CSS modules
- Setting up Prettier, build-time global variables and browser targets
2Part 2 — Routing, data and stateAdd pages, access rules and server communication with Redux Toolkit.5 lessons
- Routing with React Router v6 and page-level chunks
- Protected routes by authorisation and role
- Async thunks with an injected axios instance
- Working with RTK Query and injecting endpoints
- Data normalisation with EntityAdapter
3Part 3 — UI kit, themes and internationalisationCreate the visual foundation of the application.5 lessons
- Building 20+ accessible components, including modals with portals
- Trying headless component libraries next to custom solutions
- Three colour themes and a style structure that makes a new theme a five-minute task
- Adding Russian and English with chunked translations
- Plural forms and extracting translation keys with a Babel plugin
4Part 4 — Architecture and real-world featuresOrganise the code for growth and implement typical product tasks.5 lessons
- Modules, layers and business entities
- Filters, search and sorting
- Infinite lists and virtualisation
- Comments and multi-block pages
- Error handling with an ErrorBoundary
5Part 5 — Testing and StorybookBuild a safety net around every module.5 lessons
- Unit tests for selectors, reducers and async thunks
- Component tests with React Testing Library
- Storybook with a story for each component state
- Screenshot regression tests
- Cypress end-to-end tests with fixtures, mocks and interceptors
6Part 6 — Performance and bundle optimisationFind what makes the application heavy and fix it.5 lessons
- Reading bundle analyser reports
- Async components and async Redux reducers
- A reducer manager as a small library
- Throttle, debounce and lazy loading of animation and drag-and-drop libraries
- Mobile and desktop components by user agent, and detecting circular dependencies
7Part 7 — Tooling, automation and CI/CDMake the codebase maintain its own quality.6 lessons
- ESLint and stylelint configuration
- A custom ESLint plugin with three rules and autofix
- Code generation scripts for features and entities
- AST parsing and automated refactoring scripts
- CI pipeline with tests, builds and linters, plus husky pre-commit hooks
- Test reports published to the CI pages
8Part 8 — Delivery, redesign and refactoringRelease the application and then change it safely.6 lessons
- Renting a cloud server, nginx, HTTPS and a domain
- Gzip compression, request proxying and a deployment script
- Git flow versus trunk-based development, feature flags and user settings
- Migrating from React 17 to React 18
- A full redesign with nested layouts and two designs sharing one business logic
- A script that removes old code, then a final refactoring review
What you get
- More than 45 hours of recorded video lessons
Compact, edited lessons that follow the development of one project.
- A finished production-style project
A complex codebase with a detailed commit history you can revisit.
- Access to all course materials
Open the lessons any time and at any pace.
- A community chat with other learners
Topics include technical questions, job search and interview questions.
- Comments under every video
Ask questions and read discussions from other learners.
- Long-term access
The page states access of at least two to three years, likely longer.
- Optional recorded streams
A higher tariff adds around 25 hours of recorded Q&A and material review sessions.
Is this course for you?
This course is for you if…
- You are looking for a frontend job and want a strong portfolio project and modern technologies on your CV
- You are a junior or middle developer who wants to move to a higher professional level
- You understand React fundamentals and the basic idea of Redux, and have practised them
- You know a little TypeScript, or are ready to learn it as you go
- You work with another framework and want to learn architecture, testing and tooling practices
Probably not a fit if…
- You have only just started with React and do not yet understand Redux at a basic level
- You want a short, light overview rather than a demanding, long programme
- You are looking for one-to-one mentoring or live classes with a fixed timetable
- You expect a React-only course; the programme covers wider frontend topics
After the course
When you finish, you have a large application that you built yourself, with configuration, a component library, three layers of tests, a CI pipeline and a live deployment. You can open it in an interview and explain each decision: why the structure looks like this, how the bundle was reduced and how regressions are caught.
You will also understand the vocabulary of professional frontend teams: layers, feature flags, code splitting, screenshot testing, trunk-based development. These are no longer abstract terms, because you have used each one in code.
The project stays available as a reference. When you meet a similar problem at work, you can return to the matching lesson and the matching commit, and see how it was solved step by step.
Questions before you buy
How much time do I need each week?
The programme is designed for about four months at roughly 8 to 10 hours a week, depending on your current skills. There is no time limit, so you can move faster or slower.
What do I need to know first?
You should understand React at the level of a thorough introductory course and have practised it, and know the basic idea of Redux. A minimal understanding of TypeScript helps. If you are brand new to React, start with a foundational course first.
How does access work after payment?
After payment you receive access to the course materials and the community chat. Make sure to enter the correct email address when ordering, because access is linked to it.
Is there a refund policy?
Yes. You can request a refund within 14 days of purchase.
What format are the lessons in?
They are recorded video lessons, edited and voiced over, that follow the building of one project. You write the code alongside each lesson.
Will the material stay available?
Yes. The lessons remain available for a long period; access is expected to last at least two to three years, so you can return to any topic and to the finished project.
Can I take it at my own pace?
Yes. You can go through the lessons as quickly or as slowly as you like. Keep in mind that the material is complex and needs careful practice.
I use Vue, Svelte or Angular. Is it still useful?
Yes. The course is about frontend development in general: tooling, architecture, testing, optimisation and deployment. Only some parts are specific to React.
Where can I ask questions?
In the community chat, which is split into topics, and in the comments under each video on the learning platform.
Build a project you can show to employers
Start the programme today and work through it at your own pace.