Intro

Overview

This is an introduction to a course based on the existing React project, which aims to provide a clear architecture for building production-ready React applications.

This lesson introduces the technology stack, key design patterns, and tools used throughout the course, setting the stage for a deep dive into modern web development practices.

Start

Welcome, future React developers! This is the first lesson in the Course that dives into React and modern web development. Our goal is clear — to equip you with a powerful architecture that reflects real-world React applications.

This course is based on an open GitHub repository named Bulletproof React that introduces a simple, scalable, and robust architecture for building production-ready React applications.

React is great for front-end apps, providing flexibility to build as needed. However, lacking a clear architecture can lead to messy, complex code. React has a rich ecosystem with diverse libraries, though choosing can be overwhelming. The repo demonstrates building React apps with popular tools in a scalable structure. This effective architecture supports developers in creating better apps by tackling real-world issues practically.

What to Expect

This course will guide you through the Bulletproof React project, demonstrating how to solve real-world problems in a practical manner. By the end of this course, you impliment a lot of new features, have a deep understanding of the project’s architecture and be equipped with the skills to build robust React applications.

Join Our Community for Support and Collaboration!

At the Code Your Path community, we aim to provide a supportive and inclusive learning environment for everyone. We believe that collaboration and knowledge sharing are key ingredients to becoming a great developer. That’s why we encourage all members to actively participate in discussions, ask questions, and help each other out.

Our Slack

Join our Slack channel to stay updated and get support from your peers as you go through the course. This is a great opportunity to connect with others who are also learning React, whether you’re new to it or already experienced.

Our community is friendly and supportive, so don’t be shy – ask for help whenever needed!

Our Telegram (In progress…)

We also have a Telegram group for students. This is another platform where you can connect with fellow learners and get support from our mentors and other students. It’s always helpful to have multiple channels of communication to reach out to when you need help or want to share your progress.

Lesson Workflow

1. Read Lesson: Before starting any work, thoroughly read through the lesson material to understand the concepts and requirements.
2. Branch Creation: Create a new branch for each lesson to isolate your work and make it easier to track changes.
3. Follow Instructions: Follow the instructions provided in the lesson to implement the required features. Pay close attention to details and requirements.
4. Testing: Test every step of your implementation. Check the application after each change to ensure everything is working as expected.
5. Completion and Commit: Once you have completed all instructions and fulfilled all requirements, create a commit with your changes. Push the commit to your GitHub repository and create a Pull Request (PR).
6. PR Submission: Submit the PR as a homework task. This will allow your work to be reviewed by others and provide an opportunity for feedback.
7. Feedback and Updates: Once you receive feedback on your PR, review the comments and make any necessary updates to your code. Update the PR with the changes or merge it into the main branch if no further changes are needed.
8. Deployment: After your PR has been merged to the main branch, wait for the deployment to happen. Ensure that everything works as expected in the deployed application.

Why Bulletproof React?

We will be using Bulletproof React as our foundation. Bulletproof React is not just another React project; it’s a carefully crafted architecture that aims to simplify the complexities of building scalable and production-ready React applications.

Having worked extensively with various React codebases, I’ve found that Bulletproof React offers the most effective approach. It combines the best tools from the React ecosystem with a well-thought-out project structure that scales effortlessly. And it has 22 thousands start on GitHub.

Learning by Doing

Learning to code is like learning a new language—the more you practice, the better you get. This course takes a hands-on approach, where you’ll be continuously adding new features to an existing project.

Imagine you’re learning how to build a house. You could read books and watch videos about it, but nothing beats actually stepping onto a construction site and seeing a house being built from start to finish. That’s the idea behind our React course.

Instead of starting from scratch with simple, isolated examples, we’re diving into a real-world project—a house already under construction. This way, you get to see how different tools and design patterns are used together, just like different parts of a house fit together to create a home.

By working with existing projects, you’ll encounter a lot of new code, which might seem overwhelming at first. But think of it as exploring a new neighborhood. The more you walk around, the more familiar it becomes.

You’ll see that React doesn’t exist in a vacuum—it’s part of a larger ecosystem that includes many other technologies.

Consider that in real-world development:

• You are more likely to work within or contribute to an existing codebase.
• You’ll need to understand code within a context.
• And to think in terms of broader architecture.

Learning to code can be like learning a new language; you can memorize all the vocabulary and grammar rules in the world, but the learning doesn’t truly take place until you start speaking and, crucially, listening. In programming, the parallels are clear. While building applications from scratch is an important exercise, it may not translate well to the professional world.

At its core, the course presents an optimal blueprint for constructing web applications using one of the the best tools available.

The Core Stack

• React: Our primary framework, offering a flexible and modular approach.
• Node: Serving as the backend, Node provides the server environment while also allowing you to run scripts and process server-side logic.
• npm: The indispensable package manager for Node, allowing you to install, share, and distribute code quickly.
• TypeScript: Layered atop JavaScript, TypeScript brings static typing and increased confidence when refactoring code.
• ESLint and Prettier: These tools are guardians of your code’s style and consistency.

Styling

• Tailwind CSS: A utility-first CSS framework that aids in rapid UI development.
• Headless UI: A toolkit for building accessible composable and unstyled user interface components.
• Storybook: Offers a sandbox for UI component development and testing, independent of the main application’s business logic.

Data Handling and State Management

• Axios: A robust Promise based HTTP client for the browser and Node.js.
• React-Query: A potent toolkit for managing, caching, synchronizing, and handling data.
• Zustand: A minimalistic state-management library that focuses on simplicity and structure.

Handling User Input

• React-Hook-Form: Performant, flexible, and uncontrolled form state management with 0.9kb hooks.
• Zod: A TypeScript-first object schema validation for JSON objects.

Testing Arsenal

• Jest: A delightful JavaScript testing framework with a focus on simplicity.
• React-Testing-Library: Guides you toward best testing practices, making it easier to test React components.
• Cypress: Front-end testing, but different—it runs in the browser like your actual users.
• MSW (Mock Service Worker): Replacing HTTP requests with mocks, also maintains end-to-end tests.

Deployment

• Netlify: An all-in-one platform for automating modern web project workflows.

Throughout the course, you’ll engage with several crucial design patterns and tools that gate the way to modern web development:

• Rest: Hooks: A fundamental concept in React, Hooks offer a more direct API to the React concepts you already know.
• Mocked APIs: A strategy for simulating backend responses, crucial for maintaining development speed and quality.
• Static and Dynamic Routing: Organizing navigation within your app efficiently, whether to predetermined locations or at the user’s discretion.
• localStorage: A way to store key-value pairs in a web browser with no expiration date.
• Global State Management: For sharing state between different components.
• Optimistic Updates: Updating the UI optimistically before the changes are confirmed by the network.
• Caching: A common strategy to optimize network requests by storing results locally.
• Error Boundaries: A React component that catches JavaScript errors anywhere in its child component tree and logs those errors.
• Role and Permission-based Access Controls: Crucial implementations for fine-grained security for your applications.
• Code Splitting: Technique used to split your code into various bundles which can then be loaded on demand or in parallel.
• Organizing Code: How to structure and group your code to make it more manageable and maintainable.

• 0 Intro
• 1 Documentations
• 2 Dependencies
• 3 Clonning repo
• 4 Running app locally
• 5 First UI updates
• 6 App deployment

• 0 Add Task type
• 1 New /tasks route:
• 2 Create TasksList component and useTasks query
• 3 Create CreateTask component and useCraeteTask mutation
• 4 Optimistic updates for useCreateTask mutation
• 5 Add useUpdateTask mutation and Status toggle
• 6 Add DeleteTask component and useDeleteTask mutation
• 7 Create Task view page route, component and useTask query
• 8 Add UpdateTask component