DEV Community: Shreyash Srivastava

Bad things might happen if you ignore this

Shreyash Srivastava — Thu, 18 Sep 2025 09:37:21 +0000

Hello Everyone! 👋🏻

I’m Shreyash Srivastava, a 2nd year CSE student at DSCE and yes it's time for another blog. A lot of things happened in last few months, So before I begin I will just share this image here:

A Quick Catch-Up

I was awarded LiFT Scholarship from Linux foundation, was working on a project for our club (check it out!) also I recently got an internship at an early stage startup and got the opportunity to work with one of my seniors at Pointblank.
The company basically provides a platform for educators and students. Teachers can create assignments, activities, and other learning materials using interesting AI features like image generation, case study analysis, and presentation makers. Students can then use these materials to practice, learn, and receive personalized feedback. We also have a community page where teachers can share their creations with a wider audience.
So, One of the first tasks that I was assigned was to implement a credit system to limit the AI usage in our product. Until then, users on any plan could use our AI features an unlimited number of times. So my job was to introduce limits to manage the usage.

My Approach

In order to implement this feature what I thought of was to create a tokens collections(as we were using firebase) which will consists of userId, plan and the number of credits/tokens a user has.
And created a custom hook which will check if the user has tokens to make a request and it will also help in deducting the tokens after every successful call.

Now what I did was, wherever the call to our AI service was made I added a check to see the number of tokens the user has and deducted the credits after every successful call, and wherever the function was called i made sure that it will pass the userId from frontend and will authenticate the user at backend with help of that userId so I can check if the user exists or has the credits or not.
I made the changes and raised the PR to our development environment it was merged and everything was working, sounds too good right? Lol here comes the fun part....

The Chaos

It was 1:09 AM in night, I was going to sleep and then I received some messages,

Yes, The production was down. (Remember the T-shirt xD)
So, what happened was as my senior (who was in a hackathon at that time) was busy, I myself pushed some changes to both repositories and I didn't know that We DO NOT have development/staging branch for backend repository and we were using this for both production and development environment T-T.

The Issue

As I mentioned earlier what I did was pass the userId to backend in order to verify if the user exists in our database or not, right? But now as the frontend changes were not in production environment and I pushed my changes in backend it was expecting userId to be passed and due to this it was unable to find the user and the entire service was down T-T

Aftermath

In order to fix this, we immediately reverted the backend changes to get the platform back online. And after a proper round of testing with both the new frontend and backend on a staging environment, we successfully rolled out the credit system.
We also created a separate staging branch to ensure this thing never happens again. It was also a great learning experience for me as I'll never forget: Always Ask, Never Assume. I should have confirmed once before pushing the changes.
And after that everything went fine, it was all good and happy.
(I again crashed prod after two days as I forgot to create token documents for existing users in production database)

Swagger? What’s that?

Shreyash Srivastava — Fri, 25 Apr 2025 06:47:41 +0000

Hello Everyone! 👋🏻

I’m Shreyash Srivastava, a 1st-year CSE student at DSCE and I’m back again with a new blog! (You can also check my previous one here)

So the main inspiration behind this blog was I recently worked on an issue with a friend of mine, which was a new one for us so I wanted to share my experience and how I was able to solve it ! (Also my first sem just ended and I was free :P). Let’s begin…

Documenting APIs is one of the most important aspects of building scalable and maintainable web applications. Recently, We were given a task of adding Swagger documentation to a Next.js website. And before that we need to know some basics:

What is an API?

At its core, an API (Application Programming Interface) is a set of rules that allows different software applications to communicate with one another. It defines how data is exchanged between systems, including the methods used to request and send data. APIs are crucial in modern web development, allowing services to interact with each other seamlessly.

What are API Endpoints?

API endpoints are like doorways through which we access various functionalities within an API. Each endpoint corresponds to a specific URL that serves a particular function or resource. For instance, in a blogging platform, your API might have these endpoints:

GET /posts – Retrieve a list of all blog posts
POST /posts – Create a new blog post
GET /posts/{id} – Fetch a specific blog post by ID Endpoints are the building blocks of an API, and documenting them is critical for ensuring other developers can use your API effectively.

What is Swagger?

Swagger is an open-source framework designed for building and documenting RESTful APIs. It gives us a user-friendly interface to visualize and interact with our API endpoints. Swagger documentation is usually written in the OpenAPI Specification (previously known as Swagger Specification), a standardized format for describing REST APIs.

With Swagger, we can:

Automatically generate comprehensive API documentation.
Test API endpoints directly from the documentation.
Share API specifications with your team or external developers.

Swagger documentation is essential for a few key reasons:

For API Consumers: Developers can easily understand how to use your API.
For Testing: You can test your endpoints directly from the documentation.
For Maintainability: Keeping your API documentation updated is much simpler with Swagger.

How to Add Swagger in Next.js

Next.js is a powerful React framework for building server-rendered applications. Adding Swagger to a Next.js app involves a few steps:

Installing necessary dependencies
Adding Swagger annotations to your API routes
Generating a Swagger JSON file
Setting up middleware or a library to serve the Swagger UI

Our Process: Adding Comments and Creating a swagger.ts File

The first thing was adding JSDoc comments to all the API routes. These comments describe the purpose, parameters, and responses for each endpoint. For instance, in this route.ts file for the /api/members endpoint, my friend added the Swagger annotations like this:

/**
 * @swagger
 * /api/members:
 *   get:
 *     summary: Retrieve all members
 *     description: Fetches all members from the database and returns their details.
 *     tags:
 *      - Members
 *     responses:
 *       200:
 *         description: A list of all members
 *         content:
 *           application/json:
 *             schema:
 *               type: array
 *               items:
 *                 type: object
 *                 properties:
 *                   id:
 *                     type: string
 *                   name:
 *                     type: string
 *                   role:
 *                     type: string
 *                   company:
 *                     type: string
 *                   year:
 *                     type: string
 *                   linkedInUrl:
 *                     type: string
 *                   imageUrl:
 *                     type: string
 *       500:
 *         description: Internal server error
 */
export async function GET() {
  // Implementation here...
}

Once the comments were to all the routes, we need to consolidated the Swagger definitions into a single swagger.ts file. I used the next-swagger-doc library to generate the Swagger specification like so:

import { createSwaggerSpec } from 'next-swagger-doc';
export const swaggerOptions = {
  definition: {
    openapi: '3.0.0',
    info: {
      title: 'Next.js API Documentation',
      version: '1.0.0',
      description: 'API documentation for the application endpoints',
    },
    servers: [
      { url: 'http://localhost:3000', description: 'Development server' },
    ],
    tags: [
      { name: 'Members', description: 'Member data management endpoints' },
      //all the tags should be added here...............    
],
  },
  apis: ['./app/(default)/api/members/route.ts'],
      //all the apis used........
};
export const getApiDocs = async () => {
  return createSwaggerSpec(swaggerOptions);
};

In this file, I set up the basic structure for the Swagger documentation — such as the API title, version, and server URL — and pointed to the locations of the API routes with Swagger annotations.

The Middleware Solution

Now, here’s where things got tricky. Next.js doesn’t natively serve Swagger documentation out of the box. I needed to find a way to expose the Swagger JSON file through an endpoint like /api/docs.

To solve this, I created a route.ts file that generates and serves the Swagger JSON:

import { getApiDocs } from '@/lib/swagger';
import { NextResponse } from 'next/server';
export async function GET(request: Request) {
  try {
    const spec = await getApiDocs();
    return NextResponse.json(spec, {
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
      },
    });
  } catch (error) {
    console.error('Error generating API docs:', error);
    return NextResponse.json(
      { error: 'Failed to generate API documentation' },
      { status: 500 }
    );
  }
}

The middleware makes sure that the Swagger JSON is available at the /api/docs endpoint. But I ran into a CORS issue while trying to access the Swagger JSON. To fix this, I created a middleware that sets the correct headers for CORS:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/api/docs') {
    return NextResponse.next({
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
      },
    });
  }
  return NextResponse.next();
}

With this, the /api/docs route was working fine, and I was able to handle cross-origin requests without issues.

Displaying API Endpoints as JSON

After setting up the middleware, visiting /api/docs returned the Swagger JSON. This JSON followed the OpenAPI Specification and contained all the details I had defined in the JSDoc comments. It became the foundation for generating a Swagger UI.

Wrapping Everything with `next-swagger`

Next, I wanted to make the Swagger documentation more interactive and visually appealing. I used the next-swagger module, which wraps the Swagger JSON and provides a beautiful, interactive UI for the documentation.

Here’s how I set it up:

Install the library:

npm install next-swagger

Create a Dynamic Swagger UI Component

Since the swagger-ui-react library is not compatible with server-side rendering (SSR), I used dynamic imports to load the SwaggerUIcomponent only on the client side. Here’s how I did it in the page.tsx file:

const SwaggerUI = dynamic(() => import("swagger-ui-react"), {
  ssr: false,
  loading: () => <p>Loading API Documentation...</p>,
});

Fetch Swagger JSON and Render the UI

In the page.tsx file, I fetched the Swagger JSON from the /api/docs endpoint and rendered it using the SwaggerUI component:

export default function ApiDoc() {
  const [swaggerConfig, setSwaggerConfig] = useState<any>(null);
  useEffect(() => {
    fetch("/api/docs")
      .then((res) => res.json())
      .then((data) => setSwaggerConfig(data));
  }, []);
  if (!swaggerConfig) return <p>Loading API documentation...</p>;
  return (
    <div className="swagger-wrapper">
      <SwaggerUI spec={swaggerConfig} />
    </div>
  );
}

Now, visiting /swagger would display an interactive Swagger UI, allowing users to explore and test the API endpoints right from the documentation.

Creating `layout.tsx` for Swagger UI

To render the Swagger UI within the Next.js app.

layout.tsx to define the layout:

export default function SwaggerLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body style={{ margin: 0, padding: 0 }}>{children}</body>
    </html>
  );
}

With these files, the Swagger documentation was neatly integrated into the Next.js app, providing a polished, user-friendly experience for API consumers.

Conclusion

Adding Swagger documentation to the website was a rewarding experience. It not only made the code more maintainable but also made it easier for other developers to understand and use the APIs. Here’s a quick recap of what we did:

If you’re working on a Next.js project, I highly recommend integrating Swagger documentation. It’s a small effort that can go a long way in making your API more usable and easier to maintain. Happy coding!

Feel free to share your thoughts or questions in the comments below. If you’ve already added Swagger to your project, I’d love to hear about your experience!

My Experience Participating in KWoC

Shreyash Srivastava — Fri, 25 Apr 2025 06:16:24 +0000

Hello Everyone! 👋🏻

I’m Shreyash Srivastava, a 1st-year CSE student at DSCE. This is my first blog. So, here’s the thing: I participated in Kharagpur Winter of Code and it was such great experience that I wanted to share it.

The idea for this blog came to me as I saw my seniors writing blogs about the things they are doing and as it was important for KWoC, So here it is:

Introduction to KWoC

Kharagpur Winter of Code (KWoC) is a 5-week long online program for students who are new to open source software development. The program not only helps students to get involved in open source, but also prepares them for many open source summer programs; Google Summer of Code being one of them.

Choosing a Project

The first step in KWoC was to explore the list of projects. The variety was overwhelming, ranging from web development to kernel systems and everything in between. I chose a web development project as I already had some experience in this field.

Projects worked on:

Eventica

First Steps and Challenges

Starting with an open-source project can be intimidating. The first task was to set up the development environment and understand the codebase. This involved reading the documentation, exploring the project’s structure, and sometimes even fixing setup-related issues.

Learnings

Version Control: Gained proficiency in Git and GitHub, learning how to manage branches, resolve conflicts, and contribute via pull requests, which made collaborating on open-source projects seamless.

Communication: Improved my ability to frame technical problems and solutions clearly, enabling better collaboration with mentors.

Problem-Solving: Enhanced my debugging skills, learning to approach and resolve issues methodically and creatively across different aspects of the project.

CSS: Deepened my understanding of CSS, including using variables for consistent design, applying animations, and enhancing user interfaces with shadows to create a polished look.

Responsive Design: Mastered the use of media queries to ensure websites adapt to various screen sizes, improving user experience across devices.

JavaScript: Strengthened my JavaScript skills, particularly in handling interactive elements like toggling menus and other user interactions efficiently.

Open-Source Workflow: Learned the full open-source contribution process, from identifying issues to submitting pull requests, giving me insight into how collaborative development works in real-world projects.

Pull Requests and Issues Worked On

PRs Raised: 3

Issues Worked On:

Enhancing Send Message Button:

The website had a theme switcher feature, but the send message button was not following it. I fixed this by adding var( — primary-color) to ensure consistency and further enhanced the button with shadows and click animations. Working on this issue as my first PR introduced me to the workflow of using Git and GitHub effectively, including creating branches, committing changes, and submitting a pull request.

Enhanced the send message button #18

ShreyashSri posted on Dec 17, 2024

Fixes Issue🛠️

Closes #15

Description👨‍💻

Modified the Send message button on Contact Us page
Send message button now follows the website theme
Added transition on hover and clicks

Type of Change📄

[x] Style (non-breaking change which improves website style or formatting)

Checklist✅

[x] I am an Open Source contributor
[x] I have performed a self-review of my code
[x] My code follows the style guidelines of this project

Screenshots/GIF📷

https://github.com/user-attachments/assets/a2019667-3b91-4c7e-be3f-2f4e56b4de19

View on GitHub

Making the Website Fully Responsive:

The website’s containers were messy on smaller devices, and the header would lose its fixed position. I resolved this by adding a hamburger menu for navigation on smaller screens and used the @media tag for responsiveness. Also implemented JavaScript to enhance the interactivity of the hamburger menu. This PR taught me the importance of responsive design and how to debug layout issues efficiently.

Made the website fully responsive #24

ShreyashSri posted on Dec 25, 2024

Fixes Issue🛠️

Closes #1

Description👨‍💻

Implemented responsive design for improved user experience on various devices
Fixed issues with navigation bar overlapping
Added navigation button for smaller devices
Fixed the issue with about page content coming out of container

Type of Change📄

[x] Style (non-breaking change which improves website style or formatting)
[x] Responsiveness (non-breaking change which improves UI/UX on different screen sizes)

Checklist✅

[x] I am an Open Source contributor
[x] I have performed a self-review of my code
[x] My code follows the style guidelines of this project

Screenshots/GIF📷

Before

https://github.com/user-attachments/assets/00bec4e3-7295-48de-9206-ecb4b5a824eb

After

https://github.com/user-attachments/assets/1d62a81b-7d10-48f8-ba8f-a7b2ded5e23c

View on GitHub

Fixing the Hamburger Icon Not Showing Close Button:

The hamburger icon didn’t had a close button, which created confusion for users. I addressed this by adding a close button to the menu and writing JavaScript to close the menu when users clicked the button or anywhere outside the menu. This PR highlighted the importance of user-friendly interfaces and handling edge cases in functionality.

Fixed the hamburger icon not showing close button #68

ShreyashSri posted on Jan 14, 2025

Fixes Issue🛠️

Closes #17

Description👨‍💻

Added close button for hamburger icon
Enhanced the hamburger menu by adding animation like slide-in
Fixed issue with hamburger not closing on clicking outside

Type of Change📄

[x] Bug fix (non-breaking change which fixes a bug)

Checklist✅

[x] I am an Open Source contributor
[x] I have performed a self-review of my code
[x] My code follows the style guidelines of this project

Screenshots/GIF📷

Before:

After:

View on GitHub

The Community and Support

One of the highlights of KWoC was the community. The mentors were incredibly supportive and patient, guiding us through the process without making us feel overwhelmed. Fellow participants were equally enthusiastic, and the collaborative environment made the experience enjoyable.

Takeaways

Participating in KWoC was a transformative experience. It not only enhanced my technical skills but also boosted my confidence in contributing to open source. I learnt the way of communicating with mentors and all the people associated with this.

Conclusion

KWoC is more than just a coding program; it’s a platform to grow, learn, and connect with like-minded individuals. If you’re passionate about coding and eager to explore open-source, I highly recommend participating in KWoC. It’s an experience you’ll cherish for a lifetime!

DEV Community: Shreyash Srivastava

Bad things might happen if you ignore this

Hello Everyone! 👋🏻

A Quick Catch-Up

My Approach

The Chaos

The Issue

Aftermath

Swagger? What’s that?

Hello Everyone! 👋🏻

What is an API?

What are API Endpoints?

What is Swagger?

How to Add Swagger in Next.js

Our Process: Adding Comments and Creating a swagger.ts File

The Middleware Solution

Displaying API Endpoints as JSON

Wrapping Everything with next-swagger

Creating layout.tsx for Swagger UI

Conclusion

My Experience Participating in KWoC

Hello Everyone! 👋🏻

Introduction to KWoC

Choosing a Project

Projects worked on:

First Steps and Challenges

Learnings

Pull Requests and Issues Worked On

Enhanced the send message button #18

Fixes Issue🛠️

Description👨‍💻

Type of Change📄

Checklist✅

Screenshots/GIF📷

Made the website fully responsive #24

Fixes Issue🛠️

Description👨‍💻

Type of Change📄

Checklist✅

Screenshots/GIF📷

Before

After

Fixed the hamburger icon not showing close button #68

Fixes Issue🛠️

Description👨‍💻

Type of Change📄

Checklist✅

Screenshots/GIF📷

Before:

After:

The Community and Support

Takeaways

Conclusion

Wrapping Everything with `next-swagger`

Creating `layout.tsx` for Swagger UI