Learn on World

Bitcoin Learning App with World ID Integration

The 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 an id, title, and content field, 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-js library. 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 from https://github.com/worldcoin/mini-apps-ui-kit), 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., implicit any types), and MiniKit API mismatches (e.g., signInWithWorldId not 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 Functionality

• World 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 Details

• Tech 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!

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 using pnpm create next-app --ts, which gave me a basic structure with the app/ directory for routing. I added Tailwind CSS for quick styling by configuring tailwind.config.ts, postcss.config.mjs, and globals.css with Tailwind directives. I also installed @worldcoin/minikit-js with pnpm add @worldcoin/minikit-js to integrate World ID sign-in. The lesson data lives in src/data/bitcoinLessons.ts, where I defined a Lesson interface and an array of five lessons covering Bitcoin basics like "What is Bitcoin?" and "How Bitcoin Works". I set up the @ alias in tsconfig.json to import this as import { bitcoinLessons } from "@/data/bitcoinLessons";.

The main logic is in app/page.tsx, where I used React’s useState and useEffect hooks to manage the current lesson (currentSection) and authentication state (isAuthenticated). The World ID sign-in checks if MiniKit is available and triggers authentication with MiniKit.auth(), setting isAuthenticated to true on success. The UI conditionally renders a sign-in screen or the lessons based on isAuthenticated, using Tailwind classes like flex min-h-screen flex-col items-center justify-center p-24 gap-y-3 for layout. The root layout in app/layout.tsx imports 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 to src/styles/mini-apps-ui-kit.css, and imported it in layout.tsx. I replaced Tailwind classes in page.tsx with UI Kit classes like container, card, and button, 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 to http://localhost:3000, and used Ngrok (ngrok http 3000) to test the sign-in flow in the World App. I deployed the app to Vercel with vercel, updating the redirect URL to the Vercel URL (e.g., https://learn-on-world.vercel.app).

World ID via @worldcoin/minikit-js was 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 checking typeof MiniKit !== "undefined" when isMiniKitInstalled didn’t work, and guessing UI Kit class names. TypeScript errors (e.g., implicit any types, module import issues) were tough, and I resolved them by adding unknown types 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!