# Kickstack APSCHE UI Implementation Guide

## Project Overview
This is the frontend repository for Kickstack's APSCHE portal, an internship platform for students. It is built as a Single Page Application (SPA).

## Tech Stack
- **Framework**: React 18+ (Vite)
- **Language**: TypeScript
- **State Management**: Redux Toolkit (RTK) & RTK Query
- **Styling**: Tailwind CSS (v4)
- **Routing**: React Router DOM (v6+)
- **Build Tool**: Vite

## Project Structure
```text
src/
├── api/                # Backend API integration (Axios/RTK Query)
├── components/         # Reusable UI components
│   ├── common/         # Shared components (Buttons, Inputs)
│   ├── layout/         # Navbar, Footer
│   ├── checkout/       # Checkout flow components
│   ├── dashboard/      # Student dashboard widgets
│   └── internship/     # Internship card & detail views
├── pages/              # Main Route Views
│   ├── Home.tsx        # Landing Page
│   ├── AuthPage.tsx    # Login/Signup
│   ├── Checkout.tsx    # Payment & Enrollment
│   └── UserDashboard.tsx # Student Portal
├── store/              # Redux State Definition
│   ├── api/            # API Service Definitions
│   └── slices/         # Local State Slices
└── utils/              # Helper functions & constants
```

## Key Concepts

### Campus Credits
A discount system ("Kickstack Credits") where students apply codes to receive price reductions on internships.
- **Logic**: Validated via backend API.
- **UI**: `CampusCreditSection` component in Checkout.

### Internships
The core product. Students browse, view details, and enroll in internships.
- **Data**: Fetched via `internshipApi` (RTK Query).
- **Flow**: List -> Details -> Checkout -> Payment -> Dashboard.

### Authentication
- **Role-based**: Students vs Admin.
- **Method**: Cookie-based authentication (`withCredentials: true`).

### Payments
- **Gateways**: Razorpay & PhonePe.
- **Flow**: Initiated in `Checkout.tsx`, status verified in `PaymentStatus.tsx`.

## Development Guidelines
- **Styling**: Use Tailwind utility classes. Avoid custom CSS files where possible.
- **State**: Use Redux for global state (User, Cart) and local state for UI interactions.
- **Icons**: Lucide React.