DEV Community: Shubham Bhilare

Build Portfolio Website in Seconds

Shubham Bhilare — Mon, 29 Sep 2025 09:07:59 +0000

⚡ Big news!
GitFolio is FREE to try with ALL templates unlocked – build your dev portfolio and launch it instantly 🌎✨
🚀 Get started 👉 GitFolioExplore All Templates for Free

No Coding , No Debugging 🫣

New Portfolio Template

Shubham Bhilare — Fri, 12 Sep 2025 21:47:45 +0000

Added a New template to GitFolio
Built for developers who'd rather code than design — we make your GitHub shine so you can focus on building.

Template named Clean Slate
A minimal light/dark mode portfolio site that focuses on projects.

Here's the official tweet

// Detect dark theme var iframe = document.getElementById('tweet-1966614271716192770-922'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1966614271716192770&theme=dark" }

You can see a demo portfolio here

If you like Do visit GitFolio

Render.com Latency Fix

Shubham Bhilare — Thu, 14 Aug 2025 09:10:05 +0000

Render free tier (Hobby Projects) is good for development but when it comes to prod it sucks.
It clearly states that

Your free instance will spin down with inactivity, which can delay requests by 50 seconds or more.

and 50 secs is a terrible amount of latency 😥

So to tackle this on free tier i have setup a uptime service using Uptime Robot

This platform pings your service every 5 mins (free tier) and if you want to cut this time further then you can upgrade your account

Simply create a monitor and enter your "/" or "/health" endpoint and your instance will get a req every 5 min

Problem Solved ✅

GitFolio - Dev Portfolio in Seconds

Shubham Bhilare — Sun, 03 Aug 2025 12:22:41 +0000

👋Introduction

As a developer all we have is our Github porfile! We spend hours building our products, do open-source and pushing to prod... but when its time to show our work, all we have is the same github profile.

So to solve this problem, I'll like to introduce you to GitFolio with the vision of "Turning Your Github Profile into Portfolio Sites in Seconds."
*No coding, No Markdown. Just Connect your *Github,select a template, and boom 💥 your site is live✅.

🚀 What is GitFolio?

GitFolio is a free to use platform that helps you showcase your Github profile in an amazing way !

Because Your GitHub already tells your story — now turnit into a personal site that speaks for itself

Why I Built GitFolio ?

I've seen many developers, including myself ignoring making personal portfolio sites. Rather than that they focus on building new projects/products.
They do not want to invest time in making portfolio websites and maintaining it.
Meanwhile, Github already contains 90% of your data, projects, skills, contributions and many more...
So why not use it ?

So I thought of making a platform that'll help developers including myself , in creating and maintaining of the personal portfolio _site with a live hosted URl just by connecting Github! .

Sample Portfolio

How it Works ⚙️

Connect your Github account.
(read-only-access ||no scary permissions and private repos initially)
Pick a Template
(Clean modern responsive templates available - currently launching with 1 template)
Done ✅ - You're Live
(Copy your public access link or just visit your portfolio.)

Features

GitHub-powered Data
Personal Dashboard for necessary changes.
Clean , mobile-responsive templates. (Currently only 1 available)
Instant deploy (no build process, ready within seconds !)
Shareable public links

Who It's For?

All Developer Community
Students applying for internships
Anyone who has got less time and need a portfolio on urgent basis
Every developer who wants their online presence

Whats Upcoming?

Multiple templates
Real time data - sync from Github
Auto Generated SEO support and many more ...

If you’ve got a GitHub, you’ve already got a portfolio — GitFolio just brings it to life.

Help Me Improve It 📢

GitFolio is still in its early MVP phase.
I’d love feedback, suggestions, and early users!
Connect on Linkedin
Connect on Twitter

Final Thoughts 💬

In a world where “you are what you ship,” your portfolio matters.

GitFolio helps you show what you’ve built — without building the portfolio itself.

If you try it, tweet me or tag me with your portfolio — I’d love to share it.
Let’s help more devs put themselves out there. 🚀

Gitfolio - From GitHub to Portfolio.

Turn Your GitHub Into a Personal Portfolio in Seconds. Built for developers who'd rather code than design — we make your GitHub shine so you can focus on building.

gitfolio.in

Mastering AWS S3 with JavaScript: S3Client Config & Most Useful Commands 🚀

Shubham Bhilare — Thu, 05 Jun 2025 07:43:20 +0000

Whether you're building a full-stack app or managing static assets, Amazon S3 is a go-to service for scalable storage. In this post, we’ll break down:

📦 S3Client setup (with @aws-sdk/client-s3)
⚙️ Most useful operations: creating/deleting buckets, uploading/downloading files
🔁 A simple workflow you can apply to your own app

🔧 Setting Up the AWS S3 Client

First, install the SDK:

npm install @aws-sdk/client-s3

Then configure your client:

// config/s3Client.js
import { S3Client } from '@aws-sdk/client-s3';

const s3Client = new S3Client({
  region: 'your-region', // e.g., 'us-east-1'
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
  },
});

export default s3Client;

💡 Best Practice: Store your credentials securely using environment variables or IAM roles (if you're using Lambda/EC2).

📚 Most Useful S3 Commands

✅ 1. Create a Bucket

import { CreateBucketCommand } from '@aws-sdk/client-s3';

await s3Client.send(new CreateBucketCommand({
  Bucket: 'my-awesome-bucket',
}));

🗑️ 2. Delete a Bucket

import { DeleteBucketCommand } from '@aws-sdk/client-s3';

await s3Client.send(new DeleteBucketCommand({
  Bucket: 'my-awesome-bucket',
}));

📤 3. Upload an Object

import { PutObjectCommand } from '@aws-sdk/client-s3';
import fs from 'fs';

const fileStream = fs.createReadStream('./example.txt');

await s3Client.send(new PutObjectCommand({
  Bucket: 'my-awesome-bucket',
  Key: 'example.txt',
  Body: fileStream,
}));

📥 4. Download an Object

import { GetObjectCommand } from '@aws-sdk/client-s3';
import fs from 'fs';

const response = await s3Client.send(new GetObjectCommand({
  Bucket: 'my-awesome-bucket',
  Key: 'example.txt',
}));

response.Body.pipe(fs.createWriteStream('./downloaded.txt'));

❌ 5. Delete an Object

import { DeleteObjectCommand } from '@aws-sdk/client-s3';

await s3Client.send(new DeleteObjectCommand({
  Bucket: 'my-awesome-bucket',
  Key: 'example.txt',
}));

📃 6. List Objects in a Bucket

import { ListObjectsV2Command } from '@aws-sdk/client-s3';

const response = await s3Client.send(new ListObjectsV2Command({
  Bucket: 'my-awesome-bucket',
}));

console.log(response.Contents);

🧠 Workflow Example: Image Upload API

Here’s a simple idea of how your workflow could look in a backend:

User uploads an image
Frontend sends file to backend
Backend uploads file to S3
S3 returns URL
URL saved in DB
URL sent back to frontend

// Upload and return URL
const uploadToS3 = async (file, key) => {
  await s3Client.send(new PutObjectCommand({
    Bucket: 'my-awesome-bucket',
    Key: key,
    Body: file.buffer,
    ContentType: file.mimetype,
  }));

  return `https://${yourBucket}.s3.${yourRegion}.amazonaws.com/${key}`;
};

🧪 Extra Commands to Explore

CopyObjectCommand – Duplicate files
HeadObjectCommand – Check if file exists
PutObjectAclCommand – Make file public
Multipart Upload – For large files (>5MB)

✅ Final Thoughts

The AWS SDK v3 makes working with S3 modular and easy. With the right config and a clean workflow, integrating S3 into your app is seamless. If you’re building a file uploader, static hosting solution, or media management API—this toolkit is all you need to start strong.

💬 Have questions or want to see this workflow in Express, Next.js, or NestJS? Drop a comment!

How to Fix LinkedIn Authentication in NextAuth.js: A Custom Provider Setup Guide

Shubham Bhilare — Sat, 17 May 2025 21:45:47 +0000

A Quick Guide to Getting LinkedIn OAuth Working Correctly

LinkedIn authentication is a powerful feature to add to your Next.js application using NextAuth.js, but the default configuration can often lead to issues — especially when trying to fetch user details like email, name, and profile picture.

In this article, I’ll walk you through how I solved this issue by customizing the LinkedIn provider configuration in NextAuth.js.

🧪 The Problem

Using the default LinkedInProvider setup from next-auth/providers/linkedin may not always return complete user information such as email or profile picture.

🔧 Default Implementation

import LinkedInProvider from "next-auth/providers/linkedin";

providers: [
  LinkedInProvider({
    clientId: process.env.LINKEDIN_CLIENT_ID,
    clientSecret: process.env.LINKEDIN_CLIENT_SECRET,
  })
]

This basic setup often results in incomplete data being returned from LinkedIn.

✅ The Fix

To overcome this, I had to dig into LinkedIn’s OAuth docs and customize the LinkedInProvider to manually specify scopes, endpoints, and userinfo configurations.

💡 Working LinkedInProvider Configuration

LinkedInProvider({
  clientId: process.env.LINKEDIN_CLIENT_ID ?? "",
  clientSecret: process.env.LINKEDIN_CLIENT_SECRET ?? "",
  client: { token_endpoint_auth_method: "client_secret_post" },
  scope: "r_liteprofile r_emailaddress",
  issuer: "https://www.linkedin.com",
  userinfo: {
    url: "https://api.linkedin.com/v2/userinfo",
  },
  token: {
    url: "https://www.linkedin.com/oauth/v2/accessToken",
  },
  wellKnown: "https://www.linkedin.com/oauth/.well-known/openid-configuration",
  authorization: {
    url: "https://www.linkedin.com/oauth/v2/authorization",
    params: {
      scope: "profile email openid",
      prompt: "consent",
      access_type: "offline",
      response_type: "code",
    },
  },
  jwks_endpoint: "https://www.linkedin.com/oauth/openid/jwks",
  async profile(profile) {
    return {
      id: profile.sub,
      name: profile.name,
      firstname: profile.given_name,
      lastname: profile.family_name,
      email: profile.email,
      image: profile.picture,
    };
  },
}),

This configuration ensures you:

Request proper scopes like r_emailaddress
Use the correct LinkedIn OAuth endpoints
Get a complete profile object including email and picture

🔐 Bonus Tip: Twitter Provider Email Issue

If you're using Twitter authentication as well, make sure you enable email access in your Twitter app settings. Without this, you won’t get the user’s email address.

TwitterProvider({
  clientId: process.env.TWITTER_CLIENT_ID,
  clientSecret: process.env.TWITTER_CLIENT_SECRET,
})

✅ Tip: Enable "Request email address from users" in Twitter Developer Portal.

🧵 TL;DR

Default LinkedInProvider doesn’t return complete user info.
Customize it with the right OAuth config to fix it.
Twitter requires email permission to return user emails.

Thanks for reading! 🚀

If you found this helpful, consider following me on Twitter and checking out my other projects like Resume Builder.

Let me know if you’ve faced similar issues or need help with OAuth in your apps! 💬

How I Created a Full-Stack Resume Builder Using Next.js and Prisma

Shubham Bhilare — Sat, 17 May 2025 07:51:06 +0000

🚀 Live Demo: https://resume-org.vercel.app

Introduction

Building a resume can be a tedious task, especially when you want a polished, professional look without spending hours on formatting. To solve this, I decided to create a full-stack Resume Builder web app that offers users multiple templates, a dynamic editor, and seamless export to PDF.

In this post, I’ll share the features, tech stack, challenges, and future plans of this project, along with a live demo you can try out yourself.

Tech Stack Overview

To build a modern, scalable application, I chose the following technologies:

Next.js — For both frontend and backend with React and API routes
Prisma ORM — To manage PostgreSQL database schema and queries efficiently
PostgreSQL (hosted on NeonDB) — For storing user data and resume information
NextAuth.js — Handling authentication with Google, LinkedIn, and Twitter OAuth providers
Amazon S3 — Storing user assets like profile images securely
Vercel — Hosting the entire application for fast, global delivery

Key Features

1. User Authentication

Users can sign up and log in easily using their Google, LinkedIn, or Twitter accounts — thanks to NextAuth.js, which made integrating OAuth smooth and secure.

2. Ten Beautiful Resume Templates

The app offers 10 distinct, professionally designed resume templates. Users can select a template that suits their style and industry.

3. Dynamic Resume Editor

The editor page lets users fill in their personal details, work experience, education, skills, and more — with live preview so they see changes instantly.

4. PDF Export

Once finished, users can download their resume as a PDF, preserving the chosen template’s formatting perfectly.

5. User Dashboard and Settings

Users have access to a personal dashboard where they can manage resumes, update profile information, and reset their passwords securely.

Challenges and Learnings

PDF Generation

Ensuring that the resumes print correctly to PDF across different browsers was tricky. Chrome’s print engine behaves differently than others, so I had to experiment with CSS print styles and React-to-PDF libraries to get consistent results.

OAuth Integration

Supporting multiple OAuth providers required careful handling of user sessions and callback URLs. NextAuth.js was very helpful, but I had to tweak adapters to fit Prisma and NeonDB.

Asset Management

Uploading and serving user profile images securely was a priority. Using Amazon S3 with signed URLs ensured that images were private and scalable.

Final Thoughts

This project has been an incredible learning journey into full-stack development, cloud asset management, and authentication flows. If you’re looking to build your own web apps, I highly recommend exploring Next.js and Prisma — the developer experience is excellent.

Feel free to check out the live demo here: https://resume-org.vercel.app and share your feedback or questions!

Thanks for reading!
— Shubham (SKB)