https://github.com/sahimbehlim/react-mini-projects
This repository contains a collection of mini projects created with React, Vite (as the bundler), and Tailwind CSS for styling
https://github.com/sahimbehlim/react-mini-projects
context-api front-end-development mini-projects reactjs web-development
Last synced: about 1 month ago
JSON representation
This repository contains a collection of mini projects created with React, Vite (as the bundler), and Tailwind CSS for styling
- Host: GitHub
- URL: https://github.com/sahimbehlim/react-mini-projects
- Owner: Sahimbehlim
- Created: 2025-01-21T05:03:29.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-16T09:55:36.000Z (about 1 year ago)
- Last Synced: 2025-10-20T08:01:39.771Z (8 months ago)
- Topics: context-api, front-end-development, mini-projects, reactjs, web-development
- Language: JavaScript
- Homepage: https://react-mini-projects-sb.netlify.app/
- Size: 747 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Mini Projects
This repository contains a collection of mini projects created with **React**, **Vite** (as the bundler), and **Tailwind CSS** for styling. The projects demonstrate the use of various React hooks and concepts, including `useState`, `useEffect`, `useContext`, `useRef`, `useCallback`, `React Router`, `localStorage`, and API fetching.
## Features
- **React Router**: Used for managing navigation across the app.
- **Tailwind CSS**: Applied for styling and responsive design.
- **Context API**: Used for managing global state in some projects.
- **LocalStorage**: Used for storing data on the client side.
- **useState, useEffect**: State management and side effects handling.
- **useRef**: Used for accessing DOM elements directly.
- **useCallback**: Used to memoize callback functions.
- **API Fetching**: Making HTTP requests to fetch data from external APIs.
## Project Showcase
| # | Project Name | Demo Link |
| --- | ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| 001 | [Background Changer](https://github.com/Sahimbehlim/React-Mini-Projects/tree/main/src/Components/BgChanger) | [Live Demo](https://react-mini-projects-sb.netlify.app/background-changer) |
| 002 | [Budget Tracker](https://github.com/Sahimbehlim/React-Mini-Projects/tree/main/src/Components/BudgetTracker) | [Live Demo](https://react-mini-projects-sb.netlify.app/budget-tracker) |
| 003 | [Calculator](https://github.com/Sahimbehlim/React-Mini-Projects/tree/main/src/Components/Calculator) | [Live Demo](https://react-mini-projects-sb.netlify.app/calculator) |
| 004 | [Counter](https://github.com/Sahimbehlim/React-Mini-Projects/tree/main/src/Components/Counter) | [Live Demo](https://react-mini-projects-sb.netlify.app/counter) |
| 005 | [Currency Converter](https://github.com/Sahimbehlim/React-Mini-Projects/tree/main/src/Components/CurrencyConverter) | [Live Demo](https://react-mini-projects-sb.netlify.app/currency-converter) |
| 006 | [Digital Clock](https://github.com/Sahimbehlim/React-Mini-Projects/tree/main/src/Components/DigitalClock) | [Live Demo](https://react-mini-projects-sb.netlify.app/digital-clock) |
| 007 | [Dynamic Gallery](https://github.com/Sahimbehlim/React-Mini-Projects/tree/main/src/Components/DynamicGallery) | [Live Demo](https://react-mini-projects-sb.netlify.app/dynamic-gallery) |
| 008 | [Form Validation](https://github.com/Sahimbehlim/React-Mini-Projects/tree/main/src/Components/FormValidation) | [Live Demo](https://react-mini-projects-sb.netlify.app/form-validation) |
| 009 | [Password Generator](https://github.com/Sahimbehlim/React-Mini-Projects/tree/main/src/Components/PasswordGenerator) | [Live Demo](https://react-mini-projects-sb.netlify.app/password-generator) |
| 010 | [Recipe App](https://github.com/Sahimbehlim/React-Mini-Projects/tree/main/src/Components/Recipe) | [Live Demo](https://react-mini-projects-sb.netlify.app/recipe-app) |
| 011 | [Shadow Generator](https://github.com/Sahimbehlim/React-Mini-Projects/tree/main/src/Components/ShadowGenerator) | [Live Demo](https://react-mini-projects-sb.netlify.app/shadow-generator) |
| 012 | [Todo App](https://github.com/Sahimbehlim/React-Mini-Projects/tree/main/src/Components/TodoApp) | [Live Demo](https://react-mini-projects-sb.netlify.app/todo-app) |
| 013 | [Weather App](https://github.com/Sahimbehlim/React-Mini-Projects/tree/main/src/Components/Weather) | [Live Demo](https://react-mini-projects-sb.netlify.app/weather-app) |
## Screenshot
