Horizon is a modern, customizable React dashboard template built with a feature-based architecture, focusing on scalability, performance, and rich user experience.
👉 Vercel Preview:
https://your-vercel-link.vercel.app
This dashboard uses Supabase Auth to simulate a real-world authentication flow.
- Authentication is required to access the dashboard
- Login is handled via Email & Password
- Supabase returns a JWT access token
- The token is stored in LocalStorage (demo purpose)
- Protected routes prevent unauthorized access
⚠️ This authentication flow is implemented for demo purposes only.
- Email: [email protected]
- Password: abc@123
At first you face the login page, because the nature of dashboard panels, which is authenticated:
We've used supabase login api to get an access token for working like a real authorization scenarios .
(Note that you should always login with this username and password to access to dashboard ).
well, when you successfully logged in, you'll face the dashboard layout which we really love it:
- ⚛️ Built with React
- 🧩 Feature-Based Architecture
- 🧠 Redux Toolkit for global state management
- 🔄 React Query for server-state management
- 🧲 Drag & Drop powered by @dnd-kit
- 💾 Persistent dashboard layout using LocalStorage
- 🌗 Dark / Light theme support
- 🎨 Styled with Tailwind CSS
- 📊 Interactive charts with Recharts
- 🧭 Sliders & carousels using Swiper
- 📝 Forms handled by React Hook Form
- 📦 Dynamic data loaded from local JSON files
- 📱 Fully responsive dashboard UI
- 🔐 Authentication with Supabase
- 🌐 Multi-language support with i18next
- 🛠️ Full TypeScript support for better type safety and developer experience
- React
- Redux Toolkit
- React Query
- Tailwind CSS
- Supabase Auth
- @dnd-kit
- Recharts
- Swiper
- React Hook Form
- Vite
- i18next / react-i18next
- TypeScript
Dashboard routes are protected by checking authentication state before rendering.
Unauthorized users are redirected to the login page.