The first part

README.md

@@ -1,22 +1,8 @@
-# Playground Start
-
-This is the starter code for the playground project we use in part 2 of my React course. 
-
-## Getting Started
-
-To get started, follow these steps:
-
-1. Clone this repository to your local machine.
-2. Run `npm install` to install the required dependencies.
-3. Run `npm run dev` to start the web server. 
-
-## About the Course
-
-This repository belongs to part 2 of my React course covering intermediate-level topics. 
-
-- Fetching and updating data with React Query
-- All about reducers, context, and providers
-- Managing application state with Zustand
-- Routing with React Router 
-
-You can find the course at https://codewithmosh.com
+# React Advanced Topics
+This repo is divided into three parts.
+# First part- React Query
+This repo is fully dedicated to react-query for fetching data from API from scratch to more complicated functions.
+# Second part- Global State Management
+
+## How to use
+You need only follow the commits

package.json

@@ -9,12 +9,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "4.28",
+    "@tanstack/react-query-devtools": "4.28",
     "axios": "^1.3.4",
     "bootstrap": "^5.2.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.10.0",
+    "simple-zustand-devtools": "^1.1.0",
+    "zustand": "^4.4.1"
   },
   "devDependencies": {
+    "@types/node": "^20.5.9",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",

src/App.tsx

@@ -1,7 +1,17 @@
-import './App.css';
+import "./App.css";
+import { TasksProvider } from "./state-management/tasks";
+import HomePage from "./state-management/HomePage";
+import NavBar from "./state-management/NavBar";
+import Counter from "./state-management/counter/Counter";
 
 function App() {
-  return <h1>React Starter Project</h1>;
+  return (
+    <TasksProvider>
+      <Counter />
+      <NavBar />
+      <HomePage />
+    </TasksProvider>
+  );
 }
 
 export default App;