This course uses an established Bulletproof React code base as the foundation for lessons to provide students with a hands-on, real-world learning experience.
Real-life software projects rarely start from scratch. Developers typically join existing projects, understand their structure and requirements, and contribute meaningfully. Therefore, this course focuses on learning the React ecosystem through an open-source codebase.
Explore React’s ecosystem following popular practices for project structure, API integration, and state management. Follow the course lessons, complete quizzes, submit homework tasks, get your homework tasks checked, and keep going.
This lesson provides an overview of the project documentation for . You'll explore the project documentation and make a list of project's technologies that you are familiar with and those that are new to you.
This lesson guides you through setting up a new GitHub repository for your project and configuring it to work with the project. You will learn how to create a repository, clone an existing project, rename remote repositories, and push your code to GitHub.
You'll learn how to run this application. We'll set environmental variables, install dependencies, and start the application.
Additionally, we'll perform some smoke tests for onboarding purposes. Smoke testing involves creating several users, adding comments and discussions.
Lastly, we'll explore how to observe data used in the application using the browser localStorage.
In this lesson, you'll rebrand the project from Bulletproof React by updating the project's logo, favicon, and routing. You'll update the Landing page to be served on the "/landing" route and update the "Get Started" button to redirect to the correct route.
In this lesson, we'll cover deploying a React application to Netlify. Deployment is the final step in making the application available to users on the web. Netlify offers a straightforward deployment process, making it ideal for those new to deployment procedures. Let's get started with deploying your React app to Netlify!
In this lesson, we start implementing a Tasks Management System.
This system will allow users to create new Tasks, view a list of their Tasks, and observe a single task on a separate page. A user can update any Task and change Task status on a list view.
In this lesson, we will add the TasksList component to the Tasks page in our project. The TasksList component renders a table with the user's Tasks.
We implement the API logic using React Query to fetch user's tasks from the server.
On the backend, you'll add a new schema for Tasks in our mock database and implement the API endpoint to fetch Tasks for a specific user.
Finally, we update the TasksList
component to display the list of tasks in a table format with columns for title and creation date.
In this lesson, we tackled the issue of a two-second delay between submitting a new Task in the New Task form and its appearance in the TasksList component. To address this, we implemented optimistic updates using React-Query's onMutate event.
In this lesson, we are adding a toggle to the task list table that allows users to switch task statuses between "Done" and "In progress."
This involves implementing the UI using the Switch component, creating a React-Query mutation for updating task statuses, adding a Mocked API handler, and using optimistic updates to improve the user experience.
In this lesson, you'll learn how to implement a Delete Task button with double confirmation in a React application. The button is present on each task row in a table and triggers a modal asking the user to confirm the deletion.
The lesson covers using React-Query for data management, implementing an optimistic update strategy for a smoother user experience, and handling HTTP requests to delete tasks.
In this lesson, we implement the Task page to view individual Tasks.
We add a new route for the Task page and a link in the TasksList component to navigate it.
The Task page displays the Task title, body preview with Markdown formatting, and the creation date.
We also create a custom useTask query and a mock API handler to fetch Task details using the Task ID.
Finally, we updated the Task page UI to include all the necessary elements and styles.
We create an Update Task component that displays a button. When clicked, it opens a drawer containing an Update Task form to update the Task's title, body, and status.
To handle the controlled Switch component from the headlessui/react library, we used the Controller component provided by react-hook-form library.
Finally, we implement optimistic updates for the task's status, ensuring that the UI updates immediately and reverts changes if an error occurs during the update process.