███████╗██╗ ███████╗███████╗██████╗ ████████╗██╗ ██╗██████╗ ███████╗
██╔════╝██║ ██╔════╝██╔════╝██╔══██╗ ╚══██╔══╝╚██╗ ██╔╝██╔══██╗██╔════╝
███████╗██║ █████╗ █████╗ ██████╔╝ ██║ ╚████╔╝ ██████╔╝█████╗
╚════██║██║ ██╔══╝ ██╔══╝ ██╔═══╝ ██║ ╚██╔╝ ██╔═══╝ ██╔══╝
███████║███████╗███████╗███████╗██║ ██║ ██║ ██║ ███████╗
╚══════╝╚══════╝╚══════╝╚══════╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚══════╝
- Live Demo
- What is a Sleep Chronotype?
- The Four Chronotypes
- Features
- Tech Stack
- Architecture
- Quick Start
- Project Structure
- Roadmap
- Contributing
- Acknowledgments
- License
Screenshots coming soon. Star this repo to stay updated.
- Science, not guesswork — Based on Dr. Michael Breus's chronotype research, not random personality quizzes
- Actionable results — Get a personalized daily schedule, not just a label
- Privacy-first — No account required, no personal data collected
- Fast — 10 questions, 3 minutes, instant results
- Open source — Fully transparent scoring algorithm you can inspect and improve
Your chronotype is your body's natural preference for when to sleep and be active — determined by genetics, age, and circadian biology. It governs whether you thrive at sunrise, peak at midnight, or fall somewhere in between.
This is not about willpower or laziness. It is biology. Understanding your chronotype lets you schedule deep work, exercise, and rest at the times when your body is actually ready for them.
This quiz analyzes 10 dimensions of your daily rhythm — wake time, energy peaks, meal patterns, creativity windows, sleep onset, and more — to match you with one of four chronotype archetypes popularized by sleep researcher Dr. Michael Breus.
| 🦁 Lion | 🐻 Bear | 🐺 Wolf | 🐬 Dolphin | |
|---|---|---|---|---|
| Population | ~15% | ~55% | ~15% | ~10% |
| Personality | Morning warrior | Solar-powered | Night thinker | Light sleeper |
| Peak hours | 8 AM – 12 PM | 10 AM – 2 PM | 5 PM – 12 AM | Sporadic |
| Sleep time | 9:30 PM | 11:00 PM | 1:00 AM | Irregular |
| Strength | Discipline & drive | Steady productivity | Creative bursts | Hypersensitive focus |
- 10-question science-based chronotype quiz covering wake time, energy peaks, meal patterns, creativity, and more
- 4 detailed result profiles — Lion, Bear, Wolf, Dolphin — each with a personalized description and trait tags
- Score breakdown showing your percentage match across all four chronotypes
- Interactive daily timeline visualization tailored to each chronotype
- 5 actionable productivity and sleep tips per result
- Dark cosmic theme with an animated star background
- Mobile-first responsive design — works seamlessly on all screen sizes
- Bilingual — English and Korean (i18next with full translation coverage)
- One-tap SNS sharing — Twitter, Facebook, KakaoTalk, and Copy Link
- Serverless backend — Vercel Functions for result submission
- Global stats — see how your chronotype compares to all other quiz takers
Frontend
Backend / Infrastructure
┌─────────────────────────────────┐
│ User Browser │
└────────────────┬────────────────┘
│
┌────────────────▼────────────────┐
│ Vercel │
│ (React SPA + Edge CDN) │
│ │
│ ┌───────────────────────────┐ │
│ │ Vercel Functions (api/) │ │
│ │ POST /api/submit │ │
│ │ GET /api/stats │ │
│ └──────────────┬────────────┘ │
└─────────────────┼───────────────┘
│ SQL
┌─────────────────▼───────────────┐
│ Neon Serverless Postgres │
│ quiz results + stats │
└─────────────────────────────────┘
The frontend is a React SPA deployed to Vercel. Quiz submissions are handled by Vercel Serverless Functions (api/submit.ts, api/stats.ts) co-located in the same repo — no separate deployment needed. Results are persisted to Neon Serverless Postgres (Singapore region). The /api/stats endpoint powers the real-time global distribution display.
# Clone the repository
git clone https://github.com/black4305/sleep-type.git
cd sleep-type
# Install dependencies
npm install
# Start the dev server
npm run devThe app will be available at http://localhost:5173.
The api/ directory is deployed automatically by Vercel alongside the frontend. No separate backend setup is required.
Environment variable required (set in Vercel dashboard):
| Variable | Description |
|---|---|
DATABASE_URL |
Neon Serverless Postgres connection string |
sleep-type/
├── api/
│ ├── submit.ts # POST /api/submit (scoring, DB insert)
│ └── stats.ts # GET /api/stats (chronotype distribution)
├── src/
│ ├── components/
│ │ ├── AnalyzingOverlay.tsx # Loading animation between quiz and result
│ │ ├── LanguageToggle.tsx # Language switcher
│ │ ├── ScoreBreakdown.tsx # Percentage bars for all 4 chronotypes
│ │ ├── SEOHead.tsx # Dynamic meta tags per page
│ │ ├── ShareButtons.tsx # Twitter / Facebook / KakaoTalk / Copy
│ │ ├── StarBackground.tsx # Animated cosmic background
│ │ ├── Timeline.tsx # Daily schedule visualization
│ │ └── ui/ # shadcn/ui base components
│ ├── data/
│ │ ├── chronotypes.ts # 4 chronotype definitions + timelines
│ │ └── questions.ts # 10 quiz questions with scoring matrix
│ ├── i18n/
│ │ ├── en.json # English translations
│ │ ├── ko.json # Korean translations
│ │ └── index.ts # i18next configuration
│ ├── lib/
│ │ └── api.ts # Frontend API calls
│ ├── pages/
│ │ ├── LandingPage.tsx # Hero + chronotype cards + how it works
│ │ ├── QuizPage.tsx # 10-question quiz flow
│ │ ├── ResultPage.tsx # Result reveal + timeline + tips + share
│ │ └── StatsPage.tsx # Public stats dashboard (/stats)
│ ├── hooks/ # Custom React hooks
│ ├── types/ # TypeScript type definitions
│ └── main.tsx
├── public/
│ ├── robots.txt
│ ├── sitemap.xml
│ └── favicon.svg
├── index.html
└── vite.config.ts
- Core quiz with 10 questions and 4 chronotype results
- Bilingual support (English + Korean)
- Social sharing (Twitter, Facebook, KakaoTalk)
- Serverless backend with global statistics
- Interactive daily timeline visualization
- Add more languages (Japanese, Chinese, Spanish)
- PDF report download
- Sleep schedule calendar export (.ics)
- Dark/Light theme toggle
- Detailed comparison between chronotypes
See the open issues for a full list of proposed features.
Contributions are welcome. Please follow these steps:
- Fork the repository
- Create a feature branch —
git checkout -b feature/your-feature - Commit your changes —
git commit -m "feat: add your feature" - Push to your branch —
git push origin feature/your-feature - Open a Pull Request
For bug reports and feature requests, please open an issue.
See CONTRIBUTING.md for detailed contribution guidelines.
The four chronotype framework — Lion, Bear, Wolf, Dolphin — is based on the research of Dr. Michael Breus, clinical psychologist and sleep specialist, as presented in his book The Power of When (2016). The scoring model in this quiz is inspired by his chronotype assessment methodology.
If you find this project useful, consider supporting its development:
This project is licensed under the MIT License.
Made with React · TypeScript · Vercel · Neon · and a lot of late nights
If this project helped you discover your biological clock, please leave a star. It keeps the wolves awake.
