Front-End-4B

Setup

1. Install dependencies
   Make sure you have pnpm installed.

   pnpm install

2. Environment file
   Create a .env file in the project root:

3. Update Proxy URL
   In vite.config.ts, update the target to point to your backend API:

   proxy: {
        "/api": {
          target: "https://api.example.com/api/v2",
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
          cookieDomainRewrite: "localhost",
          headers: proxyHeaders,
        },
      },

Role Handling

• User roles (student, company, coordinator) are managed in route files (e.g., routes/_company/route.tsx).
• Each route checks authentication and role before rendering content.
• Unauthorized access triggers a redirect.

---

Deep Linking & Broken States

• Deep linking is prevented by route guards in route.tsx files.
• If a user is not authenticated, they are redirected to /login.
• After login, users are redirected back to the page they originally tried to access.

---

Development

• Start the dev server:

  pnpm run dev

• The app uses Vite for fast development and hot reloading.

---

Folder Structure

• components: UI components.
• hooks: Custom hooks and form logic.
• lib: Utilities and proxy client.
• routes: Route definitions and guards.
• store: State management for authentication.
• types: Zod schemas and TypeScript types.

---

Tech Stack

Core Languages & Frameworks

TypeScript: Type-safe JavaScript for scalable development.
React: Component-based UI library.

UI & Styling

ShadCN: Prebuilt UI components for fast development.
Tailwind CSS: Utility-first CSS framework for custom styling. Chart.js: Flexible JavaScript charting library for data visualization.

Routing, Data & Forms

TanStack Router: Handles navigation and route protection.
TanStack Query: Efficient data fetching and caching.
TanStack Form: Form state and validation management.

Validation & State

Zod: Type-safe schema validation for forms and API data.
Zustand: Lightweight state management for Authentication and saving to local storage.

Tooling

Prettier: Code formatting for consistent style.