# arrived_com

**Repository Path**: xinminsu/arrived_com

## Basic Information

- **Project Name**: arrived_com
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-30
- **Last Updated**: 2026-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# RoyalCity Style Frontend Demo

A fractional real estate investing platform inspired by RoyalCity. Built for learning and demonstration purposes only — not affiliated with or endorsed by RoyalCity.

## Tech Stack

- **React 19** + **TypeScript**
- **React Router** for multi-page navigation
- **Vite** build tool
- **Tailwind CSS v4** styling
- **json-server** REST API with real HTTP requests

## Pages

| Route | Page | Description |
|-------|------|-------------|
| `/` | Home | Landing page with hero, stats, FAQ, and property preview |
| `/login` | Login | Authentication with demo credentials |
| `/properties` | Properties | Full property listing with category filters |
| `/properties/:id` | Property Detail | Investment details, calculator, and invest flow |
| `/portfolio` | Portfolio | Protected dashboard with holdings and dividend history |

## API Endpoints

The frontend fetches data from a local REST API (json-server) proxied at `/api`:

| Endpoint | Description |
|----------|-------------|
| `GET /api/properties` | List all properties |
| `GET /api/properties?category=...` | Filter by category |
| `GET /api/properties/:id` | Single property detail |
| `GET /api/users?email=&password=` | Login validation |
| `GET /api/portfolios?userId=` | User portfolio data |

Data lives in `db.json` and uses real Unsplash property images.

## Mapbox (Homepage Map)

The homepage map uses [Mapbox GL JS](https://www.mapbox.com/mapbox-gljs) when a token is configured.

1. Copy `.env.example` to `.env`
2. Add your token from [Mapbox Access Tokens](https://account.mapbox.com/access-tokens/):

```env
VITE_MAPBOX_ACCESS_TOKEN=pk.your_token_here
```

3. Restart the dev server

Without a token, the map falls back to a static SVG. Property markers use `lat` / `lng` from `db.json`.

## Demo Login

| Field | Value |
|-------|-------|
| Email | `demo@royalcity.com` |
| Password | `demo123` |

## Quick Start

```bash
npm install
npm run dev
```

This starts the Vite dev server with a built-in `/api` layer backed by `db.json` — no separate API process required.

Optional: run a standalone json-server on port 3001 with `npm run api`.

## Build

```bash
npm run build
npm run preview
```

## Project Structure

```
src/
├── api/           # REST API client (properties, auth, portfolio)
├── context/       # AuthContext for login state
├── pages/         # Route pages
├── components/    # Shared UI components
└── types/         # TypeScript interfaces
db.json            # API database
```

## Disclaimer

This project is a UI/UX learning demo. It does not constitute investment advice and does not use official RoyalCity brand assets.