Clonalingo

Clonalingo is Duolingo for Git. We turn intimidating terminal commands into an addictive, gamified experience with bite-sized challenges, an AI tutor, and zero fear of breaking your code!

Comment

Inspiration

Learning how to use the command line and Git is one of the scariest parts of becoming a new programmer. Staring at a blank, dark terminal and worrying that one wrong typo might delete an entire project is incredibly stressful for beginners. Textbooks and long video tutorials often feel boring and make it hard to actually remember the commands. We were inspired by gamified learning apps like Duolingo that make education fun, habit-building, and addictive. We wanted to take that same colorful, forgiving, and interactive approach and apply it to version control, turning an intimidating developer tool into an engaging game.

What it does

Clonalingo is a web application that teaches users how to use Git and terminal commands through interactive, bite-sized lessons. Users start on a colorful skill tree and work their way through different coding topics. Instead of just reading text, they complete hands-on challenges by dragging and dropping command blocks to fill in the blanks on a mock terminal. If they get the answer right, they earn experience points, build up a daily streak, and collect gems. If they make a mistake, they lose a heart and can use a built-in AI Tutor to get personalized hints. It tracks all of this progress in real-time, letting users compete on a league leaderboard.

How we built it

We built the frontend user interface using React and Tailwind CSS, focusing on a bright, mobile-friendly design with complete light and dark modes, and we deployed the site using Cloudflare Pages. For the backend, we used Supabase to handle the database and user authentication. Instead of doing the heavy computing on the frontend, we wrote custom PostgreSQL functions to securely manage the game rules, like updating scores and tracking streaks. We also built three custom Supabase Edge Functions to power the artificial intelligence features. These functions connect to large language models to generate custom lessons on the fly, check user answers, and power the chat tutor. AI tools such as Windsurf were used during the production of this project.

Challenges we ran into

We ran into several tough technical hurdles while connecting the frontend user interface to the backend database. Early on, brand-new users would sign up, but the app would crash because their profile data did not exist yet. We had to build an auto-creation system that instantly makes a default profile with five hearts the second someone creates an account. We also struggled with keeping the health system synced; sometimes a user's hearts would reset back to five just by leaving a page. We fixed this by rewriting our frontend code to always pull the freshest data when moving between screens. Finally, getting the app deployed to Cloudflare took some trial and error, as we accidentally deployed our site as a serverless worker instead of a standard web page at first.

Accomplishments that we're proud of

We are incredibly proud of how smooth and responsive the application feels to use. Building the "Review Mode" is one of our favorite achievements. Instead of just locking users out when they lose all their hearts, we created a custom fail-state screen that forces them to review their exact mistakes side-by-side with the correct answers before they can regain their lives and jump back in. We are also really proud of our serverless backend architecture. Moving the core game logic directly into the database makes the app incredibly secure and ensures a user's progress is always saved perfectly without using clunky, hard-to-maintain code.

What we learned

This project was a massive learning experience for us. We learned how to design a user interface that feels playful and rewarding, focusing on small details like spacing, color contrast, and giving users instant visual feedback. On the technical side, we learned a huge amount about database management. We figured out how to write custom SQL functions, triggers, and Row Level Security policies in Supabase to keep our data safe. We also learned how to integrate artificial intelligence directly into a backend workflow, allowing the app to dynamically generate fresh learning content instead of relying on a boring, static list of questions.

What's next for Clonalingo

Right now, Clonalingo focuses heavily on Git and basic terminal commands, but we want to expand the curriculum to cover other intimidating tech skills like writing SQL databases or learning Bash scripting. We also want to improve the mock terminal to allow free-typing instead of just dragging and dropping word blocks, giving advanced users a much more realistic practice environment. Finally, we would love to package the website into a native mobile app for iOS and Android, add a friends system for the leaderboard, and introduce multiplayer coding challenges where users can race each other to fix a broken project.

Built With

Share this project:

Updates