Last active
April 26, 2026 01:19
-
-
Save yspreen/b262573401f9ccfe7fab1cb92152faac to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Let's build a Duolingo style Hiragana quiz in this folder. The goal for you is to create a new Git repository to create an origin and push a first init command to GitHub. You can use the gh command in order to create a new remote repository that has the same name as the folder that you are in, Hiragana. The username will be yspreen | |
| then we will start to create a new Next.js project with create_next_app. We want to use bun not yarn, or npm or pnpm. Please use TypeScript and Tailwind as presets. Then build the index page. | |
| The index page should have one big square in the middle of it showing a hiragana. Then there should be five options at the bottom with the romaji to translate that hiragana into Latin characters. | |
| Then, if the user picks something, either mark the selection as green and move on to the next, or mark it as red and show the correct one in green and show a button that says "Continue". If it's correct, we should only show it for 0.5 seconds and then automatically move on to the next. If it's wrong, the user has to click "Continue" in order to advance to the next one. | |
| Since there are three rows, we want to make sure that we always fill the screen on any XS or S viewports. But on M onwards, we should instead limit the size of it so that it doesn't get too big on a laptop or desktop computer. | |
| The three rows are going to be the big square with the Hiragana, then the second row is the Rumaji options, and then the last row is a continue button, which is always in the viewport, but might be invisible if continue is currently not an option. | |
| Finally, add a fourth row at the very top with a streak indicator. It should just say "streak" and then "zero" if you're at the beginning and then count up for every correct answer. | |
| Lastly, add some sound effects which are playing on user interaction only to prevent any audio playback permission issues. There should be a correct chime or a wrong sound, which is more like a two-tone descending order marimba sound or something like that. You should be able to find mp3 files with these two tools: Web Search, Read Web Page | |
| Frequently commit and push changes after each task. | |
| Finally use `vercel` to deploy this project after everything's commited and pushed. | |
| The output of your task should be a production-ready live-deployed vercel url that I can use to test this. | |
| Be sure to do sanity checks of your work locally. You should be able to use Computer Use to check what the current website looks like in safari desktop. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment