Create a Mini App

Mini apps enable third-party developers to create native-like applications within World App.

This template is a way for you to quickly get started with authentication and examples of some of the trickier commands.

Prompt Used

Build a “Simple Reaction Time Game” as a World App Mini App.

Functional requirements:
0. Name of game is ‘Flash Reflex’
1. A “Start” button
2. After clicking Start, wait a random delay (2–5 seconds)
3. Display “TAP!” on the screen
4. Measure the user’s reaction time in milliseconds when they tap
5. Use World ID verification to prove the user is a real human
6. Only verified users can submit a score
7. Each World ID can submit multiple scores
8. Display a leaderboard showing the top 10 fastest reaction times

Technical requirements:
- Database: simple json file stored in server (use fs)
- Verification: World ID proof must be verified on the server (not the frontend)
- Use ‘reaction-game-submit-score’ as Incognito action identifier 

Backend code:
   - POST /submit-score (verify World ID proof + store reaction time)
   - GET /leaderboard (return top 10 scores)

Cautions:
- Remove unnecessary bottom tab menus
- Avoid unnecessary abstractions or optimizations

-----
Hmm I changed my mind. even if user can submit the score multiple times, after first score submission, user need to pay 0.1 WLD to "REPLACE" their own previous score

- Update structure of previous json (mock db) file as well if necessary
- Use '--' as payment receiving wallet address

Getting Started

1. cp .env.example .env.local
2. Follow the instructions in the .env.local file
3. Run npm run dev
4. Run ngrok http 3000
5. Run npx auth secret to update the AUTH_SECRET in the .env.local file
6. Add your domain to the allowedDevOrigins in the next.config.ts file.
7. [For Testing] If you're using a proxy like ngrok, you need to update the AUTH_URL in the .env.local file to your ngrok url.
8. Continue to developer.worldcoin.org and make sure your app is connected to the right ngrok url
9. [Optional] For Verify and Send Transaction to work you need to do some more setup in the dev portal. The steps are outlined in the respective component files.

Authentication

This starter kit uses Minikit's wallet auth to authenticate users, and next-auth to manage sessions.

UI Library

This starter kit uses Mini Apps UI Kit to style the app. We recommend using the UI kit to make sure you are compliant with World App's design system.

Eruda

Eruda is a tool that allows you to inspect the console while building as a mini app. You should disable this in production.

Contributing

This template was made with help from the amazing supercorp-ai team.