https://github.com/sonastea/misorter
Sort a list of items.
https://github.com/sonastea/misorter
css kpop list modules nextjs prisma sort supabase tailwindcss typescript vercel
Last synced: 5 months ago
JSON representation
Sort a list of items.
- Host: GitHub
- URL: https://github.com/sonastea/misorter
- Owner: sonastea
- License: mit
- Created: 2022-08-05T03:06:46.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2025-12-30T12:30:24.000Z (6 months ago)
- Last Synced: 2026-01-03T03:54:32.482Z (6 months ago)
- Topics: css, kpop, list, modules, nextjs, prisma, sort, supabase, tailwindcss, typescript, vercel
- Language: TypeScript
- Homepage: https://misorter.com
- Size: 2.46 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# misorter
A ranking and sorting application built with React, Vite, TanStack Router, and tRPC.
## Tech Stack
- **Frontend**: React 19, Vite, TanStack Router
- **Backend**: tRPC, Prisma
- **Database**: PostgreSQL
- **Styling**: TailwindCSS
- **State Management**: TanStack Query (React Query)
## Getting Started
First, install dependencies:
```bash
npm install
```
### Development Mode
For local development, you need to run both frontend and backend:
```bash
npm run dev
```
This will start:
- **Frontend** (Vite): [http://localhost:3000](http://localhost:3000) - React app with hot reload
- **Worker** (Wrangler): [http://localhost:8787](http://localhost:8787) - Cloudflare Worker runtime
You can also run them separately:
```bash
# Run only the frontend
npm run dev:client
# Run only the worker
npm run dev:worker
```
**Note:** The development setup uses Wrangler to run your Worker locally in the edge runtime, matching production exactly. The Vite dev server proxies `/trpc` requests to the Worker.
You can start editing the page by modifying `src/routes/index.tsx`. The page auto-updates as you edit the file.
## Build
To create a production build:
```bash
npm run build
```
To preview the production build:
```bash
npm run preview
```
## Environment Variables
Copy `.env.example` to `.env` and fill in the required values:
### Frontend (Client-side)
- `VITE_API_URL` - (Optional) API endpoint URL for production. If not set, uses relative URLs
- `VITE_CLIENT_ID` - Twitch API client ID
- `VITE_CLIENT_SECRET` - Twitch API client secret
### Backend (Worker)
- `DATABASE_URL` - PostgreSQL database URL
- `REDIS_URL` - Redis connection URL
- `UPSTASH_REDIS_REST_URL` - Upstash Redis REST URL
- `UPSTASH_REDIS_REST_TOKEN` - Upstash Redis token
## Deployment
### Production Options
#### Option 1: Cloudflare Workers + Pages (Recommended)
This project is configured for Cloudflare deployment.
**Deploy to Cloudflare:**
```bash
# Deploy production (worker + pages)
npm run deploy
# Deploy preview/staging
npm run deploy:preview
```
This deploys:
- **Worker**: Your tRPC API to `misorter.com/trpc/*` (or `preview.misorter.com/trpc/*` for preview)
- **Pages**: Your frontend to `misorter.com`
**Benefits:**
- ✅ No server management
- ✅ Global edge deployment
- ✅ Automatic scaling
- ✅ No CORS issues (same subdomain)
- ✅ Pay per use
See `DEPLOYMENT.md` for detailed deployment instructions.
**Note:** This project is optimized for Cloudflare deployment. For other platforms, you may need to adapt the Worker code accordingly.