96 lines
1.7 KiB
Markdown
96 lines
1.7 KiB
Markdown
# 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**. |