DEV Community: Manas Patil

Understanding Backpropagation and Gradient Descent in Neural Networks

Manas Patil — Mon, 23 Jun 2025 17:02:03 +0000

Suppose you're building a neural network, maybe even a deep and complex one. You’ve set up the layers, initialized weights, and defined activation functions. But here's a question:

Can this neural network make accurate predictions without tuning?
The short answer: No.

Building a neural network is just the start, the real magic lies in fine-tuning its parameters (i.e., weights and biases) so it actually learns from the data.

Why Do We Need to Optimize Weights and Biases?

To make better predictions, we want the network to minimize the loss and maximize accuracy.

Fine-tuning means updating weights and biases over multiple epochs using feedback from the output (loss) to improve the next prediction. This continues until we reach a point of minimal loss.

But how exactly do we update the weights and biases?

Early (Inefficient) Ideas for Updating Weights

1. Random Weights & Biases

Try random values, compute the loss, and repeat the process until the lowest loss is achieved.

❌ This is inefficient and slow.

2. Guided Random Tweaks

Set random weights → calculate loss → try new weights close to the previous ones if loss decreases → stop if it doesn’t.

✅ Better than the first, but still not optimal.

Now let’s go one level higher...

Enter: Backpropagation + Gradient Descent

Let’s say we want to go downhill on a loss curve to reach the lowest point (minimum loss). To do this efficiently, we need to know:

The direction to move in → determined by the slope (derivative)
How much to move → controlled by the learning rate

This is where calculus enters the picture.

Gradient Descent — The Update Rule

To minimize the loss L, we update the weights and biases using:

$\eta \cdot \frac{\partial L}{\partial w}$

$\eta \cdot \frac{\partial L}{\partial b}$

Where:

$∂L∂w\frac{\partial L}{\partial w}$ = derivative of the loss with respect to weight

$∂L∂b\frac{\partial L}{\partial b}$ = derivative of the loss with respect to bias

But how do we get these derivatives?

That’s where Backpropagation comes in.

Backpropagation: Going Back to Learn Better

Let’s take an example:

A neural network with 3 neurons in the hidden layer
A single output neuron in the final layer
Loss function: Mean Squared Error → $L = (y_{pred}-y_{true})^2$

To update the weights, we apply the chain rule from calculus to compute the gradients.

Gradients for Hidden Layer Weights

Neuron 1

$∂L∂w11=∂L∂y∗∂y∂a1∗∂a1∂z1∗∂z1∂w11\frac{\partial L}{\partial w_{11}}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_1} * \frac{\partial a_1}{\partial z_1} * \frac{\partial z_1}{\partial w_{11}}$

$∂L∂w12=∂L∂y∗∂y∂a1∗∂a1∂z1∗∂z1∂w12\frac{\partial L}{\partial w_{12}}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_1} * \frac{\partial a_1}{\partial z_1} * \frac{\partial z_1}{\partial w_{12}}$

$∂L∂w13=∂L∂y∗∂y∂a1∗∂a1∂z1∗∂z1∂w13\frac{\partial L}{\partial w_{13}}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_1} * \frac{\partial a_1}{\partial z_1} * \frac{\partial z_1}{\partial w_{13}}$

$∂L∂w14=∂L∂y∗∂y∂a1∗∂a1∂z1∗∂z1∂w14\frac{\partial L}{\partial w_{14}}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_1} * \frac{\partial a_1}{\partial z_1} * \frac{\partial z_1}{\partial w_{14}}$

Neuron 2

$∂L∂w21=∂L∂y∗∂y∂a2∗∂a2∂z2∗∂z2∂w21\frac{\partial L}{\partial w_{21}}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_2} * \frac{\partial a_2}{\partial z_2} * \frac{\partial z_2}{\partial w_{21}}$

$∂L∂w22=∂L∂y∗∂y∂a2∗∂a2∂z2∗∂z2∂w22\frac{\partial L}{\partial w_{22}}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_2} * \frac{\partial a_2}{\partial z_2} * \frac{\partial z_2}{\partial w_{22}}$

$∂L∂w23=∂L∂y∗∂y∂a2∗∂a2∂z2∗∂z2∂w23\frac{\partial L}{\partial w_{23}}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_2} * \frac{\partial a_2}{\partial z_2} * \frac{\partial z_2}{\partial w_{23}}$

$∂L∂w24=∂L∂y∗∂y∂a2∗∂a2∂z2∗∂z2∂w24\frac{\partial L}{\partial w_{24}}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_2} * \frac{\partial a_2}{\partial z_2} * \frac{\partial z_2}{\partial w_{24}}$

Neuron 3

$∂L∂w31=∂L∂y∗∂y∂a3∗∂a3∂z3∗∂z3∂w31\frac{\partial L}{\partial w_{31}}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_3} * \frac{\partial a_3}{\partial z_3} * \frac{\partial z_3}{\partial w_{31}}$

$∂L∂w32=∂L∂y∗∂y∂a3∗∂a3∂z3∗∂z3∂w32\frac{\partial L}{\partial w_{32}}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_3} * \frac{\partial a_3}{\partial z_3} * \frac{\partial z_3}{\partial w_{32}}$

$∂L∂w33=∂L∂y∗∂y∂a3∗∂a3∂z3∗∂z3∂w33\frac{\partial L}{\partial w_{33}}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_3} * \frac{\partial a_3}{\partial z_3} * \frac{\partial z_3}{\partial w_{33}}$

$∂L∂w34=∂L∂y∗∂y∂a3∗∂a3∂z3∗∂z3∂w34\frac{\partial L}{\partial w_{34}}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_3} * \frac{\partial a_3}{\partial z_3} * \frac{\partial z_3}{\partial w_{34}}$

Note: For example, $w_{21}$ flows through neuron 2, so we apply the chain rule using neuron 2’s activation and output.

Gradients for Biases

Bias of Neuron 1

$∂L∂b1=∂L∂y∗∂y∂a1∗∂a1∂z1∗∂z1∂b1\frac{\partial L}{\partial b_1}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_1} * \frac{\partial a_1}{\partial z_1} * \frac{\partial z_1}{\partial b_1}$

Bias of Neuron 2

$∂L∂b2=∂L∂y∗∂y∂a2∗∂a2∂z2∗∂z2∂b2\frac{\partial L}{\partial b_2}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_2} * \frac{\partial a_2}{\partial z_2} * \frac{\partial z_2}{\partial b_2}$

Bias of Neuron 3

$∂L∂b3=∂L∂y∗∂y∂a3∗∂a3∂z3∗∂z3∂b3\frac{\partial L}{\partial b_3}=\frac{\partial L}{\partial y} * \frac{\partial y}{\partial a_3} * \frac{\partial a_3}{\partial z_3} * \frac{\partial z_3}{\partial b_3}$

🎯 We calculate these gradients by moving backward through the network — and that’s why the algorithm is called Backpropagation.

Applying Gradient Descent

Once we compute the gradients, we use the gradient descent update rule:

$\eta \cdot \frac{\partial L}{\partial w}$

$\eta \cdot \frac{\partial L}{\partial b}$

Where 0.05 is an example learning rate (you can adjust it).

After applying the update:

✅ Loss decreases
✅ Accuracy improves

Repeat this process across epochs to gradually optimize the model.

Before vs After Optimization

📍 Before Gradient Descent: You're sitting somewhere randomly on the loss curve.
📍 After One Update: You’ve moved closer to the local minimum.

This is the power of gradient descent — it helps your model learn how to learn.

Why This Matters

The heart of deep learning is optimization.
And the heart of optimization is:

Backpropagation + Gradient Descent

Without these, neural networks would just be complex calculators spitting out random values.

Thanks to backpropagation, networks can learn from their mistakes, and thanks to gradient descent, they can improve continuously.

React Context API Made Simple: What, Why & How I Use It in Real Projects

Manas Patil — Thu, 29 May 2025 22:24:37 +0000

🧠 Introduction

Suppose you're working on a large project and find yourself drilling props down multiple layers of components. And every time a prop needs to be updated, you repeat the same tedious process, updating it in every intermediate component. Isn't that frustrating?

Wouldn't it be great if you could store all your useState variables and helpful functions in one central place and access them anywhere in your app with a single line of code?

That’s exactly where the React Context API comes in. It eliminates the hassle of prop drilling and allows you to manage and share related state and logic more efficiently across your application.

❓ What Is React Context API?

If you've ever passed props through three or more components just to get them to a deeply nested child, the Context API is your rescue tool.

The React Context API provides a way to share values between components without having to pass props manually at every level. It fits well for managing global state like:

User authentication
App themes
Language settings
Firebase or API configs

⚙️ When (and Why) Should You Use It?

Use the Context API when you need to share state across multiple components, especially when they are deeply nested. It's great for global concerns that don’t change rapidly.

🔹 Real-world use cases:

Managing user authentication (login state, user data)
Toggling dark/light themes
Firebase or API configuration
Toasts or notifications
Managing related states in a modular way

⚠️ Avoid using it for frequently changing data like form inputs — it can lead to performance issues. For such cases, consider tools like Zustand, Redux, or Recoil.

🔨 Setting Up a Basic Context (Step-by-Step)

Let’s walk through setting up a UserContext for managing authentication:

Step 1: Create a `contexts` folder in your `src` directory

This helps in keeping your project organized.

Step 2: Create `UserProvider.jsx`

import { createContext, useState } from "react";

const UserContext = createContext(null);

const UserProvider = ({ children }) => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [userCredentials, setUserCredentials] = useState({});

  const createUser = () => { /* Firebase signup logic */ };
  const getUserDetails = () => { /* Fetch user data */ };
  const updateUserDetails = () => { /* Update user */ };
  const deleteUser = () => { /* Delete user */ };

  return (
    <UserContext.Provider value={{
      loggedIn,
      createUser,
      getUserDetails,
      updateUserDetails,
      deleteUser,
      userCredentials,
      setUserCredentials
    }}>
      {children}
    </UserContext.Provider>
  );
};

export { UserContext, UserProvider };

Step 3: Use Context in a Component

import React, { useContext } from "react";
import { UserContext } from "../../contexts/UserProvider";

const Profile = () => {
  const {
    getUserDetails,
    updateUserDetails,
    userCredentials,
    setUserCredentials
  } = useContext(UserContext);

  return (
    <div>
      {/* Use the functions and state */}
    </div>
  );
};

export default Profile;

🧩 How I Use Context in Real Projects (with Firebase)

In one of my real-world projects, ClassMantra: An AI-powered teaching assistant. I used the Context API to integrate Firebase logic.

🔗 Link to FirebaseProvider code

Here's what I used Context for:

User authentication and registration
Firestore operations: add, read, and delete assignments
Organizing all Firebase-related functions and state in one place for clean, reusable logic

This helped me avoid prop drilling and made Firebase access available app-wide with just one import.

⚡ Common Mistakes & Best Practices

Wrap your App with the Provider

import { UserProvider } from "./contexts/UserProvider";

function App() {
  return (
    <UserProvider>
      <FirebaseProvider>
        {/* Your application */}
      </FirebaseProvider>
    </UserProvider>
  );
}

Too many nested contexts (Solution: Compose or combine multiple contexts into a single provider component)
Using Context for fast-changing data. Frequent updates (like input values) can cause performance issues. Use local state or external state libraries for such cases.

✅ Final Thoughts

The React Context API is a powerful tool when used correctly. It simplifies global state management for things like user auth, themes, and shared logic — especially when your project scales.

Start small — try it for login state or theme toggling. Once you see how clean and manageable your app becomes, you’ll be glad you used it!

🔗 Live Demo & GitHub Repo

Live Application: ClassMantra
GitHub Repository: github.com/patilmanas04/ClassMantra

Boost Your React Projects with Firebase: Authentication, Firestore, and Hosting in One Go

Manas Patil — Mon, 19 May 2025 16:39:50 +0000

Imagine you're building a React web application. You want to let users sign up or log in, store their data securely, and finally host your app online. You might think you need to:

Set up a database (and pay for it)
Create a custom authentication system
Add features like Google, Facebook, or Microsoft login
Write backend code for all of this
Find a separate service to host the backend
Purchase a domain and find reliable hosting

That’s a lot of work! 😅 But what if I told you there’s a complete solution — and it's from Google

Yes, I’m talking about Firebase 🔥
Firebase is like a Swiss army knife for developers. It offers everything from authentication to databases and hosting — all in one place. In this post, I’ll walk you through how I integrated Firebase Authentication, Firestore, and Hosting into a React project — all in one smooth workflow.

🛠️ Setting Up Firebase

1. Create a Firebase Project

Go to the Firebase Console.
Click “Add Project” and follow the steps.
Enable Google Analytics (optional but recommended).

2. Add a Web App to Your Project

Once the project is created, choose the web app option.
Give it a nickname and register your app.
Firebase will provide SDK configuration — copy it.

3. Install Firebase in React

Run this command in your React project folder in the terminal:

npm install firebase

4. Initialize Firebase

Create a firebaseConfig.js file and paste your config like this:

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id",
  measurementId: "your-measurement-id"
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

🔐 Firebase Authentication in React

1. Enable Authentication

Go to Authentication → Sign-in Method
Enable Email/Password (and Google if needed)

2. Add Signup & Login Functionality

// auth.js
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();

export const registerUser = (email, password) => {
  return createUserWithEmailAndPassword(auth, email, password);
};

export const loginUser = (email, password) => {
  return signInWithEmailAndPassword(auth, email, password);
};

3. Add Google Authentication

import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";

const auth = getAuth();

export const signInWithGoogle = async () => {
  const googleProvider = new GoogleAuthProvider();
  const result = await signInWithPopup(auth, googleProvider);
  return result;
};

🔥 Firestore – Real-Time NoSQL Database

1. Enable Firestore

Go to Firestore Database → Create database
Choose default settings

2. Set Firestore Rules (for development only!)

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

⚠️ Don’t use true in production! This is only for development/testing.

3. Read & Write Data

import { getFirestore, collection, addDoc, getDocs } from "firebase/firestore";

const db = getFirestore();

export const addUserData = async (data) => {
  await addDoc(collection(db, "users"), data);
};

export const fetchUserData = async () => {
  const snapshot = await getDocs(collection(db, "users"));
  return snapshot.docs.map(doc => doc.data());
};

📝 You can explore more Firestore functions in the official docs.

🌍 Deploy React App with Firebase Hosting

1. Install Firebase CLI

npm install -g firebase-tools
firebase login

2. Initialize Firebase Hosting

firebase init

Select Hosting
Choose your Firebase project
Set the public directory to build
Choose yes for SPA support

3. Build & Deploy

npm run build
firebase deploy

✨ Final Thoughts

Firebase helped me simplify the entire development process. I was able to:

Set up auth without writing custom backend logic
Use Firestore for real-time data storage
Deploy the project within minutes using Firebase Hosting

And the best part? All of this is free (within generous usage limits). Firebase also provides AI & ML features like Text recognition, Face detection, Barcode scanning. These can be easily integrated with your apps!

💻 Real Project Built with Firebase

I recently built a project using Firebase, and it made development incredibly smooth. I could focus on the main application logic instead of spending time setting up auth systems and choosing the right database.
🔗 Project: ClassMantra
🔗 GitHub Repo: patilmanas04/GDG-Hack2skill-The-Genesis-Group

🧠 For Best Practices: Use Context API

If you're using Firebase in a React app, a great practice is to wrap your auth and database logic in a Firebase Context. This makes it easier to manage and access Firebase functionality across components.
📄 Example Firebase Context: Click here

Firebase Docs: firebase.google.com/docs

✅ Conclusion

Firebase is a full-stack platform for modern web apps and if you’re a React developer, it can seriously boost your productivity.

So next time you're starting a React project, give Firebase a try. It might just save you hours or even days of work! 🔥

What I Learned Building an AI-Powered Teacher Assistant for the GDG Solution Challenge 2025

Manas Patil — Sun, 11 May 2025 16:34:48 +0000

The Google Developer Student Clubs (GDSC) Solution Challenge is a hackathon-style event that encourages students to build innovative projects using Google technologies — all while solving real-world problems aligned with the United Nations Sustainable Development Goals (SDGs).

This year, I challenged myself to build something meaningful, something that could solve a real problem. I stumbled upon the Solution Challenge while scrolling through LinkedIn — and it instantly clicked. I brought together a passionate team, and we dived in.

🧠 The Problem We Chose to Solve

Our project addresses the issue of overburdened teachers and the lack of personalized feedback in classrooms. Many educators — especially in under-resourced institutions — juggle large student batches, leaving little time for one-on-one feedback. This affects both the teaching quality and student learning experience.

Our goal was to create an AI-powered teacher assistant that automates grading and generates personalized feedback — helping educators save time and enabling students to receive constructive guidance tailored to their performance.

This directly aligns with UN SDG 4: Quality Education — ensuring inclusive and equitable education for all.

🛠️ The Solution: ClassMantra

We built ClassMantra, a web application designed for both teachers and students. The platform provides separate dashboards for each user type and leverages Google’s Gemini API to provide AI-generated feedback and grading.

👩‍🏫 Teacher Dashboard Features:

Upload assignments with solutions and due dates by subject (e.g., Deep Learning, Compiler Design).
Manage and delete existing assignments.
View student submissions and AI-generated grading/feedback.
Make announcements to students.

👨‍🎓 Student Dashboard Features:

View pending assignments across all subjects.
See submitted assignments along with detailed feedback on each question — scored by accuracy, relevance, completeness, and an overall grade.
Filter assignments by subject for easier navigation.

🧑‍💻 Tech Stack

Frontend:

React
Material UI

Backend:

Firebase (Authentication + Firestore DB)
Express.js
Gemini API (Generative AI)

We integrated Gemini to analyze student answers and generate structured, question-wise feedback with scores.

🤝 Team Collaboration & Challenges

Our team:

Manas Patil (me) - Developer
Jitendra Suthar – Co-developer
Jatin Bendale – Design & Documentation
Nirali Rana – Design & Documentation

Initially, we faced coordination issues and time constraints — with college exams and submissions happening in parallel. But we pulled through. Communication improved, roles became clear, and with just 10 days left, we began full-time development.

✨ What I Learned

This challenge helped me grow both technically and personally:

💻 Tech Skills:

Used Material UI extensively to build the full UI.
Worked with Firebase for auth, data storage, and real-time updates.
Integrated Gemini API to automate grading and feedback generation.

💡 Soft Skills:

Team management under pressure
Effective time management
Fast-paced prototyping
Improved collaboration and leadership

📅 Final Thoughts

It all started on March 26, 2025. We had just 10% of the work done with 2 days to go. College deadlines were piling up. We were drained and close to giving up.

Then, on March 28, just for fun, Jitendra opened the submission portal — and we saw that the deadline had been extended by 10 days. That moment felt magical. We celebrated — not because we were done, but because we were determined.

For the next 10 days, we gave it our all — late nights, debugging marathons, and pure focus.

On April 6, 2025, at 11:30 PM — just 30 minutes before the final deadline — we submitted ClassMantra. And it felt incredible. Regardless of the results, we were proud.

This journey taught me that sometimes, the reward isn’t just a win — it’s the growth, the teamwork, and the perseverance.

🔗 Links

🔗 LinkedIn Post: Click here
🌐 Live Preview of ClassMantra: classmantra.netlify.app
💻 GitHub Repository: github.com/patilmanas04/GDG-Hack2skill-The-Genesis-Group
🎥 YouTube Video: Click here