Learn on World

Problem Statement

Bitcoin Learning App with World ID IntegrationThe Bitcoin Learning App is a beginner-friendly, interactive web application designed to educate users about the fundamentals of Bitcoin, built as part of my first-ever hackathon submission. As a newcomer to both hackathons and the Worldcoin ecosystem, I embarked on this project with enthusiasm to explore and contribute to the World ID system, which I deeply admire for its innovative approach to decentralized identity verification. My goal was to create a simple yet engaging mini-app that combines educational content with World ID's secure sign-in functionality, allowing users to access lessons only after authenticating their identity in a privacy-preserving way.Project Overview The app is built using Next.js, a React framework, and TypeScript for type safety, ensuring a robust development experience. It features a collection of five concise lessons about Bitcoin, covering topics such as "What is Bitcoin?", "How Bitcoin Works", "Bitcoin Security", "Bitcoin Economics", and "Using Bitcoin". Each lesson is presented in a clean, card-based UI with navigation buttons ("Previous" and "Next") to move through the lessons seamlessly. The lessons are stored in a TypeScript file (src/data/bitcoinLessons.ts) as an array of objects, each containing anid,title, andcontentfield, making it easy to expand the content in the future.The core feature of the app is its integration with World ID via the@worldcoin/minikit-jslibrary. Users must sign in using World ID before accessing the lessons, ensuring a secure and verified user experience. The sign-in process leverages World ID's authentication system, which I found fascinating for its ability to verify human identity without compromising privacy. After successful authentication, users are granted access to the lessons, which are displayed in a responsive layout styled initially with Tailwind CSS for rapid development.To enhance the visual appeal, I incorporated the Mini Apps UI Kit (sourced fromh), which provides a polished, consistent design tailored for Worldcoin mini-apps. The UI Kit styles were applied to the app's components, replacing Tailwind classes with the kit's predefined classes (e.g.,container,card,button, etc.), ensuring a professional and cohesive look that aligns with Worldcoin's design standards.Development Journey and Challenges As a first-time hackathon participant and someone new to the Worldcoin ecosystem, this project was both a learning opportunity and a challenge. I was drawn to the World ID concept because of its potential to create trust in digital interactions while prioritizing user privacy—a principle I deeply appreciate and wanted to build upon. I dedicated significant effort to understanding the MiniKit API and integrating World ID sign-in, which required setting up an app in the Worldcoin Developer Portal, configuring redirect URLs, and testing the authentication flow using Ngrok and the World App.However, the development process was not without hurdles. I encountered several bugs that I couldn’t fully resolve due to my limited experience with TypeScript, Next.js, and the MiniKit API. For instance, I faced issues with module imports (e.g.,Cannot find module '@/data/bitcoinLessons'), TypeScript errors (e.g., implicitanytypes), and MiniKit API mismatches (e.g.,signInWithWorldIdnot existing in the library version I used). I also struggled with styling inconsistencies when integrating the Mini Apps UI Kit, as I had to manually map the kit’s class names to my components without full documentation. Despite these challenges, I managed to get the app to a functional state where users can sign in with World ID, navigate through lessons, and experience a visually appealing interface.Features and FunctionalityWorld ID Sign-In:Users must authenticate using World ID to access the lessons, ensuring a secure and verified experience.Interactive Lessons:Five educational lessons about Bitcoin, with navigation buttons to move forward and backward.Responsive UI:A clean, card-based layout styled with the Mini Apps UI Kit for a professional look.Progress Tracking (Planned):I intended to add a "Mark as Completed" feature to track lesson progress, but couldn’t implement it due to time constraints and bugs.Deployment: The app is deployable to Vercel, with instructions to update the redirect URL in the Developer Portal for production use.Reflections and Future Improvements Participating in this hackathon and building on the Worldcoin ecosystem has been an incredibly rewarding experience for me as a beginner. I’m genuinely inspired by the World ID system and its potential to revolutionize digital identity, and I tried my best to create a meaningful app that showcases its capabilities. However, the app still has some unresolved bugs—such as occasional import errors and MiniKit API inconsistencies—that I couldn’t address due to my limited experience and the hackathon’s time constraints. I also faced challenges with testing the app in the World App, as I had to rely on Ngrok for local testing, which sometimes introduced additional complexity.Despite these issues, I’m proud of what I’ve accomplished. The app successfully demonstrates the integration of World ID with an educational mini-app, and the process taught me valuable skills in Next.js, TypeScript, and API integration. In the future, I plan to fix the remaining bugs, fully implement the progress tracking feature, add animations for smoother transitions between lessons, and possibly include quizzes to make the learning experience more interactive. I also hope to deepen my understanding of the Worldcoin ecosystem and contribute more sophisticated projects in the future.Technical DetailsTech Stack: Next.js, TypeScript, Tailwind CSS (initially), Mini Apps UI Kit,@worldcoin/minikit-js. -*File Structure:app/page.tsx: Main page with sign-in and lessons UI.app/layout.tsx: Root layout with global styles.src/data/bitcoinLessons.ts: Lesson data.src/styles/mini-apps-ui-kit.css: UI Kit styles.Dependencies:@worldcoin/minikit-js,tailwindcss,postcss,autoprefixer.Deployment: Vercel (with instructions for redirect URL setup).Final Thoughts This project, while not perfect, represents my best effort as a hackathon newbie to build something meaningful on the Worldcoin platform. I’m grateful for the opportunity to explore World ID and the MiniKit API, and I’m excited to continue learning and improving as a developer. The experience has been challenging but immensely fulfilling, and I look forward to refining this app and tackling more projects in the Worldcoin ecosystem!

Solution

I built the Bitcoin Learning App as my first hackathon project, diving into Next.js, TypeScript, Tailwind CSS, and the Worldcoin ecosystem with a lot of enthusiasm but limited experience. I started by setting up a Next.js project with TypeScript usingpnpm create next-app --ts, which gave me a basic structure with theapp/directory for routing. I added Tailwind CSS for quick styling by configuringtailwind.config.ts,postcss.config.mjs, andglobals.csswith Tailwind directives. I also installed@worldcoin/minikit-jswithpnpm add @worldcoin/minikit-jsto integrate World ID sign-in. The lesson data lives insrc/data/bitcoinLessons.ts, where I defined aLessoninterface and an array of five lessons covering Bitcoin basics like "What is Bitcoin?" and "How Bitcoin Works". I set up the@alias intsconfig.jsonto import this asimport { bitcoinLessons } from "@/data/bitcoinLessons";.The main logic is inapp/page.tsx, where I used React’suseStateanduseEffecthooks to manage the current lesson (currentSection) and authentication state (isAuthenticated). The World ID sign-in checks if MiniKit is available and triggers authentication withMiniKit.auth(), settingisAuthenticatedtotrueon success. The UI conditionally renders a sign-in screen or the lessons based onisAuthenticated, using Tailwind classes likeflex min-h-screen flex-col items-center justify-center p-24 gap-y-3for layout. The root layout inapp/layout.tsximports global styles and sets up the HTML structure with metadata for the app’s title and description.For styling, I initially used Tailwind but later switched to the Mini Apps UI Kit from Worldcoin. I downloaded the UI Kit from GitHub, copied the CSS tosrc/styles/mini-apps-ui-kit.css, and imported it inlayout.tsx. I replaced Tailwind classes inpage.tsxwith UI Kit classes likecontainer,card, andbutton, though I had to guess some class names due to limited documentation. For World ID integration, I created an app in the Worldcoin Developer Portal, set the redirect URL tohttp://localhost:3000, and used Ngrok (ngrok http 3000) to test the sign-in flow in the World App. I deployed the app to Vercel withvercel, updating the redirect URL to the Vercel URL (e.g.,https://learn-on-world.vercel.app).World ID via@worldcoin/minikit-jswas key for secure, privacy-preserving sign-in, ensuring only verified users could access the lessons. The Mini Apps UI Kit gave the app a polished, consistent design tailored for Worldcoin mini-apps, saving me time on styling. I had to get hacky at times—like manually checkingtypeof MiniKit !== "undefined"whenisMiniKitInstalleddidn’t work, and guessing UI Kit class names. TypeScript errors (e.g., implicitanytypes, module import issues) were tough, and I resolved them by addingunknowntypes and restarting the TypeScript server.I still have a lot to learn, so I relied heavily on AI like Grok to debug my code and understand concepts—I’d share snippets and iterate on solutions. I also met friends at the hackathon who helped with Ngrok setup, World App testing, and Vercel deployment. The app has bugs (e.g., import errors, styling issues), but the experience taught me so much about Next.js, TypeScript, and World ID. I hope to improve and do better in future hackathons!