SynTech

A place where u don't adjust to the methods, but the methods adjust to you!!!

Comment

Inspiration

SynTech was inspired by the idea that learning to code should be as interactive, adaptive, and encouraging as having a personal mentor. We noticed that most tutorials and coding platforms are either too static, too fast, or don’t provide instant, personalized feedback. With the rise of generative AI, we saw an opportunity to create a platform that delivers tailored lessons and real-time code reviews, making the journey from beginner to confident coder smoother and more enjoyable.

What it does

SynTech is an AI-powered coding mentor platform. Users can:

  • Sign up and log in securely.
  • Choose a programming language (Python, JavaScript, or C).
  • Receive step-by-step lessons generated by Google Gemini AI, each introducing one core concept.
  • Solve coding exercises and get instant, detailed AI feedback on their solutions.
  • Track their progress, completed lessons, and mastered concepts.
  • Switch languages at any time, with separate progress tracked per language.

How we built it

  • Frontend: Built with vanilla HTML, CSS, and JavaScript (ES modules), focusing on a modern, responsive UI with glassmorphism and gradients for engagement.
  • Backend: Used Firebase for authentication and Firestore for storing user progress and history.
  • AI Integration: Leveraged Google Gemini via the @google/generative-ai SDK (imported as an ES module) to dynamically generate lessons and evaluate user code.
  • Architecture: Separated the project into a static landing page (index.html, landing.css, landing.js) and a main app (app.html, app.css, app.js) that handles login/signup and the core learning experience.
  • State Management: Used Firebase Auth’s onAuthStateChanged to toggle between login and app views, and stored per-language progress in Firestore.

Challenges we ran into

  • Async State & Race Conditions: Managing state between Firebase Auth, Firestore, and AI calls required careful use of async/await and defensive programming to avoid race conditions.
  • Syntax & Parsing Issues: Cleaning up Gemini’s markdown/JSON responses was tricky; we had to robustly strip code fences and handle edge cases in AI output.
  • Module Loading & CORS: Loading ES modules locally initially triggered CORS errors; switching to VS Code Live Server or http-server resolved these.
  • UI Transitions: Ensuring smooth transitions between landing, login, and app views demanded precise visibility toggling and error handling to avoid “half-rendered” screens.
  • User Progress Consistency: Making sure progress was always correctly saved and loaded for each language, even if users switched devices or sessions.

Accomplishments that we're proud of

  • Seamless AI Integration: Achieved a smooth workflow where users get instant, meaningful AI-generated lessons and feedback.
  • User Experience: Created a visually appealing, responsive, and intuitive interface that keeps users engaged.
  • Robust Auth & Progress Tracking: Users can securely sign up, log in, and track their learning journey across languages and devices.
  • Error Resilience: The app gracefully handles API/network issues and provides clear feedback to users.

What we learned

  • How to integrate generative AI for both content creation and code evaluation in a real-world app.
  • The importance of robust error handling and defensive coding when dealing with async APIs and user data.
  • How to design a multi-view SPA-like experience using only vanilla JS and modular CSS.
  • The value of separating marketing/landing content from the core application for a cleaner user journey.

What's next for SynTech

  • More Languages & Frameworks: Add support for Java, Ruby, and popular frameworks.
  • Gamification: Introduce badges, points, and leaderboards to motivate users.
  • Community Features: Enable peer code review, discussion forums, and mentor matching.
  • Mobile App: Build a mobile version for learning on the go.
  • Voice & Video Tutorials: Integrate text-to-speech and video walkthroughs for visual and auditory learners.
  • Instructor Dashboard: Allow human mentors to review AI lessons and provide custom feedback.

Conclusion

SynTech shows how generative AI can make coding education more interactive, adaptive, and fun. Building it taught us about the power and quirks of modern web tech, the importance of user-centric design, and the challenges of real-time AI integration. We’re excited to keep evolving SynTech into the go-to learning companion for future coders everywhere!

Share this project:

Updates