Initial Project Setup (React + Tailwind + Tooling + Quality Gates)

🎯 Goal

The objective of this task is to establish the complete, production-ready foundation of the frontend application. This includes scaffolding, robust styling, strict code quality enforcement, and a basic testing framework.

✅ Tasks & Deliverables

1. Project Scaffolding and Core Styling

Initialize the project using Vite with the React + TypeScript template.

Remove all default boilerplate code (logo, default CSS, unused files) to ensure a clean slate.

Install and configure Tailwind CSS including postcss and autoprefixer.

Define a basic custom color palette (e.g., primary, secondary) and a preferred font in tailwind.config.js.

2. Code Quality and Pre-commit Hooks

Install and configure ESLint (recommend using a strict preset like Airbnb) and Prettier.

Configure a .eslintrc file to integrate React, TypeScript, and Prettier correctly.

Implement Husky and lint-staged to automatically run linting and formatting checks before allowing a commit to be created.

3. Navigation and Basic Testing

Install react-router-dom (v6+) and set up the main router using the createBrowserRouter pattern in main.tsx.

Define initial routes for the Home Page (/) and a placeholder route for a Dashboard (/dashboard).

Install Vitest (or Jest) and @testing-library/react.

Add a very basic App.test.tsx file that confirms the main application component renders without crashing.