Created a Code Learning web but in gamified way

[khvsreddy-code]

Body

https://minecode-indol.vercel.app/

please feel free to explore and give feedback for improvements

⛏️ MineCode: The Cyber-Gamified Code Academy
MineCode is an interactive, high-octane learning platform I’ve built to turn the "grind" of programming into a cyberpunk adventure. Heavily inspired by the aesthetics of Codedex and the mechanics of Minecraft, I designed MineCode to replace static tutorials with a progression-based "Netrunner" experience.

🚀 What it is
MineCode is a gamified Single Page Application (SPA) I created to teach Python, HTML, and JavaScript. You (the Agent) navigate through a digital frontier, mastering real-world coding skills to earn XP, level up your profile, and unlock rare pixel-art badges.

🛠️ Key Product Features
Interactive Workspace: A split-screen IDE where you write and run real code alongside live mission instructions.
XP & Leveling Engine: Real-time feedback loops I implemented to reward your progress with XP, streaks, and milestones.
Hacker-Tier UI: A premium design system I developed using glassmorphism, CRT scanline overlays, and neon-drenched pixel art.
Mission Briefings: Narrative-driven lessons that feel like "quests" rather than homework.
📡 How it Works
I engineered MineCode on a modular, custom JavaScript architecture designed for high performance:

1. The Brain: State Management
   I used a centered GameState object that acts as the "Single Source of Truth." Every time you complete a task, the engine I wrote calculates your XP, checks for level-ups, and triggers UI layers like progress bars and confetti simultaneously.

2. The Backend: Supabase
   I utilized Supabase (PostgreSQL) for the platform's infrastructure. It handles all authentication and ensures your XP, level, and badge inventory are synced to the cloud in real-time.

3. The Execution Layer
   I built a virtual terminal that executes JavaScript or validates Python logic within a client-side sandbox, allowing you to see your code results instantly without a complex server setup.

4. The Routing Engine
   I developed a custom SPA router to handle navigation. It allows the page to transition between the Landing Terminal, Dashboard, and Lessons without refreshing, maintaining a smooth, cinematic flow.

5. Visuals & Motion
   I powered the animations with Anime.js and the Canvas API for those immersive Matrix-rain backgrounds. I also integrated Marked.js to convert mission briefings from Markdown to styled HTML on the fly.

Please explore the web and give us feedback. I’d love to hear your thoughts on how I can make the experience even better!

Guidelines

• I have read and understood this category's guidelines before making this post.

[IvanPavlovic-web]

Hey @khvsreddy-code ,

I love how the UI/UX Design looks like and it reminds me of Codex (https://www.codedex.io/python).

One of the first improvements I’d suggest is centering the main content. At the moment, it feels slightly left-aligned, which affects balance and readability. Additionally, some of the text blends into the background. Even though it’s white, the contrast isn’t always strong enough, and it requires extra effort to read. This could likely be improved by increasing the font weight (around 500–600) or by adding a subtle text shadow or dark stroke to help the text stand out more clearly against the background.

Please don’t take this feedback personally. I’m still fairly new to programming and GitHub myself, and I’m sharing this purely as constructive feedback (acting like I am doing something lol). Wishing you the best with the project, and if there’s any way I can help, feel free to let me know.

+1 star on your repo

[khvsreddy-code]

still thanks for feedback :)

will improve the web

[mecodeatlas]

Hi @khvsreddy-code, we’re glad you’re here 😀

Thanks for sharing your project with the community. Unfortunately, we currently do not allow self-promotion or advertising on the Community Discussions. We want to make sure there is space for users to ask questions without overwhelming them with other conversations. Thank you for helping us maintain a productive and tidy community for all our members.