A comprehensive collection of interactive React components and mini-applications, demonstrating modern web development practices, state management, and UI design.
https://mido-io.github.io/react-skills-showcase/
This repository serves as a portfolio of reusable React components, featuring:
- Modern UI/UX: Built with Tailwind CSS for a responsive, dark-mode ready interface.
- Component Architecture: Clean, modular, and reusable component design.
- State Management: Practical examples of
useState,useEffect, and custom hooks. - Interactive Elements: Animations, transitions, and dynamic user feedback.
| Component | Description | Key Concepts |
|---|---|---|
| Accordion | Expandable content sections | Conditional rendering, State toggle |
| Color Generator | Random HEX/RGB color generator | Math functions, Clipboard API |
| Star Rating | Interactive 5-star rating | Hover effects, State management |
| Image Slider | Carousel with navigation | Array manipulation, CSS transitions |
| Load More | Pagination and data loading | API integration, List rendering |
| Tree View | Recursive file structure | Recursion, Nested components |
| QR Generator | Generate QR codes instantly | External libraries, Input handling |
| Theme Switcher | Light/Dark mode toggle | Context API / LocalStorage, DOM manipulation |
| Scroll Indicator | Page scroll progress bar | Event listeners, Window object |
| Custom Tabs | Tabbed content interface | Active state tracking |
| Modal Popup | Customizable modal dialog | Portals, Overlay handling |
| GitHub Finder | Search GitHub users | Fetch API, Async/Await |
| Autocomplete | Search with suggestions | Filtering, Debouncing |
| Tic Tac Toe | Classic game | Game logic, History tracking |
- Framework: React 19
- Build Tool: Vite
- Styling: Tailwind CSS v4
- Icons: React Icons
- Linting: ESLint
-
Clone the repository
git clone https://github.com/mido-io/react-skills-showcase.git cd react-skills-showcase -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Build for production
npm run build
Contributions are welcome! Feel free to open an issue or submit a pull request.