React Projects Repository

This repository contains all my projects while learning React through the Udemy course React - The Complete Guide 2024 (incl. Next.js, Redux).

Overview

Each folder represents a different project corresponding to specific sections of the course. Below is a list of the projects:

01-starting-project-basics: Introduction to React basics.
02-starting-project-tic-tac-toe: Building a simple Tic-Tac-Toe game.
03-starting-project-investment-calculator: Developing an investment calculator.
04-starting-project-styling-components: Exploring different ways to style React components.
05-starting-project-debugging: Learning debugging techniques in React.
06-starting-project-refs-and-portals: Using Refs and Portals for DOM manipulation.
07-starting-project-project-management-app: Creating a basic project management app.
08-starting-project-advanced-state-management: Managing complex state with advanced React techniques.
09-starting-project-handling-side-effects: Handling side effects and async operations in React.
10-starting-project-quiz-app: Building a quiz app with React.
11-starting-project-optimization-techniques: Implementing optimization techniques in React apps.
12-starting-project-http-requests: Handling HTTP requests in React.
13-starting-project-custom-hooks: Creating custom hooks in React.
14-starting-project-forms-and-user-input: Managing forms and user input in React.
15-starting-project-food-ordering-app: Developing a food ordering app with React.
16-starting-project-redux: Learning Redux state management.
17-starting-project-advanced-redux: Implementing advanced Redux patterns and techniques.
18-starting-project-react-router: Exploring React Router for navigation.
19-starting-project-advanced-react-router: Implementing advanced React Router patters and techniques.
20-starting-project-authentication: Implementing authentication in React apps.
21-starting-project-deployment: Learning how to deploy React applications.
22-starting-project-tanstack-query: Learning how to use tanstack query with React applications.
23-starting-project-animating-react: Learning how to animate React applications.
24-starting-project-framer-motion-playground: Playground for learning the basics of Framer Motion before using them in the 23-starting-project-animating-react.
25-starting-project-react-best-practices: Learning React patterns and best practices.
26-starting-project-replace-redux: Replaxing Redux with React hooks.
27-starting-project-unit-tests: Learning how to write and execute unit tests for React
28-starting-project-typescript-basics: Learning the TypeScript basics in a non React project.
28-starting-project-react-typescript: Learning how to use TypeScript in React apps.

How to Run

Each project can be run individually using the following steps:

1. Navigate to the project directory.
2. Run npm install to install dependencies.
3. If the project has a backend, navigate to the backend folder (if applicable), run npm install, and then start the server with node app.js. Make sure you have Node.js installed.
4. Use npm run dev to launch the development server for the frontend.

Ensure that both the frontend and backend are running for projects that require it.

Course Details

Instructor: Maximilian Schwarzmüller
Platform: Udemy
Course Link

Happy coding!