🔀 Random Picker

Who will do it this time? A useful random picker

👩🏻‍💻 Project

• Duration: 2024.02.12 ~ 2024.02.20
• Deployment: 🔀 Random Picker
• Retrospective: Learning Notes from Random Picker Project
• Issue Tracking: Github Projects
• Reference: random-presenter-picker

🖼️ Final Screens

Light Mode

random-picker-light.mov

Dark Mode

random-picker-dark.mov

🛠️ Tech Stack

• Languages: TypeScript React
• Styling: emotion
• Build: vite
• Deployment: vercel

🚀 Prerequisites

• Node.js 22.x (see engines.node in package.json)
• npm 10+ (bundled with Node 22)

🧭 Quick Start

# 1) Clone
git clone https://github.com/ella-yschoi/random-picker.git
cd random-picker

# 2) Install dependencies
npm install

# 3) Start dev server (http://localhost:5173 by default)
npm run dev

# 4) Build for production
npm run build

# 5) Preview the production build locally
npm run preview

📜 Available Scripts

npm run dev       # Start Vite dev server
npm run build     # Type-check with tsc, then build with Vite
npm run preview   # Preview the production build
npm run lint      # Run ESLint on ts/tsx files

🗂️ Project Structure

random-picker/
├─ src/
│  ├─ components/
│  │  ├─ button/
│  │  ├─ toggle/
│  │  ├─ title/
│  │  └─ ...
│  ├─ contexts/
│  ├─ pages/
│  ├─ styles/
│  └─ main.tsx
├─ public/
├─ index.html
├─ package.json
└─ vite.config.ts