React + Vite

🚀 Frontend Project Collection

A curated list of interactive web components and applications built with React.js + Vite and modern web technologies.

🎨 UI Components

Interactive Elements

• Accordion ✅

  • Expandable content panels for organizing information in a compact way

• Star Rating ✅

  • Interactive rating component with hover effects and state management

• Modal Popup

  • Customizable modal dialog component with backdrop and animation

• Load More Button ✅

  • Infinite scroll implementation with "Load More" functionality

Navigation & Structure

• Tree View / Menu UI

  • Recursive navigation menu with expandable sections and nested items

• Tabs

  • Tabbed interface component with content switching

• Scroll Indicator

  • Visual progress bar showing scroll position on the page

🛠️ Utility Components

Theme & Styling

• Random Color Generator ✅

  • Tool for generating and copying random color codes

• Light and Dark Mode

  • Theme switcher with system preference detection and persistent storage

• Animated Text ✅

  • Text with animated gradient effect inspired by 1.1.1.1

Custom Hooks

• useFetch

  • Custom hook for handling API requests with loading and error states

• useOnclickOutside

  • Hook for detecting clicks outside a specified element

• useWindowResize

  • Responsive design hook for handling window resize events

📱 Feature Components

Navigation Features

• Scroll to Top and Bottom

  • Quick navigation buttons for page traversal

• Scroll to Particular Section

  • Smooth scroll implementation for in-page navigation

Media & Content

• Image Slider

  • Responsive carousel component with touch support

• QR Code Generator

  • Generate QR codes for URLs and text content

🎮 Interactive Applications

Games

• Tic Tac Toe
  • Classic game implementation with React state management

Utility Apps

• Github Profile Finder

  • Search and display GitHub user profiles using the GitHub API

• Search Autocomplete

  • Dynamic search suggestions with API integration

• Weather App

  • Real-time weather information with location support

Productivity Apps

• Food Recipe App

  • Recipe browser with search and filtering capabilities

• Shopping Cart App

  • E-commerce cart functionality with state management

• Expense Tracker App

  • Personal finance tracking with data visualization

• Feature Flag Implementation

  • Toggle features in development and production

💻 Full Stack Applications

• MERN Stack Blog App
  • Complete blogging platform built with MongoDB, Express, React, and Node.js