codeSL

Inspiration

We were inspired by the idea of making coding fun, simple, and accessible for everyone. We noticed that most learning platforms for programming can feel overwhelming or dull. Our vision was to create something that felt more like a game, motivating users with levels, XP, and competition while still delivering real coding knowledge. We took inspiration from apps like Duolingo but added our own twist by focusing on coding languages and a competitive social element. We wanted users to look forward to learning, not feel pressured by it.

What it does

codeSL is a gamified, level-based coding platform where users can learn programming languages through structured lessons and challenges. Each language is divided into beginner, intermediate, and advanced levels, which unlock progressively. As users complete tasks, they earn XP, level up from Bronze to Silver to Gold, and see their progress on a leaderboard. Users can also duel their friends in real-time coding battles, share XP, track their login streaks, set daily goals, and earn achievements.

How we built it

We built codeSL using React, Vite, Tailwind CSS, HTML, CSS, JavaScript, and React Router for page transitions and animations. Initially, we planned to use PostgreSQL and Supabase for our backend, but due to time constraints, we focused on building a working front-end prototype. While our backend features are not yet fully integrated, the front-end experience is designed to be smooth, fun, and functional.

Challenges we ran into

We faced quite a few challenges along the way. One of the biggest was finding the right development tools. At first, we explored building the app with Flutter, but due to compatibility issues and slow progress, we switched to React midway through the project. This transition meant we had to rework most of our code. Another challenge was managing a large number of ambitious ideas with limited time. It was difficult to narrow things down and stay focused. Backend functionality was another hurdle, as we couldn’t finish integration on time. We also spent a lot of time crafting the perfect name, making the pitch engaging, creating a friendly and consistent UI theme, and developing Kham, our animated chameleon mascot who appears throughout the app. On top of that, building out realistic lesson plans and game mechanics that worked smoothly took trial and error.

Accomplishments that we're proud of

One of our biggest accomplishments is the user interface. It’s visually consistent, playful, and follows a clear theme that makes the app feel cohesive and inviting. We are also proud of the pitch, we believe it stands out and clearly communicates what makes codeSL unique. Most importantly, we’re proud of the learning process. Every mistake we made helped us rethink our approach and make better decisions. Despite all the ideas we started with, we successfully organized them into one well-functioning and engaging app. We believe our concept is original, well-targeted, and meaningful, especially for younger users and students looking for a gamified coding experience.

What we learned

We learned a lot during this project. On the technical side, we learned how to use tools like React and Tailwind more effectively. But we also learned important lessons about planning and team dynamics. A good idea without a solid plan can quickly become overwhelming. Once we refocused and prioritized, things began to click. We also learned the importance of having a committed team. Sharing ideas, supporting each other, and being flexible helped us overcome roadblocks and push the app forward together.

What's next for codeSL

Our vision for codeSL goes far beyond this prototype. Here's how we plan to grow the platform in phases:

Phase 1 – Build the MVP: This is the stage we’re currently in. We’re focused on creating a minimum viable product that showcases our core features such as, level-based learning, XP, achievements, and a clean, consistent UI. Our goal is to make the app functional, visually engaging, and fun to use so users immediately understand its value.

Phase 2 – Test and Iterate with Early Users: Once the MVP is complete, we plan to launch a closed beta to a small group of real users. Their feedback will guide our next development decisions. We’ll test user flow, improve the lesson experience, fine-tune XP and duel systems, and address bugs or friction points. This feedback loop will help us create a smoother, more refined version of the app.

Phase 3 – Expand the platform’s features, including a tagging system that allows universities and companies to create their own lesson tracks, improved social features, more coding duels, and support for more languages beyond Python, Java, and C.

Phase 4 – Build a strong community, with partnerships through schools, universities, and influencers. We plan to launch an ambassador program and a referral system that rewards users for inviting friends through schools or social media.

Phase 5 – Scale globally, launching the full web version and bringing codeSL to users around the world. Monetization will come through tiered subscriptions offering AI features, advanced lessons, and exclusive content.