A modern, feature-rich counter application built with React and Vite, featuring a stunning dark theme with glassmorphism effects and smooth animations.
- Interactive Counter: Start, stop, and reset functionality with auto-increment
- Persistent Input: Text input with localStorage integration
- API Integration: Fetches and displays data from JSONPlaceholder API
- Modern UI/UX:
- Dark theme with animated gradient background
- Glassmorphism card design with backdrop blur
- Smooth entrance animations and hover effects
- Floating glow orbs and shimmer effects
- Gradient text with animated color shifts
- Responsive Design: Fully responsive layout for mobile and desktop
- Performance Optimized: Built with Vite for fast development and production builds
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/ItsMeHaxMaster/Counter.git
cd Counter- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run buildThe production-ready files will be in the dist folder.
- Animated Gradient Background: Multi-color gradient that shifts smoothly
- Glassmorphism Effects: Semi-transparent cards with backdrop blur
- Color-Coded Buttons:
- 🟢 Green (Start)
- 🟠 Orange (Stop)
- 🔴 Red (Reset)
- Smooth Animations: Fade-in, slide-up, and hover transitions
- Interactive Elements: Responsive buttons with shine effects and subtle glows
- React 19.2.0 - UI library
- Vite 7.2.4 - Build tool and dev server
- Axios 1.13.2 - HTTP client for API requests
- CSS3 - Modern styling with animations and glassmorphism
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
Contributions, issues, and feature requests are welcome!
This project is open source and available under the MIT License.
HaxMaster
- GitHub: @ItsMeHaxMaster
Made with ❤️ and React