Skip to content

joiellantero/picksy

Repository files navigation

Picksy

Picksy is an open-source web app that picks a random name from a list — fairly and instantly.

Visit - webapp React TailwindCSS


Features

  • Two picking modes — classic list draw or an animated spin wheel, switchable with a single toggle
  • Random name picker — instantly draws a name from your list with a confetti celebration
  • Participants list — add names manually (one per line) or upload a .txt / .csv file
  • Winner prompt — customise the message shown when a name is drawn
  • Remove after chosen — optionally remove a name from the pool after it's picked
  • Fullscreen + zoom — go fullscreen for presentations and zoom between 50 %–150 %
  • Light / dark mode — toggle from the nav on desktop, or the bottom dock on mobile
  • Animated bottom dock — mobile-first navigation with a drag-to-dismiss drawer and smooth framer-motion transitions
  • Fully client-side — no data is ever sent to a server; everything runs in the browser
  • State persistence — theme, names list, winner message, picking mode, and behavior settings are all saved to localStorage via Jotai

Tech Stack

Library Version Purpose
React 19 UI framework
Vite 8 Build tool and dev server
Tailwind CSS 4 Styling
Jotai 2 State management + localStorage persistence
Framer Motion 12 Animated bottom dock and transitions
React Router DOM 7 Client-side routing
Headless UI 2 Accessible modal / dialog
Heroicons 2 Icon set
react-canvas-confetti 2 Winner confetti animation
Vercel Analytics 2 Usage analytics

Getting Started

Run locally

# 1. Clone the repo
git clone https://github.com/joiellantero/picksy.git
cd picksy

# 2. Install dependencies
npm install

# 3. Start the dev server
npm run dev

The app will be available at http://localhost:5173.

Build for production

npm run build

Preview the production build

npm run preview

Deploy

Works out of the box with Vercel, Netlify, or any static hosting provider -- just point it at the dist/ folder.

Customization

Theme colors are defined in tailwind.config.js. Update the values there to retheme the app.

File Upload Notes

The file input accepts .txt and .csv files. Due to a Chromium bug on macOS, some text-like files (.py, .js, etc.) may pass the browser's accept filter. This is handled defensively in FileUpload.jsx by re-validating the file extension before reading it.

Contributors

All contributions are welcome! Feel free to open issues or pull requests.

Support

ko-fi

License

This project is licensed under the PolyForm Noncommercial License 1.0.0.

In Summary:

  • ✅ Free to use, study, and modify for personal or open-source projects
  • ✅ Free to share and redistribute non-commercially
  • ❌ Cannot be used for commercial purposes
  • ❌ Cannot be used in any way that generates revenue or monetary compensation

About

An open-source mobile-friendly random name picker.

Topics

Resources

License

Stars

Watchers

Forks

Contributors