{"id":29045514,"url":"https://github.com/davidyen1124/totp-website","last_synced_at":"2026-05-02T18:40:11.765Z","repository":{"id":295310714,"uuid":"989772722","full_name":"davidyen1124/totp-website","owner":"davidyen1124","description":"🔐 A completely over-engineered React playground for generating 6-digit numbers every 30 seconds. Because apparently we need 47 dependencies to count to 6. Features: TOTP generation, QR codes, and existential dread.","archived":false,"fork":false,"pushed_at":"2025-05-24T19:53:06.000Z","size":600,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-26T16:43:23.826Z","etag":null,"topics":["authentication","demo","javascript","over-engineered","playground","qr-code","react","security","tailwindcss","time-based-otp","totp","two-factor-auth","vite","web-development"],"latest_commit_sha":null,"homepage":"https://davidyen1124.github.io/totp-website/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidyen1124.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-24T19:49:33.000Z","updated_at":"2025-05-25T18:17:48.000Z","dependencies_parsed_at":"2025-05-24T20:46:14.311Z","dependency_job_id":null,"html_url":"https://github.com/davidyen1124/totp-website","commit_stats":null,"previous_names":["davidyen1124/totp-website"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/davidyen1124/totp-website","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidyen1124%2Ftotp-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidyen1124%2Ftotp-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidyen1124%2Ftotp-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidyen1124%2Ftotp-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidyen1124","download_url":"https://codeload.github.com/davidyen1124/totp-website/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidyen1124%2Ftotp-website/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262244885,"owners_count":23281024,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","demo","javascript","over-engineered","playground","qr-code","react","security","tailwindcss","time-based-otp","totp","two-factor-auth","vite","web-development"],"created_at":"2025-06-26T16:30:32.969Z","updated_at":"2026-05-02T18:40:06.729Z","avatar_url":"https://github.com/davidyen1124.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔐 TOTP Playground: Because Apparently We Need 47 Dependencies to Generate 6 Numbers\n\n\u003c!-- Badge Gallery: Because nothing says \"professional\" like a wall of colorful rectangles --\u003e\n\u003cdiv align=\"center\"\u003e\n\n[![Live Demo](https://img.shields.io/badge/🚀_Live_Demo-Available-brightgreen?style=for-the-badge\u0026logo=github)](https://davidyen1124.github.io/totp-website/)\n[![GitHub Pages](https://img.shields.io/github/deployments/davidyen1124/totp-website/github-pages?style=for-the-badge\u0026logo=github\u0026label=GitHub%20Pages)](https://davidyen1124.github.io/totp-website/)\n\n[![Build Status](https://img.shields.io/github/actions/workflow/status/davidyen1124/totp-website/deploy.yml?branch=main\u0026style=flat-square\u0026logo=github\u0026label=Build%20%28Probably%20Works%29)](https://github.com/davidyen1124/totp-website/actions)\n[![License](https://img.shields.io/badge/License-Don't%20Sue%20Us-blue?style=flat-square\u0026logo=balance-scale)](/LICENSE)\n[![React](https://img.shields.io/badge/React-19.1.0-61DAFB?style=flat-square\u0026logo=react\u0026logoColor=white)](https://reactjs.org/)\n[![Vite](https://img.shields.io/badge/Vite-6.3.5-646CFF?style=flat-square\u0026logo=vite\u0026logoColor=white)](https://vitejs.dev/)\n\n[![Node.js](https://img.shields.io/badge/Node.js-20+-339933?style=flat-square\u0026logo=node.js\u0026logoColor=white)](https://nodejs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Not%20Used-red?style=flat-square\u0026logo=typescript)](https://www.typescriptlang.org/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-4.1.7-06B6D4?style=flat-square\u0026logo=tailwindcss\u0026logoColor=white)](https://tailwindcss.com/)\n[![ESLint](https://img.shields.io/badge/ESLint-Mostly%20Ignored-4B32C3?style=flat-square\u0026logo=eslint)](https://eslint.org/)\n\n[![Dependencies](https://img.shields.io/badge/Dependencies-Too%20Many-orange?style=flat-square\u0026logo=npm)](package.json)\n[![Bundle Size](https://img.shields.io/badge/Bundle%20Size-Surprisingly%20Large-yellow?style=flat-square\u0026logo=webpack)](https://github.com/davidyen1124/totp-website)\n[![Code Quality](https://img.shields.io/badge/Code%20Quality-It%20Works-green?style=flat-square\u0026logo=codeclimate)](https://github.com/davidyen1124/totp-website)\n[![Maintainability](https://img.shields.io/badge/Maintainability-Good%20Luck-red?style=flat-square\u0026logo=github)](https://github.com/davidyen1124/totp-website)\n\n[![Coffee Consumption](https://img.shields.io/badge/Coffee-Excessive-brown?style=flat-square\u0026logo=coffee)](https://en.wikipedia.org/wiki/Coffee)\n[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-Copy%20Pasted-orange?style=flat-square\u0026logo=stackoverflow)](https://stackoverflow.com/)\n[![Developer Sanity](https://img.shields.io/badge/Developer%20Sanity-0%25-critical?style=flat-square\u0026logo=github)](https://github.com/davidyen1124/totp-website)\n[![Feature Creep](https://img.shields.io/badge/Feature%20Creep-Inevitable-purple?style=flat-square\u0026logo=github)](https://github.com/davidyen1124/totp-website/issues)\n\n\u003c/div\u003e\n\n---\n\n_A completely over-engineered, React-based shrine to the ancient art of generating six random digits every 30 seconds._\n\n**🌐 [View Live Demo](https://davidyen1124.github.io/totp-website/)** ← Click here to witness the glory!\n\nWelcome, brave soul, to yet another JavaScript framework demonstration that definitely couldn't have been a simple HTML file with 20 lines of vanilla JS. But no, we had to use React, Vite, Tailwind, ESLint, and probably sacrifice a small goat to the npm gods to make this work.\n\n## 🎭 What Fresh Hell Is This?\n\nThis is a TOTP (Time-based One-Time Password) playground. You know, those 6-digit codes that your phone spits out every 30 seconds that you frantically type before they expire, making you feel like you're defusing a bomb in a Michael Bay movie.\n\n## 📸 Behold! Our Masterpiece (Screenshots)\n\n_\"A picture is worth a thousand words, but our code is worth a thousand sighs\"_\n\n![TOTP Playground Screenshot](docs/screenshots/totp-playground.png)\n\n_Look upon our works, ye mighty, and... well, it generates numbers. Revolutionary stuff._\n\nThis is what 500MB of dependencies and countless hours of React debugging looks like when rendered in a browser. Notice the beautiful Tailwind-styled buttons that could have been accomplished with 3 lines of CSS, and the QR code that makes your phone beep at you.\n\n### Features That Will Change Your Life (Narrator: They Won't)\n\n- 🔐 **Generate TOTP Secrets**: Because manually typing random characters is so 2010\n- 📱 **QR Code Generation**: For when you need a pixelated square to tell your phone what numbers to show\n- ✅ **Code Verification**: Test codes with a thrilling ±30 second time window (edge-of-your-seat stuff)\n- 💾 **Local Storage**: We'll remember your secrets... in the least secure way possible\n- 🔒 **Privacy First**: Nothing leaves your browser (mainly because we forgot to add analytics)\n- ⚡ **Lightning Fast**: Thanks to Vite, now you can waste time 87% faster\n- 🎨 **Modern UI**: We used Tailwind because writing CSS is apparently a war crime now\n\n## 🚀 Getting Started (Buckle Up)\n\n### Prerequisites (AKA The Usual Suspects)\n\n- Node.js (because running JavaScript outside browsers seemed like a good idea)\n- npm (or yarn, if you're feeling fancy)\n- A deep sense of existential dread (optional but recommended)\n- Coffee ☕ (mandatory)\n\n### Installation (The Ritual)\n\n1. Clone this monument to modern web development:\n\n```bash\ngit clone [this-repo] # Replace with actual URL, we're not psychic\ncd totp-website\n```\n\n2. Sacrifice your bandwidth to the npm gods:\n\n```bash\nnpm install\n# Watch as 500MB of node_modules appears like magic\n# Wonder why a TOTP generator needs 47 transitive dependencies\n```\n\n3. Start the development server (and pray):\n\n```bash\nnpm run dev\n# Marvel as it takes 3 seconds to compile something that could've been static HTML\n```\n\n4. Navigate to `http://localhost:5173` and witness the glory\n\n## 🎪 How to Use This Magnificent Beast\n\n### Setting Up TOTP (The \"Easy\" Part)\n\n1. **Configure Issuer and Account**: Type some words in boxes\n2. **Generate Secret**: Click a button to get random letters (revolutionary!)\n3. **Scan QR Code**: Point your phone at the screen like you're taking a selfie with pixels\n\n### Verifying Codes (The Thrilling Conclusion)\n\n1. **Enter Code**: Type 6 numbers (harder than it sounds)\n2. **Click Verify**: Experience the rush of validation\n3. **Marvel at Results**: Green ✓ means you can count, red ✗ means... well, you tried\n\n## 🏗️ Technology Stack (Our Tower of Babel)\n\n- **React 19**: Because class components are apparently cursed now\n- **Vite**: The build tool that makes other build tools feel bad about themselves\n- **Tailwind CSS**: For when you want CSS but don't actually want to write CSS\n- **OTPAuth**: The one library here that actually does something useful\n- **qrcode**: Turns data into pretty squares\n- **A Prayer**: That this doesn't break in production\n\n## 📁 Project Structure (Organized Chaos)\n\n```\nsrc/\n├── features/totp/           # Because everything needs to be a \"feature\" now\n│   ├── components/         # UI components (fancy divs)\n│   ├── context/           # React Context (global variables with extra steps)\n│   └── hooks/             # Custom hooks (functions but make it React)\n├── assets/                # Static files feeling lonely\n└── App.jsx               # The god component that rules them all\n```\n\n## 🚧 Building for Production (Good Luck)\n\n```bash\nnpm run build\n# Creates a `dist` folder with optimized files\n# Still probably larger than the entire Doom game\n```\n\n## 🚀 Deployment (Sharing the Pain)\n\nThis project includes a GitHub Action that automatically deploys to GitHub Pages, because manually uploading files is apparently too simple for modern web development.\n\n### Automatic Deployment (Set It and Forget It)\n\n1. **Push to main branch**: The GitHub Action will trigger automatically\n2. **Wait for the magic**: Watch the workflow turn 500MB of dependencies into a static site\n3. **Visit your site**: Available at `https://yourusername.github.io/totp-website/`\n\n### Manual Deployment (For Control Freaks)\n\nYou can also trigger deployment manually:\n\n1. Go to the \"Actions\" tab in your GitHub repo\n2. Click on \"Deploy TOTP Playground to GitHub Pages (Probably)\"\n3. Click \"Run workflow\"\n4. Cross your fingers and hope for the best\n\n**Note**: Make sure GitHub Pages is enabled in your repository settings and set to deploy from GitHub Actions. Because apparently we need to configure static hosting now.\n\n## 🛡️ Security \u0026 Privacy (LOL)\n\nDon't worry, this app is totally secure:\n\n- Everything runs in your browser (because client-side security is foolproof)\n- We store secrets in localStorage (basically Fort Knox)\n- No external servers (mainly because we're too lazy to set them up)\n- Perfect for testing (and absolutely nothing else)\n\n## 🤝 Contributing (Misery Loves Company)\n\nFound a bug? Want to add more dependencies? Feel free to:\n\n1. Fork this repo (spread the chaos)\n2. Add more frameworks (because we clearly don't have enough)\n3. Write tests (just kidding, nobody does that)\n4. Submit a PR (and wait for the heat death of the universe for review)\n\n## 📜 License\n\nSee LICENSE file for legal mumbo jumbo that basically says \"use this at your own risk and don't sue us if it breaks everything you love.\"\n\n## 🎯 FAQ (Frequently Avoided Questions)\n\n**Q: Why did you build this?**\nA: Someone said \"it would be easy\" and we took that personally.\n\n**Q: Could this have been simpler?**\nA: Absolutely, but then how would we justify our computer science degrees?\n\n**Q: Is this production ready?**\nA: If by \"production ready\" you mean \"probably won't set your computer on fire,\" then sure.\n\n**Q: Why is this README so sarcastic?**\nA: After debugging React for 6 hours to display 6 numbers, sarcasm is a coping mechanism.\n\n**Q: Why does the deployment take so long?**\nA: GitHub's servers need time to process our architectural choices and make peace with them.\n\n---\n\n_Built with ❤️, tears, and an unhealthy amount of Stack Overflow copy-pasting._\n\n_\"It works on my machine\" ™_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidyen1124%2Ftotp-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidyen1124%2Ftotp-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidyen1124%2Ftotp-website/lists"}