https://github.com/nhassl3/servicehub-frontend
React + TypeScript + Vite frontend for the ServiceHub digital marketplace. Dockerized with Nginx, connects to a Go/gRPC backend.
https://github.com/nhassl3/servicehub-frontend
dockerfile frontend marketplace nginx react typescript vite
Last synced: 21 days ago
JSON representation
React + TypeScript + Vite frontend for the ServiceHub digital marketplace. Dockerized with Nginx, connects to a Go/gRPC backend.
- Host: GitHub
- URL: https://github.com/nhassl3/servicehub-frontend
- Owner: nhassl3
- License: mit
- Created: 2026-02-25T11:13:34.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-04-02T13:19:33.000Z (3 months ago)
- Last Synced: 2026-04-03T02:32:22.609Z (3 months ago)
- Topics: dockerfile, frontend, marketplace, nginx, react, typescript, vite
- Language: TypeScript
- Homepage: http://6892769-yf058657.twc1.net/
- Size: 135 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ServiceHub — Frontend
React + TypeScript frontend for the ServiceHub digital marketplace platform.
## Tech Stack
- **React 19** + **TypeScript**
- **Vite 7** — build tool with HMR
- **React Router 7** — client-side routing
- **Axios** — HTTP client
- **React Icons** — icon library
- **ESLint** — linting
- **Docker** — containerized with Nginx 1.27 (alpine)
## Project Structure
```
src/
├── api/ # Axios API clients (auth, products, cart, orders, etc.)
├── components/ # Reusable UI components (layout, product cards)
├── context/ # React contexts (AuthContext, CartContext)
├── hooks/ # Custom hooks (useDebounce)
├── pages/ # Page-level components
├── store/ # Token storage utilities
├── styles/ # Global CSS (reset, variables, globals)
└── types/ # Shared TypeScript interfaces
```
## Pages
| Route | Access | Description |
|---|---|---|
| `/` | Public | Home page |
| `/catalog` | Public | Product catalog with filters |
| `/products/:id` | Public | Product detail & reviews |
| `/sellers/:username` | Public | Seller public profile |
| `/login` | Guest only | Login |
| `/register` | Guest only | Registration |
| `/cart` | Auth | Shopping cart |
| `/orders` | Auth | Order history |
| `/orders/:id` | Auth | Order detail |
| `/wishlist` | Auth | Saved products |
| `/balance` | Auth | Balance & transactions |
| `/profile` | Auth | User profile settings |
| `/sellers/create` | Auth | Become a seller |
| `/seller/dashboard` | Auth | Seller dashboard |
## Getting Started
### Prerequisites
- Node.js 22+
- npm
### Local Development
```bash
# Install dependencies
npm install
# Copy env file
cp .env.example .env
# Set VITE_API_URL to your backend address
# Start dev server
npm run dev
```
The app will be available at `http://localhost:5173`.
### Build
```bash
npm run build
```
Output is placed in `dist/`.
### Lint
```bash
npm run lint
```
## Environment Variables
| Variable | Description | Default |
|---|---|---|
| `VITE_API_URL` | Backend base URL | `http://localhost:8080` |
Create a `.env` file in the project root:
```env
VITE_API_URL=http://localhost:8080
```
## Docker
### Build image
```bash
docker build \
--build-arg VITE_API_URL=http://localhost:8080 \
-t servicehub-frontend .
```
### Run container
```bash
docker run -p 80:80 servicehub-frontend
```
The Dockerfile uses a multi-stage build:
1. **Builder** — Node 22 alpine, runs `npm ci` and `npm run build`
2. **Runtime** — Nginx 1.27 alpine serves the static `dist/` output
Nginx is configured with:
- SPA fallback (`try_files` → `index.html`)
- API reverse proxy (`/api/` → `backend:8080`)
- Static asset caching (30 days)
- Gzip compression
- Security headers (X-Frame-Options, X-Content-Type-Options, XSS-Protection)
## Part of ServiceHub
This repository is the frontend service of the ServiceHub platform.
The full stack includes:
- **[servicehub-backend](https://github.com/your-org/servicehub-backend)** — Golang + gRPC + REST gateway
- **[servicehub-frontend](https://github.com/your-org/servicehub-frontend)** — this repository
- PostgreSQL 18 (alpine) as the database
- Deployed via Docker Compose + GitHub Actions CI/CD