Simple Dashboard

A modern, responsive dashboard application built with React, Vite, TypeScript, and Tailwind CSS. This project demonstrates a robust architecture for handling authentication, state management, and API integration.

🚀 Features

• Authentication: Secure Login and Registration flows.
• Protected Routes: Dashboard access is restricted to authenticated users.
• State Management: centralized state using Zustand with persistence.
• Data Fetching: Efficient server state management using TanStack Query.
• Responsive Design: Styled with Tailwind CSS for a seamless experience across devices.
• Type Safety: Built with TypeScript for reliable and maintainable code.
• Routing: Client-side routing with React Router.

🛠️ Tech Stack

• Framework: React
• Build Tool: Vite
• Language: TypeScript
• Styling: Tailwind CSS
• State Management: Zustand
• API Client: Axios
• Data Fetching: TanStack Query
• Routing: React Router DOM
• Form Handling: React Hook Form

📂 Project Structure

src/
├── api/          # API integration (axios instance, hooks, types)
├── components/   # Reusable UI components and ProtectedRoute wrapper
├── pages/        # Application pages (Login, Register, Dashboard)
├── store/        # Global state management (Auth store)
├── App.tsx       # Main application component with routing
└── main.tsx      # Entry point

🏁 Getting Started

Follow these steps to set up the project locally.

Prerequisites

• Node.js (v16 or higher recommended)
• npm or yarn

Installation

1. Clone the repository:

   git clone <repository-url>
   cd Simple-Dashboard

2. Install dependencies:

   npm install

Running the App

Start the development server:

npm run dev

Open http://localhost:5173 in your browser to view the application.

📜 Scripts

• npm run dev: Starts the development server.
• npm run build: Type-checks and builds the app for production.
• npm run lint: Runs ESLint to check for code quality issues.
• npm run preview: Locally previews the production build.

🔌 API

The application connects to a mock API at https://mock.arianalabs.io/. The Axios instance is configured in src/api/instance.ts and handles:

• Base URL configuration
• Request interception for attaching the Auth Token
• Response interception for handling 401 Unauthorized errors (auto-logout)