Skip to content

Commit 847aae0

Browse files
motatoesmotatoes
committed
add dashboard
1 parent bf0ac88 commit 847aae0

22 files changed

Lines changed: 7008 additions & 0 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.cursor

‎dashboard/.gitignore‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
# Environment variables
27+
.env
28+
.env.local
29+
.env.*.local
30+
31+
# TanStack Router generated files
32+
src/routeTree.gen.ts
33+

‎dashboard/README.md‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
# OpenSandbox Dashboard
2+
3+
A modern dashboard UI for OpenSandbox built with TanStack Router, TanStack Query, and WorkOS AuthKit.
4+
5+
## Tech Stack
6+
7+
- **Framework**: React 18 + TypeScript
8+
- **Build Tool**: Vite
9+
- **Routing**: TanStack Router (file-based routing)
10+
- **Data Fetching**: TanStack Query
11+
- **Authentication**: WorkOS AuthKit
12+
- **Styling**: Tailwind CSS
13+
- **Icons**: Lucide React
14+
15+
## Getting Started
16+
17+
### Prerequisites
18+
19+
- Node.js 18+
20+
- npm or pnpm
21+
22+
### Installation
23+
24+
```bash
25+
cd dashboard
26+
npm install
27+
```
28+
29+
### Configuration
30+
31+
1. Create a `.env` file based on `.env.example`:
32+
33+
```bash
34+
cp .env.example .env
35+
```
36+
37+
2. Configure your WorkOS credentials:
38+
39+
```env
40+
VITE_WORKOS_CLIENT_ID=client_XXXXXXXXXXXXX
41+
```
42+
43+
Get your WorkOS Client ID from the [WorkOS Dashboard](https://dashboard.workos.com).
44+
45+
### Development
46+
47+
```bash
48+
npm run dev
49+
```
50+
51+
The dashboard will be available at `http://localhost:5173`.
52+
53+
### Build
54+
55+
```bash
56+
npm run build
57+
```
58+
59+
### Preview Production Build
60+
61+
```bash
62+
npm run preview
63+
```
64+
65+
## Project Structure
66+
67+
```
68+
dashboard/
69+
├── public/
70+
│ └── favicon.svg
71+
├── src/
72+
│ ├── routes/
73+
│ │ ├── __root.tsx # Root layout
74+
│ │ ├── index.tsx # Landing page
75+
│ │ ├── _authenticated.tsx # Auth layout wrapper
76+
│ │ └── _authenticated/
77+
│ │ └── dashboard/
78+
│ │ ├── index.tsx # Dashboard overview
79+
│ │ ├── sandboxes.tsx # Sandboxes management
80+
│ │ └── settings.tsx # User settings
81+
│ ├── index.css # Global styles + Tailwind
82+
│ ├── main.tsx # App entry point
83+
│ └── vite-env.d.ts # Type declarations
84+
├── index.html
85+
├── package.json
86+
├── tailwind.config.js
87+
├── tsconfig.json
88+
└── vite.config.ts
89+
```
90+
91+
## Features
92+
93+
- 🎨 **Beautiful UI**: Custom sand/obsidian color palette with glass morphism effects
94+
- 🔐 **Authentication**: Secure login with WorkOS AuthKit (SSO, Social Login, etc.)
95+
- 📱 **Responsive**: Mobile-friendly design
96+
- ⚡ **Fast**: Vite for instant HMR, TanStack Router for type-safe routing
97+
- 🌙 **Dark Theme**: Elegant dark mode by default
98+
99+
## Customization
100+
101+
### Colors
102+
103+
The color palette is defined in `tailwind.config.js`:
104+
105+
- `sand-*`: Warm amber/gold accent colors
106+
- `obsidian-*`: Dark gray/slate background colors
107+
108+
### Fonts
109+
110+
- **Display**: Instrument Sans (headings, UI)
111+
- **Mono**: JetBrains Mono (code, terminals)
112+
113+
## License
114+
115+
MIT
116+

‎dashboard/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html lang="en" style="background-color: #0a0a0a">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="theme-color" content="#0a0a0a" />
8+
<title>OpenSandbox - Cloud Sandbox Infrastructure</title>
9+
<meta
10+
name="description"
11+
content="Instant, isolated development environments. Spin up sandboxes programmatically with our SDK or CLI."
12+
/>
13+
<style>
14+
html,
15+
body,
16+
#root {
17+
background-color: #0a0a0a;
18+
margin: 0;
19+
min-height: 100vh;
20+
}
21+
</style>
22+
<link rel="preconnect" href="https://fonts.googleapis.com" />
23+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
24+
<link
25+
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
26+
rel="stylesheet"
27+
/>
28+
</head>
29+
<body>
30+
<div id="root"></div>
31+
<script type="module" src="/src/main.tsx"></script>
32+
</body>
33+
</html>

0 commit comments

Comments
 (0)