DEV Community: Mohammad Yasir

I Built CircuitMate, an AI Lab Partner for My ECE Friend

Mohammad Yasir — Sun, 04 Oct 2026 08:29:34 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

I built CircuitMate — an AI lab partner for Electronics & Communication Engineering (ECE) students.

I built it for a friend who is studying ECE and spends a lot of time working through lecture notes, PDFs, engineering concepts, numerical problems, and exam preparation.

The problem was simple:

When you're stuck on a topic, a normal AI chatbot can give you an answer — but that answer might not be based on the material you're actually studying.

You end up switching between:

lecture PDFs
Google
YouTube
AI chatbots
formulas
and your own notes

I wanted to make that workflow much simpler.

So CircuitMate starts with the material the student is already studying.

Upload your ECE notes, and CircuitMate lets you:

Ask My Notes — ask questions about your uploaded material
Explain Concept — break difficult concepts into clearer explanations
Solve Problem — work through engineering problems step by step
Exam Simulator — practice questions and get evaluated

The important part is that CircuitMate keeps the student's own material at the center of the experience.

For example, I can upload a Network Theory PDF and ask:

What is maximum power transfer?

CircuitMate answers the question from the uploaded study material and shows the pages used to produce the answer.

So the workflow becomes:

Upload notes → Ask → Understand → Solve → Practice

Instead of:

Search → Compare → Switch tabs → Find the right explanation → Go back to the notes.

Demo

Live app:
https://circuitmate-theta.vercel.app

Demo video:
https://drive.google.com/file/d/1DmvnKhvvqn-BTRlCncO0kckSiWiVosCl/view?usp=sharing

The demo shows the complete workflow:

Uploading an ECE lecture PDF
Extracting and indexing the study material
Asking a question about the notes
Getting an answer with page-level sources
Using Explain Concept
Working through a problem with Solve Problem
Practicing with the Exam Simulator

The uploaded Network Theory material in the demo contains 46 pages and 51 indexed sections.

Code

CircuitMate is open source.

GitHub:
https://github.com/Yasir761/circuitmate

The application is split into a frontend and backend.

The frontend provides the study workspace and different learning modes.

The backend handles:

PDF extraction
document chunking
retrieval
prompt construction
Gemma inference
chat history
exam generation and evaluation

The goal was to keep the core workflow understandable rather than hiding everything behind a single AI API call.

How I Built It

CircuitMate is built around Gemma, Google's open-weight model.

The basic flow is:

ECE PDF
   ↓
Text extraction
   ↓
Chunking
   ↓
Retrieval
   ↓
Relevant study material
   ↓
Gemma
   ↓
Grounded answer
   ↓
Source pages

For document processing, CircuitMate extracts text from uploaded PDFs and divides the material into smaller sections that can be retrieved when a student asks a question.

The retrieved material is then provided to Gemma along with instructions about how CircuitMate should behave.

This allows the same model to support different study workflows.

Ask My Notes

Answer questions using the uploaded material and show relevant source pages.

Explain Concept

Turn a concept from the material into a clearer explanation, with intuition, equations, and an exam-friendly explanation where appropriate.

Solve Problem

Break an engineering problem into structured steps such as the problem statement, given values, approach, solution, and result.

CircuitMate is also deliberately instructed not to silently invent missing information.

If the uploaded material doesn't contain enough information to solve something, it should say that rather than pretending that the missing information exists.

Exam Simulator

Generate questions from the student's study material and evaluate the student's answer against the same material.

The backend is built with Python and FastAPI.

The frontend is built with Next.js and TypeScript.

MongoDB is used for application and session data.

The frontend is deployed on Vercel, while the backend is deployed on Render.

Why Does Open Innovation Matter?

For me, the biggest reason to use an open-weight model was control and replaceability.

I didn't want CircuitMate to be designed around the assumption that one closed model had to power the entire product forever.

I used Gemma, Google's open-weight model, for the generation layer.

That gives me more freedom to experiment with how the model is used, how the prompts and retrieval workflow are designed, and how the application can evolve.

That matters for an education product.

The retrieval layer, the prompts, the document processing, and the model should all be things I can change and experiment with.

It also makes future directions possible, such as experimenting with different open-weight models, local inference, fine-tuning, or adapting the model specifically for engineering education.

For this weekend project, I chose to serve Gemma through a hosted API instead of running inference locally.

That was a deliberate trade-off.

My laptop has limited GPU memory, and I wanted to spend the challenge building the actual student experience rather than spending the entire weekend optimizing local inference.

So CircuitMate isn't claiming to be a completely local or private AI tutor today.

Instead, the project is built around an open-weight model and keeps the model layer replaceable.

That's the part of open innovation that mattered most to me.

My Agent Session

I didn't use a separate agent-session workflow as part of the final product, so I'm leaving this section out rather than adding something that doesn't represent how CircuitMate was actually built.

Prize Categories

I'm entering CircuitMate for:

Best Use of Gemma

CircuitMate uses Gemma as the core generation model behind its ECE study workflows.

The model receives relevant material retrieved from the student's uploaded notes and turns it into grounded explanations, problem-solving responses, and exam evaluations.

Best Use of Render

The CircuitMate backend is deployed on Render, which runs the FastAPI application responsible for document processing, retrieval, Gemma inference, and the application's backend workflow.

Building for a Friend

The most important part of this challenge for me wasn't choosing the technology.

It was choosing the person.

Instead of starting with:

"What AI app can I build?"

I started with:

"What would actually make studying ECE easier for someone I know?"

That led me away from building another general-purpose chatbot.

I ended up building something much narrower:

an AI lab partner that works around the material an ECE student is already studying.

That constraint shaped almost every product decision.

The interface became simpler.

The AI needed to be grounded.

Source pages became important.

Problem solving needed structure.

And an exam mode made more sense than adding another generic chatbot feature.

What I Learned

The biggest lesson from building CircuitMate was that a narrower problem can make an AI product much more useful.

"AI tutor" is vague.

"An AI lab partner that helps an ECE student study from their own notes" is much more concrete.

It also changed how I thought about the engineering.

I didn't need to build a huge agent framework.

I needed:

useful document extraction
retrieval
grounded prompts
source references
structured problem solving
an exam workflow
and an interface that gets out of the student's way

There are still plenty of things I want to improve.

For example:

better retrieval for diagrams and mathematical notation
better numerical problem solving
more robust handling of scanned PDFs
persistent document indexing
more ECE-specific workflows
support for additional open-weight models
eventually supporting local inference

But for this challenge, I wanted to build something small enough to finish and useful enough to actually hand to someone.

Final Thought

I started with a simple question:

What if studying from a long engineering PDF felt less like searching through a document and more like having a lab partner sitting next to you?

That's CircuitMate.

Your AI lab partner for ECE.

devchallenge #weekendchallenge #hf26challenge #gemma

How AI is Changing the Future of Web Development

Mohammad Yasir — Sat, 01 Feb 2025 06:31:32 +0000

🌍🤖🚀

Web development is evolving rapidly, and artificial intelligence (AI) is at the center of this transformation. From automating code generation to improving user experiences, AI is changing how websites and applications are built. Whether you're just starting out or already an experienced developer, understanding AI’s role in web development can help you stay ahead.

How AI is Transforming Web Development

💡🔧💻

AI is no longer just a futuristic idea—it’s actively shaping the web development industry today. It enables developers to work smarter, faster, and more efficiently. Here are some of the key ways AI is making a difference:

1. Automated Code Generation

✍️📜🤖

AI-powered tools like GitHub Copilot and OpenAI’s Codex help developers by generating code snippets, optimizing logic, and even writing entire functions. This reduces development time and allows programmers to focus on solving complex problems rather than repetitive coding tasks.

2. AI-Powered Design Assistance

🎨🖌️🧠

AI-driven design tools such as Figma’s AI plugins and Adobe Sensei assist in creating visually appealing websites. AI can generate layouts, suggest color schemes, and optimize images automatically, making design workflows more efficient.

3. Enhanced User Experience with AI Chatbots and Personalization

💬🤖👥

Chatbots like ChatGPT and Dialogflow provide real-time customer support and improve engagement. AI also personalizes content based on user behavior, ensuring websites feel more interactive and user-friendly.

4. SEO and Content Optimization

🔍📈📊

AI-driven tools like Surfer SEO and Clearscope analyze search trends and help optimize content for better rankings. AI can also generate meta descriptions, improve readability, and suggest keywords to boost website visibility on search engines.

5. AI in Testing and Debugging

🛠️🔍🐞

AI-powered testing frameworks, such as Selenium with AI integration and Test.ai, can automatically detect and fix bugs. This speeds up the development cycle and ensures smoother performance.

How I Use AI in My Projects

🚀👨‍💻🔧

As a developer, I use AI to make my work more efficient and creative. Here are some ways I incorporate AI into my projects:

Code Assistance 🤖💻: I use GitHub Copilot to speed up coding and get suggestions for optimizing my code.

Design Optimization 🎨✨: AI-powered design tools help me refine UI/UX elements.

SEO and Content Generation 🔍✍️: AI helps me analyze trends, suggest keywords, and enhance content quality.

Automated Testing 🛠️🕵️‍♂️: AI-driven testing frameworks assist in detecting and fixing bugs more efficiently.

If you're interested in seeing how I apply AI in my work, check out my portfolio at codilad.dev!

The Future of AI in Web Development

🔮🌐📅

AI’s role in web development will only grow. Here are some trends to watch:

*AI-Generated Websites *🌎🚀: AI could soon design and build entire websites with minimal human input.

Voice-Based Web Development 🎙️💻: Developers may soon be able to code using voice commands, making development more accessible.

AI-Powered Cybersecurity 🔐🛡️: AI will play a crucial role in detecting security threats and vulnerabilities in real time.

Hyper-Personalization 🎯👥: Websites will become even more tailored to individual users, offering unique experiences based on behavior and preferences.

Final Thoughts

🤯💭🔥

AI is revolutionizing web development by automating tedious tasks, improving design, and enhancing user engagement. While AI won’t replace developers, it will serve as a powerful tool to boost productivity and creativity. The key is to embrace AI and use it to build better, smarter, and more efficient web applications.

A wise man once told me, "You cannot make wrong decisions if you have the courage to make them right." That mindset applies to AI in web development—by learning and adapting, we can make the most of these tools to enhance our work.

What are your thoughts on AI in web development? Have you used AI-powered tools in your projects? Let’s discuss in the comments! 🚀💬

How to Build a Portfolio That Stands Out as a New Developer

Mohammad Yasir — Sat, 25 Jan 2025 05:33:22 +0000

🌟🌐🚀

As a new developer, you’re eager to showcase your skills and make a strong impression in a competitive industry. Building a compelling portfolio is one of the best ways to demonstrate your expertise and creativity to potential employers or clients. Let’s explore how to create a portfolio that reflects your unique skills and passion.

Why Your Portfolio Matters

✨💻🎨

Your portfolio isn’t just a collection of projects; it’s a window into who you are as a developer. It’s the first place recruiters and clients look to understand your technical abilities, problem-solving skills, and creative approach. Think of your portfolio as your personal brand—it’s your chance to communicate what makes you unique and valuable.

Key Elements of a Great Portfolio

🧩📚💼

About Me Section: Share a concise summary of your journey. Talk about what drew you to coding, what areas you specialize in, and what excites you about solving problems through technology.

Featured Projects: Highlight three to five of your best projects. Include live links, screenshots, and a brief explanation of each project. Focus on challenges you faced and how you overcame them.

Technical Skills: Clearly list the programming languages, frameworks, and tools you’re proficient in, such as JavaScript, React, Node.js, or the MERN stack.

Contact Information: Make it easy for people to reach out. Include links to your email, LinkedIn, Twitter, or GitHub profile.

Designing for Impact

🎨🔍✨

A visually appealing and user-friendly design is essential for a standout portfolio. Keep the layout clean and intuitive, with consistent fonts and spacing. Use a modern color palette, but avoid overloading the page with too many elements. Your portfolio should not only look good but also provide an enjoyable browsing experience for users.

Real-World Example: My Portfolio

🌟🔗💻

To give you a tangible example, take a look at my own portfolio: codilad.dev(https://www.codilad.dev).

Here’s what I’ve prioritized in my portfolio:

Sleek, User-Friendly Design: I focused on creating a clean and modern aesthetic that aligns with contemporary web development standards.

Showcasing Top Projects: I’ve included detailed descriptions of my projects, along with live demos and visuals to make them engaging.

Highlighting Skills and Services: My portfolio outlines the technical skills I bring to the table and the types of projects I’m excited to work on.

Feel free to explore it for inspiration as you design your own portfolio. The goal is to make your portfolio a reflection of your skills and personality.

Tips for Making Your Portfolio Memorable

🧠📈💡

Keep It Updated: Regularly add new projects and skills as you grow in your career.

Infuse Personality: Your portfolio should reflect your unique style and voice.

Optimize for Mobile: Ensure your site is responsive and looks great on all devices.

Add Testimonials: If you’ve worked with clients or collaborated on projects, include their feedback to build credibility.

A Personal Reminder

📜💬✨

A wise man once told me, "You cannot make wrong directions if you have the courage to make them right." This quote, shared by my high school teacher, has become my guiding principle. It reminds me to embrace challenges and mistakes as opportunities to grow, both as a developer and as a person.

Final Thoughts

🚀📚🤝

Building a standout portfolio requires time and effort, but it’s one of the most rewarding investments you can make in your career. Your portfolio is more than a showcase of your work—it’s a story about your journey as a developer. Make it personal, professional, and polished, and it will serve as a powerful tool to open doors to exciting opportunities.

Start building, stay creative, and let your portfolio reflect the best version of you as a developer. The world is waiting to see what you can create. 🌍💪✨

Building Dreams with Code: My Path from Beginner to Full-Stack Developer

Mohammad Yasir — Sat, 18 Jan 2025 07:05:41 +0000

From Autodidact to Full-Stack: My Journey into Web Development and Freelancing

🌟🌐🚀

Two years ago, I embarked on a transformative journey as an autodidact in web development. Fueled by a passion for technology and problem-solving, I sought to turn curiosity into expertise. Today, equipped with the MERN stack, Kubernetes, Docker, and more, I’m entering the world of freelancing, eager to create impactful web applications for clients worldwide.

The Start of My Journey

✨💻🎨

Like many self-taught developers, my journey began with the basics: HTML, CSS, and JavaScript. The thrill of building my first webpage and personalizing its design was unparalleled. From there, I progressed to mastering frameworks like React and backend technologies such as Node.js, Express, and MongoDB—collectively forming the MERN stack that underpins many modern web applications.

My exploration extended into advanced technologies like Kubernetes and Docker, unlocking seamless application deployment and the world of containerization. These tools enriched my technical skillset and offered insight into efficient workflows essential in today’s tech landscape.

To remain ahead in a dynamic field, I prioritized continuous learning. Reading industry blogs, tackling coding challenges, and engaging with developer communities became integral to my growth. These efforts not only honed my skills but also connected me with a network of like-minded individuals, reinforcing the importance of collaboration. 🤝📚💡

A wise man once told me, "You cannot make wrong directions if you have the courage to make them right." These words from my high school teacher resonate with me deeply and drive my approach to every challenge.

Overcoming Challenges

🧗‍♂️💡📚

The road to becoming a developer wasn’t without its trials. Debugging intricate code, grasping complex backend concepts, and maintaining consistent progress tested my patience. However, these challenges became opportunities for growth, teaching me resilience and a problem-solving mindset. Breaking tasks into manageable steps proved invaluable, both in programming and life.

Motivational slumps were inevitable, but celebrating small victories—whether completing a project or learning a new concept—kept me moving forward. Each milestone, however small, served as a reminder of my progress and strengthened my resolve. 🎉✅💪

Why Freelancing?

🌍🤝🛠️

Freelancing offers a unique chance to work on diverse projects and make a tangible impact on clients’ goals. I’m especially passionate about collaborating with startups and small businesses to create modern, user-friendly applications that balance functionality with aesthetics.

Freelancing allows me to embrace multifaceted roles, from discussing project requirements to designing and implementing solutions. This holistic approach fosters continuous learning and aligns with my values of adaptability and persistence.

The principles I cultivated as an autodidact—delivering quality, remaining adaptable, and building trust—are integral to my freelancing philosophy. My mission goes beyond coding; I aim to forge meaningful, lasting client relationships. 🤝💼🌟

What’s Next?

🚀📈✍️

This is just the beginning of my freelancing journey. I’m eager to tackle projects that challenge me, from building responsive websites to deploying scalable applications. Every project is an opportunity to grow and refine my expertise.

Beyond freelancing, I plan to share my experiences through blogs and tutorials. By documenting my journey, I hope to inspire and guide aspiring developers. My vision is to cultivate a supportive community where knowledge and encouragement thrive. 📚✨🌱

Let’s connect and create something incredible! Whether you have a project idea, wish to collaborate, or simply want to chat about development, feel free to reach out.

🤝💬✨