DEV Community: pwnkdm

Building IIT Ropar’s Digital Future: The Story of Two Major Launches

pwnkdm — Mon, 21 Jul 2025 13:23:34 +0000

One Month, Two Platforms, and a Milestone I’ll Always Remember

Over the past few weeks, I had the opportunity to design and develop two important platforms for IIT Ropar: the CDPC (Career Development and Placement Centre) and the CAPS (Corporate, Alumni, Placement and Strategies) websites. Both platforms were launched on 16th July 2025 during the institute’s 14th Annual Convocation. It was a proud and unforgettable milestone in my journey.

As a developer, there is nothing more fulfilling than seeing your work go live. But watching it launch during a prestigious academic ceremony, in the presence of:

Mr. Shrikant M Vaidya, Former Chairman, Indian Oil Corporation Ltd (Chief Guest)

Mr. Adil Zainulbhai, Chairperson, Board of Governors, IIT Ropar

Prof. Rajeev Ahuja, Director, IIT Ropar

Prof. Pushpendra P. Singh, Dean, CAPS

made the experience even more special.

My Role in the Project
I built both platforms from the ground up using the MERN stack, handling everything from front-end design to back-end logic and deployment. This end-to-end development journey provided valuable insight into how institutional platforms are envisioned, designed, and delivered while meeting real-world expectations.

What These Platforms Represent
CDPC – Career Development and Placement Centre
A dedicated platform for student–industry engagement, mentoring, career readiness, and placement coordination.
👉 Visit CDPC Website

CAPS – Corporate, Alumni, Placement and Strategies
A collaborative interface focused on corporate engagement, alumni relations, student empowerment, and strategic partnerships.
👉 Visit CAPS Website

These platforms are more than just websites. They are tools that connect students with opportunities, ideas with industry, and alumni with meaningful engagement.

Looking Ahead
Completing this project on a tight timeline, collaborating with faculty and administrators, and delivering functional, scalable platforms has been a defining experience for me. It has sharpened my skills and expanded my understanding of building impactful digital solutions.

I am truly grateful for the opportunity to contribute to IIT Ropar and look forward to the continued impact these platforms will create.

More projects and experiences are on the horizon.

Fun with JavaScript: Changing Page Titles Dynamically

pwnkdm — Thu, 03 Apr 2025 16:32:22 +0000

Have you ever noticed how some websites change their page title when you switch tabs? It's a simple yet clever trick to grab a user's attention. Let’s explore how you can achieve this effect using just a few lines of JavaScript.

The Magic Behind `visibilitychange`

The visibilitychange event in JavaScript fires whenever a user switches between tabs or minimizes the browser window. Using this, we can dynamically update the document title based on the tab’s visibility state.

Here's the code:



document.addEventListener("visibilitychange", function () {
    if (document.hidden) {
      document.title = "I'm a lonely tab 😢";
    } else {
      document.title = "Welcome back 😊";
    }
  });

How It Works

The document.addEventListener listens for the "visibilitychange" event.
When the tab is hidden (document.hidden is true), the title changes to "I'm a lonely tab 😢".
When the user returns to the tab, the title is restored to "Welcome back 😊".

Why Use This?

Engagement: This trick can remind users to return to your site.

Branding: Custom messages can enhance your site's personality.

User Experience: Fun, interactive elements make websites more enjoyable.

Try adding this snippet to your website and see how it works!

Fixing Routing Issues in Vite React App on Vercel

pwnkdm — Sun, 09 Mar 2025 18:35:00 +0000

Deploying a Vite React app on Vercel is straightforward, but many developers face a common issue: navigating to another page and refreshing results in a 404 error. This happens because Vercel serves only index.html and doesn't recognize client-side routing handled by React Router.

The Problem

When using React Router, routes are managed on the client-side. However, Vercel doesn’t know how to handle these routes after a refresh, leading to a 404 error.

The Solution: Configure `vercel.json`

To fix this, create a vercel.json file inside your frontend root directory (same level as index.html) and add the following:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Explanation of `vercel.json`

rewrites: Defines URL rewriting rules.
source: "/(.*)" captures all routes.
destination: Redirects all requests to index.html, allowing React Router to handle routing.

Deploy Again

After adding vercel.json, redeploy your Vite app using:

vercel --prod

Now, navigating and refreshing pages will work without 404 errors. 🎉

This simple fix ensures your Vite React app works smoothly with React Router on Vercel. Happy coding! 🚀

The Ultimate Guide to Deploying a Node.js Express MongoDB Backend on Vercel

pwnkdm — Sun, 09 Mar 2025 04:02:31 +0000

Deploying a Node.js + Express + MongoDB backend on Vercel can sometimes be tricky, especially when dealing with different folder structures. This guide provides a detailed breakdown, with a special focus on configuring the vercel.json file correctly to avoid deployment errors.

Prerequisites

Before we begin, make sure you have the following:

Node.js installed on your local machine.
MongoDB Atlas account (or any cloud MongoDB instance).
GitHub/GitLab/Bitbucket account for repository hosting.
Vercel account (sign up at vercel.com).

Step 1: Set Up Your Express.js Project

If you don’t have an existing project, create a new one:

mkdir express-vercel-backend && cd express-vercel-backend
npm init -y

Install required dependencies:

npm install express mongoose dotenv cors

Create an index.js file and set up a basic Express server:

const express = require("express");
const mongoose = require("mongoose");
const dotenv = require("dotenv");
const cors = require("cors");

dotenv.config();

const app = express();
app.use(express.json());
app.use(cors());

// Connect to MongoDB
mongoose.connect(process.env.MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
})
.then(() => console.log("MongoDB Connected"))
.catch(err => console.log(err));

app.get("/", (req, res) => {
  res.send("Hello from Express!");
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Step 2: Configure MongoDB Atlas

Sign up at MongoDB Atlas and create a free cluster.
In the database section, click Connect > Connect your application.
Copy the provided connection string and replace <password> with your actual password.
Create a .env file in your project root and add:

MONGO_URI=mongodb+srv://your-username:your-password@cluster.mongodb.net/your-database-name

Step 3: Understanding and Configuring `vercel.json`

Common Deployment Errors Due to Folder Structure

Different projects have different folder structures, and incorrect configurations in vercel.json can cause deployment failures. Based on the image provided, your backend folder structure is as follows:

MY-APP/
├── backend/
│   ├── controllers/
│   ├── email/
│   ├── middlewares/
│   ├── models/
│   ├── routes/
│   ├── .env
│   ├── index.js
│   ├── package.json
│   ├── package-lock.json
│   ├── vercel.json
├── frontend/
├── README.md

Updated `vercel.json` Configuration

Based on this structure, your vercel.json should look like this:

{
  "version": 2,  // Specifies the Vercel configuration version.
  "builds": [
    {
      "src": "index.js", // Defines the entry point for the backend.
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/routes/(.*)", // Routes requests that start with '/routes' to index.js.
      "dest": "index.js"
    },
    {
      "src": "/(.*)", // Routes all other requests to index.js.
      "dest": "index.js"
    }
  ]
}

Key Differences from a Basic `vercel.json`

Configuration	Basic Version	Improved Version (Your Project)
Routes	`{ "src": "/(.*)", "dest": "index.js" }`	`{ "src": "/routes/(.)", "dest": "index.js" }` + `{ "src": "/(.)", "dest": "index.js" }`
Purpose	Routes all requests to `index.js`	Routes `/routes/...` requests separately to ensure correct handling
Folder Handling	Assumes all endpoints are in `index.js`	Supports organized project structures with `/routes/`

This ensures that APIs under /routes (like /routes/users or /routes/expenses) are correctly mapped to index.js in your backend.

Step 4: Modify package.json for Vercel

Vercel automatically detects frontend frameworks like React and Next.js, but for backend apps, we need to configure it explicitly.

Modify your package.json to include a vercel-start script:

"scripts": {
  "start": "node index.js", // Default script to run the server locally.
  "vercel-start": "node index.js" // Custom script for Vercel deployment.
}

Step 5: Deploy on Vercel

1. Install Vercel CLI

npm install -g vercel

2. Login to Vercel

vercel login

3. Initialize Vercel

Run the following command and follow the prompts:

vercel

4. Set Environment Variables

Go to Vercel Dashboard > Project Settings > Environment Variables and add:

MONGO_URI=mongodb+srv://your-username:your-password@cluster.mongodb.net/your-database-name

Then redeploy your project:

vercel --prod

Step 6: Test Your Deployment

Once deployed, Vercel will provide a live URL (e.g., https://express-vercel-backend.vercel.app). Test your API by visiting:

https://your-vercel-url.com/

Or using Postman or curl:

curl https://your-vercel-url.com/

Conclusion

You have successfully deployed a Node.js Express MongoDB backend on Vercel! 🎉

Key Takeaways:

Folder structure plays a crucial role in deployment success.
Configuring vercel.json correctly avoids routing errors.
Environment variables must be set manually in Vercel for secure database connections.

Next Steps:

Implement authentication (e.g., JWT).
Connect this backend with a frontend (React, Next.js, etc.).
Add more API routes and deploy updates.

Enjoy coding! 🚀

Implementing "Forgot Password" with MongoDB: A Step-by-Step Guide

pwnkdm — Fri, 07 Mar 2025 04:47:30 +0000

A "Forgot Password" feature is essential for any user authentication system. It enhances user experience and security by allowing users to reset their passwords safely. In this guide, we’ll walk through implementing this feature using MongoDB, Node.js, Express, and JWT (JSON Web Token).

Prerequisites
Before we begin, ensure you have:

Node.js & npm installed
MongoDB set up (local or cloud-based like MongoDB Atlas)
Basic knowledge of Express & JWT

Step 1: Set Up Your Project
Initialize a new Node.js project:

mkdir forgot-password && cd forgot-password
npm init -y

Install required dependencies:

npm install express mongoose dotenv jsonwebtoken bcryptjs nodemailer cors body-parser

Step 2: Configure MongoDB & Express
Create an .env file to store database credentials:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
EMAIL_USER=your_email@example.com
EMAIL_PASS=your_email_password

Set up Express and MongoDB connection in server.js:

const express = require("express");
const mongoose = require("mongoose");
require("dotenv").config();

const app = express();
app.use(express.json());

mongoose.connect(process.env.MONGO_URI)
    .then(() => console.log("MongoDB Connected"))
    .catch(err => console.error(err));

app.listen(5000, () => console.log("Server running on port 5000"));

Step 3: Create the User Model
Define a User schema in models/User.js:

const mongoose = require("mongoose");

const UserSchema = new mongoose.Schema({
    email: { type: String, required: true, unique: true },
    password: { type: String, required: true },
    resetToken: { type: String, default: null },
    resetTokenExpiry: { type: Date, default: null }
});

module.exports = mongoose.model("User", UserSchema);

Step 4: Implement the Password Reset Flow
1️⃣ Generate Reset Token
Create an endpoint in routes/auth.js to send a reset email:

const express = require("express");
const User = require("../models/User");
const jwt = require("jsonwebtoken");
const nodemailer = require("nodemailer");

const router = express.Router();

router.post("/forgot-password", async (req, res) => {
    const { email } = req.body;
    const user = await User.findOne({ email });

    if (!user) return res.status(404).json({ message: "User not found" });

    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: "1h" });

    user.resetToken = token;
    user.resetTokenExpiry = Date.now() + 3600000; // 1 hour
    await user.save();

    // Email setup
    const transporter = nodemailer.createTransport({
        service: "gmail",
        auth: {
            user: process.env.EMAIL_USER,
            pass: process.env.EMAIL_PASS
        }
    });

    const mailOptions = {
        to: user.email,
        subject: "Password Reset",
        text: `Click the link to reset your password: http://localhost:3000/reset-password/${token}`
    };

    await transporter.sendMail(mailOptions);

    res.json({ message: "Reset link sent to email" });
});

module.exports = router;

2️⃣ Reset Password
Create an endpoint to reset the password:

router.post("/reset-password", async (req, res) => {
    const { token, newPassword } = req.body;

    try {
        const decoded = jwt.verify(token, process.env.JWT_SECRET);
        const user = await User.findOne({ _id: decoded.id, resetToken: token });

        if (!user || user.resetTokenExpiry < Date.now()) {
            return res.status(400).json({ message: "Invalid or expired token" });
        }

        user.password = require("bcryptjs").hashSync(newPassword, 10);
        user.resetToken = null;
        user.resetTokenExpiry = null;
        await user.save();

        res.json({ message: "Password reset successful" });
    } catch (err) {
        res.status(400).json({ message: "Invalid token" });
    }
});

module.exports = router;

Step 5: Test the Implementation
Send a POST request to /forgot-password with { "email": "user@example.com" }.
Check your email for the reset link.
Send a POST request to /reset-password with { "token": "received_token", "newPassword": "new_secure_password" }.

Conclusion
You’ve successfully implemented a secure password reset feature with MongoDB, Node.js, and Express. This approach ensures security by validating tokens, hashing passwords, and setting expiration times.

🚀 Next Steps? Implement front-end integration and improve security with rate limiting and better email templates!