Welcome to HERO.io, my latest modern web project built with React 19 and Vite 7, styled using Tailwind CSS + DaisyUI, and powered by sleek animations, smart utilities, and stunning UI components.
It’s fast ⚡, lightweight 🪶, and loaded with visual flair — from interactive charts to smooth toast notifications.
🔗 Live Deployments
- Cloudflare Pages: hero-cp8.pages.dev
- Netlify: strong-hotteok-59b6a4.netlify.app
- Vercel: hero-io-omega.vercel.app
💡 Tip: All links host the same app — feel free to choose your favorite platform to preview!
Frontend Highlights
- ⚛️ Built with React 19 + Vite 7 for blazing-fast performance
- 🎨 Tailwind CSS + DaisyUI for sleek, responsive styling
- 🍞 React Hot Toast & Toastify for real-time notifications
- 📊 Recharts for interactive data visualization
- 💾 LocalForage for persistent local storage
- 🔍 Match Sorter for smart filtering & sorting
- 📱 Fully responsive across all screen sizes
- 🧩 Modular, reusable component structure
| Category | Technologies |
|---|---|
| Frontend Framework | React 19, Vite 7 |
| Styling | Tailwind CSS, DaisyUI |
| Routing | React Router DOM v7 |
| Visualization | Recharts |
| Notifications | React Hot Toast, React Toastify |
| Utilities | LocalForage, Match Sorter, Sort By |
| Dev Tools | ESLint, PostCSS, Autoprefixer |
Make sure you have Node.js v18+ and npm installed.
# Clone the repository
git clone https://github.com/Raihan1018/hero.io.git
# Navigate into the project
cd hero.io
# Install dependencies
npm install
# Run the app in development mode
npm run dev
# Build for production
npm run build
# Preview the production build
npm run preview# 🧰 Folder Structure
hero.io/
├── public/ # Static assets
├── src/
│ ├── assets/ # Images & icons
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page components
│ ├── routes/ # App routing
│ ├── utils/ # Helper functions
│ ├── App.jsx # Root component
│ └── main.jsx # App entry point
├── index.html
├── package.json
├── tailwind.config.js
└── vite.config.js
This project uses:
- Vite → Lightning-fast bundling & hot reload
- ESLint → Enforces clean, consistent code
- Tailwind CSS → Utility-first responsive styling
- DaisyUI → Prebuilt Tailwind-based component library
- PostCSS + Autoprefixer → Auto-optimized CSS for browsers
| Tool | Purpose |
|---|---|
| 🧹 ESLint | Linting and code quality |
| 💅 PostCSS + Autoprefixer | CSS optimization |
| 🎨 Tailwind Config + DaisyUI | Theme customization |
| ⚡ Vite Dev Server | Fast HMR and preview |