React with Projects (HackSeries 02)

This workspace contains a step-by-step React learning series with 12 project modules, from basics to Redux.

Project Modules (01 to 12)

1. 01 React Basics
   • 01basicreact (Create React App)
   • 01vitereact (Vite)
2. 02 Counter - state updates and event handling
3. 03 Tailwind + Props - component props with Tailwind CSS
4. 04 Background Changer - dynamic UI styling
5. 05 Password Generator - controlled inputs and logic composition
6. 06 Currency Converter - hooks and API-style data flow
7. 07 React Router - routes, layouts, and navigation
8. 08 Mini Context - Context API basics
9. 09 Theme Switcher - theme state with context
10. 10 Todo Context + LocalStorage - persistent todos
11. 11 useEffect - side effects and lifecycle behavior
12. 12 Redux - centralized state management

Specific Project Highlights

1. 01 React Basics (01basicreact, 01vitereact)
   • Build: first React UI using the Hackseries component.
   • Learn: JSX, component import/export, and CRA vs Vite setup differences.
2. 02 Counter (02counter)
   • Build: simple counter with add/remove actions.
   • Learn: useState, functional updates (prev => prev + 1), and re-render flow.
3. 03 Tailwind + Props (03tailwindprops)
   • Build: reusable Card components with different props.
   • Learn: prop passing, default props, and Tailwind utility styling.
4. 04 Background Changer (04bgChanger)
   • Build: full-screen background color switcher with color buttons.
   • Learn: state-driven inline style changes and event handlers.
5. 05 Password Generator (05passwordGenerator)
   • Build: password generator with length slider, number/symbol toggles, and copy button.
   • Learn: useCallback, useEffect, useRef, and controlled form inputs.
6. 06 Currency Converter (06currencyConvertor)
   • Build: currency conversion form with swap feature and conversion output.
   • Learn: custom hooks (useCurrencyInfo), API fetch flow, and derived UI state.
7. 07 React Router (07reactRouter)
   • Build: multi-page app with shared layout, nav, and dynamic routes.
   • Learn: nested routing, route params (user/:userid), and loader-based data fetching.
8. 08 Mini Context (08miniContext)
   • Build: login/profile pattern with shared user data.
   • Learn: Context API, provider pattern, and cross-component state sharing.
9. 09 Theme Switcher (09themeswitcher)
   • Build: light/dark theme toggle with a custom theme context.
   • Learn: context values, global theme state, and class toggling on the root HTML element.
10. 10 Todo Context + LocalStorage (10todocontextLocal)
    • Build: todo app with add, edit, delete, and complete actions.
    • Learn: context-based state actions and persistent storage with localStorage.
11. 11 useEffect (11UseEffect)
    • Build: joke fetcher that loads on mount and gets new jokes on demand.
    • Learn: useEffect dependency behavior and side effects with async API calls.
12. 12 Redux (12Redux)
    • Build: Redux todo app with add, delete, and mark-as-done actions.
    • Learn: Redux Toolkit slice setup, global store wiring, Provider, useSelector, and useDispatch.

Material UI Integration (Simple)

Material UI mini project location:

• MaterialUI/Mini-Project-React

Install and run:

cd MaterialUI/Mini-Project-React
npm install
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material
npm run dev

Basic usage example:

import Button from "@mui/material/Button";

function App() {
	return <Button variant="contained">Hello MUI</Button>;
}

export default App;

Suggested next components for this mini project:

• TextField for forms
• Card + CardContent for content blocks
• AppBar + Toolbar for header navigation
• Grid or Stack for responsive layout

Run Any Project

cd <project-folder>
npm install
npm run dev

For older CRA-based projects, use npm start if npm run dev is not available.