This workspace contains a set of small React projects built with Vite. Each folder is an independent app with its own package.json, source code, and README.
A simple background color changer. It renders a full-screen canvas and lets you switch the page background with preset color buttons.
An example of React Context for user state. It includes a login form, a shared user provider, and a profile area that reacts to the current user.
A basic counter demo. It shows increment and decrement actions with simple bounds on the value.
A customizable password generator. You can control password length, include numbers or special characters, and copy the result to the clipboard.
A React Router example with nested routes, a shared layout, and pages such as Home, About, User, and GitHub.
A theme toggle demo using React Context. It switches the app between light and dark mode and updates the UI based on shared theme state.
Most projects use:
- React 19
- Vite 7
- JavaScript modules
- ESLint for linting
Some projects also use:
- Tailwind CSS 4
- React Router DOM
Each project can be run independently from its own folder.
-
Open the project folder you want to explore.
-
Install dependencies:
npm install
-
Start the dev server:
npm run dev
-
Build for production if needed:
npm run build
-
Preview the production build:
npm run preview
- The projects are intentionally small and focused on learning specific React patterns.
- Each folder is self-contained, so dependencies are not shared across apps.
- The individual project READMEs can contain more specific usage details if needed.