# minxa.lol – Frontend

This is the **React-based frontend** for [minxa.lol](https://minxa.lol), a modern and lightweight URL shortener.

---

## 🧰 Tech Stack

* **React** – Frontend UI framework
* **TypeScript** – Typed JavaScript
* **Create React App** – App bootstrap and tooling
* **Tailwind CSS** – Utility-first styling
* **Redux Toolkit** – State management

---

## ⚙️ Environment Setup

### 1. Install Dependencies

```bash
npm install
```

### 2. Create `.env` File

```bash
cp .env.example .env
```

Edit the `.env` file to configure the API URL:

```env
REACT_APP_API_BASE_URL=http://localhost:8000
```

---

## 🚀 Running the Frontend

### Development Server

```bash
npm start
```

This starts the development server on [http://localhost:3000](http://localhost:3000).

### Production Build

```bash
npm run build
```

### Test

```bash
npm test
```

### Docker (via Docker Compose)

From the root of the project:

```bash
python generate_configs.py

docker compose -f docker-compose.generated.yml up --build -d
```

---

## 📁 Directory Overview

```
frontend/
├── public/           # Static assets
├── src/
│   ├── api/          # API functions
│   ├── app/          # Redux store and hooks
│   ├── features/     # Feature slices
│   ├── pages/        # Page components
│   ├── routes/       # App router
│   └── utils/        # Client-side utilities
├── .env.example      # Sample environment file
├── package.json      # Project config and scripts
├── tailwind.config.js
├── tsconfig.json
└── README.md
```

---

## 🧪 Testing (Coming Soon)

Testing will be supported via **React Testing Library** and **Jest**.