Hi, I'm

Shubham

Full Stack Developer with 4+ years of experience building responsive, scalable and AI-driven web applications. Skilled in React, backend technologies, and performance optimization. Delivered solutions for top-tier brands. Passionate about clean code, collaboration, and continuous learning, transforming real world challenges into impactful digital products.

import "./App.css";

const App = () => {
  const userMeta = {
    fullName: "Shubham Bhagwan Salunkhe",
    designation: "Full Stack Developer",
    experienceYears: 4,
    isEngineer: true,
    salary: undefined,
    skills: ["React", "Redux", "Next.js", "Express.js", "Tailwind CSS" , "Responsive UI", "Scalable Architecture", "Mentorship"]
    experience: [
      "Led development of AI-Based Content Creation Platform for global brands.",
      "Built full-stack RAG-based Social Media Scraper & Analyzer.",
      "Developed Web-Based Music Streaming Platform with advanced features.",
      "Contributed to React Native educational mobile app."
    ],
  };

  return (
    <div className="App">
      <MyProfile {...data} />
    </div>
  );
};

export default App;

MY STORY

shubham salunkhe

I’m Shubham Bhagwan Salunkhe, a dedicated Full Stack Developer with over 4+ years of experience in building innovative, scalable, responsive and user-centered web applications. After graduating with a Bachelor of Engineering in 2019, I’ve honed my skills in frontend technologies and have good understanding of backend architectures and database management. At GoPhygital, I’ve contributed significantly to the development of AI-driven platforms for global brands, with a focus on cutting-edge features like text-to-speech functionality, real-time content creation tools, web streaming platform and social media analytics. My passion for coding is matched by my commitment to team collaboration, having successfully mentored colleagues and streamlined development processes. Whether developing custom ECommerce solutions or creating dynamic, interactive user interfaces, I am always driven by the goal to build seamless, efficient, and impactful digital experiences. I believe in continuous learning and strive to deliver high-quality solutions that address real-world challenges.

SKILLS AND TOOLS

Versatile in web development with expertise in frontend development and a good understanding of backend architectures and database management. Skilled in creating responsive designs, implementing secure authentication, and optimizing user experiences.

Frontend

Frontend is the user-facing part of a website, built for design and interactivity.

  • React
  • Redux
  • Next.js
  • JavaScript
  • Tailwind CSS
  • TypeScript
  • HTML
  • CSS
Backend

Backend is the server-side part of a website or app, managing data, logic, and APIs.

  • Node.js
  • Java
Databases

A database is a structured system for storing, managing, and retrieving data.

  • MySQL
  • MongoDB
  • Firebase

Testimonials

Team Lead

Gophygital

Shubham, overall has been a very good asset to company. He has shown great improvements in all aspects be it, adapting to new technologies, understaning new libraries, new code logics, self testing of code, finding solutions to problems and more. He has done outstanding work in the Musicbank and Creation station. Also shown quick outputs in all Al related functionalities added to project. He takes ownership of tasks and works independently when needed. Focusing on stability, consistency, and deepening his core knowledge will strengthen his overall development and impact within the team. He keeps on upgrading code to improve code performance and make the code more dynamic, easily understandable. Very quick learner, very good teammate, dedicated, always ready to help team members. Always eager to learn new things. One of the most reliable assets of the company. Like working with him as he Read more

Founder and Evangelist

Gophygital

Keep doing great work.

HR Manager

Gophygital

Shubham has consistently demonstrated exceptional performance throughout the period. He is proactive and self-motivated individual who shows a strong commitment to continuous self-development. His positive attitude, collaborative nature, and willingness to support team members in achieving common goals have made a significant impact on team morale and productivity.

WORK EXPERIENCE

Senior React Full Stack Developer

GoPhygital Private Limited  ●  Sept 2021 - Present

AI-Based Content Creation Platform

  • Designed and developed an AI-driven content creation platform for top-tier clients

  • Implemented advanced text-to-speech functionality with 3k+ voice profiles, including offensive content detection and timeline-based voice placement for dynamic adjustments.

  • Built AI-powered music tools enabling track creation, remixing, instrument edits, and precise drop placements.

  • Leveraged OpenAI to generate dynamic track names, descriptions, and visually appealing cover images.

  • Utilized FFmpeg for advanced merging audio/video files, applying custom fade effects, and executing track trimming.

  • Played a leading role in the project, contributing 85% of the frontend development over two years.

  • Engineered a unified, scalable codebase supporting multi-brand theming, feature toggles, and localized components.

  • Mentored teams, collaborated with backend developers on API design, and managed multiple high-impact projects.

keywords :Generative AIText-to-Speech (TTS)OpenAI APIAudio/Video Processing (FFmpeg)ReactReduxAI-Powered Music ToolsCSSGitResponsive UIMulti-brand ThemingScalable Frontend ArchitectureMentorship & Team LeadershipAPI Design & Integration

RAG-Based Social Media Scraper & Analyzer

  • Built full-stack RAG app using Next.js, Tailwind CSS, Express.js, SQLite, and Puppeteer to scrape and analyze data from 7 social media platforms.

  • Implemented platform-specific authentication (login, session management) and credentials/config manager for secure, uninterrupted scraping.

  • Scraped and stored 100K+ posts/comments in a structured, export-ready database with chat-based analysis and JSON import/export.

  • Integrated LLaMA via Groq API using Langchain.js for sentiment analysis, topic modeling, and natural language querying.

  • Added a JSON preprocessing layer to reduce token size and lower LLM processing costs by 30%.

keywords :Retrieval-Augmented Generation (RAG)Next.jsPuppeteerLangchain.jsGroq API (Llama Integration)Data Scraping & AutomationSecure Authentication & Session ManagementJSON Preprocessing & Token OptimizationTailwind CSSExpressSQLiteLLMResponsive UI

PERSONAL PROJECTS

Quiz-Genie

AI-Powered Quiz Generator Platform ●  May 2025 - June 2025

  • AI-Powered Quiz Generation: Generate customized quizzes on any topic using Google Gemini API with support for both MCQs and typed-answer formats.

  • Customizable Difficulty & Timer: Users can define difficulty levels and question count (up to 20), with an intelligent timer that auto-submits upon expiry.

  • Performance Evaluation & Reports: AI evaluates responses in real-time and provides detailed performance reports for each quiz attempt.

  • Secure Role-Based Access: Integrated authentication using NextAuth with dedicated dashboards and layouts for users and admins.

  • Smart Admin Panel: Track submissions, analyze performance stats, filter data, and export quiz reports via a responsive admin dashboard.

  • Robust Forms & UX: Validated inputs using Formik + Yup, responsive UI with Tailwind CSS, and clean Shadcn components for smooth interactions.

  • Optimized & Scalable Architecture: Efficient prompt handling for cost-effective AI usage, with MongoDB for persistent data storage.

Tools :Next.jsTypescriptTailwind CSSShadcn UIReact QueryFormik + YupMongoDBNextAuthRole-Based AuthGemini API
Product screenshot
Product screenshot
Product screenshot
Product screenshot
Product screenshot
Product screenshot

Aimer Candles

ECommerce Website + PWA ●  Jan 2025 - Apr 2025

  • Progressive Web App (PWA): Installable as an app for a seamless, native-like experience.

  • Secure Authentication: Firebase Authentication for safe login and registration.

  • Responsive Design: Optimized for all screen sizes and devices.

  • Dynamic Theme: Toggle between dark and light modes for personalized browsing.

  • Product and Collection Management: Display of products and collections with categorized views, showcasing New Arrivals and Best Sellers section.

  • Product Filters: Advanced filtering by categories, New Arrivals , and more for quick search.

  • Cart System: State-managed cart functionality using Redux.

  • Content Integration: Integrated blog section for sharing product stories, tips, and updates.

  • Performance Optimized: Fast-loading, offline support, and scalable architecture.

Tools :HTMLTailwind CSSReactReduxResponsive UIPWA
Product screenshot

RESOURCES

Detailed notes covering MongoDB fundamentals, data modeling, CRUD operations, aggregation pipeline, indexes, relationships, performance optimization, and advanced query operators with examples.

MongoDBNoSQLDatabaseQueriesAggregation

Master the foundational concepts of React including components, JSX, state, props, lifecycle methods, hooks, and virtual DOM. This guide helps in building interactive and efficient UI applications.

ReactFrontendJavaScriptWeb Development

In-depth notes covering all essential React hooks including useState, useEffect, useContext, useRef, useMemo, useCallback, and useReducer with TypeScript examples. Also includes advanced usage of React.memo with areEqual and performance cases.

ReactHooksReact.memoJavaScriptTypeScript

In-depth notes on building RESTful APIs using Express.js, covering routing, middleware, request/response cycle, error handling, authentication, and best practices with production-ready patterns.

Express.jsNode.jsAPIMiddlewareRouting

Comprehensive notes on the latest Next.js 15.3 features, including App Router, routing strategies, dynamic/static rendering, server components, caching, route handlers, middleware, and advanced parallel routes with real-world examples.

Next.jsApp RouterRenderingMiddlewareCaching

Master Redux, Redux Toolkit and RTK Query to manage complex global state and handle API requests efficiently in React apps. This guide covers slices, async thunks, caching, and auto-generated endpoints with practical examples.

ReduxRTKRTK QueryState ManagementReact

BLOGS

JavaScript Promise Methods - Complete Guide

January 19, 20258 min read

🧠 What is a Promise?

A Promise in JavaScript represents a value that will be available now, later, or never. It can be in one of three states:

  • Pending → still waiting
  • Fulfilled → operation completed successfully
  • Rejected → operation failed

🧩 1. Promise.all()

✅ Definition

  • Waits for all promises to resolve.
  • If any promise rejects, the entire thing fails immediately.

🧾 Syntax

Promise.all([promise1, promise2, promise3]) .then(results => console.log(results)) .catch(error => console.error(error));

🧰 Example

const p1 = Promise.resolve('User data'); const p2 = Promise.resolve('Profile picture'); const p3 = Promise.resolve('Friend list'); Promise.all([p1, p2, p3]) .then(results => console.log(results)) // ['User data', 'Profile picture', 'Friend list'] .catch(err => console.error(err));

🌍 Real-life Analogy

You order three food items (pizza, drink, dessert). You'll start eating only when all three have arrived. If one item is missing or canceled, you cancel the meal (the whole promise chain fails).


🧩 2. Promise.allSettled()

✅ Definition

  • Waits for all promises to either resolve or reject.

  • Always returns an array of results with each having:

    • { status: 'fulfilled', value: ... }
    • { status: 'rejected', reason: ... }

🧾 Syntax

Promise.allSettled([promise1, promise2, promise3]) .then(results => console.log(results));

🧰 Example

const p1 = Promise.resolve('Success'); const p2 = Promise.reject('Error occurred'); const p3 = Promise.resolve('Another success'); Promise.allSettled([p1, p2, p3]) .then(results => console.log(results));

Output:

[ { status: 'fulfilled', value: 'Success' }, { status: 'rejected', reason: 'Error occurred' }, { status: 'fulfilled', value: 'Another success' } ]

🌍 Real-life Analogy

You send out 3 job applications. You wait until you get a response from all companies — whether accepted or rejected. You note down each result (not just the successes).


🧩 3. Promise.race()

✅ Definition

  • Returns the result of the first promise that settles (either resolve or reject).
  • The rest are ignored.

🧾 Syntax

Promise.race([promise1, promise2, promise3]) .then(result => console.log(result)) .catch(error => console.error(error));

🧰 Example

const fast = new Promise(resolve => setTimeout(() => resolve('Fast response'), 100)); const slow = new Promise(resolve => setTimeout(() => resolve('Slow response'), 300)); Promise.race([fast, slow]) .then(result => console.log(result)); // 'Fast response'

🌍 Real-life Analogy

You're waiting for two delivery services to bring the same item (Amazon & Flipkart). Whichever one delivers first, you accept it and cancel the other.


🧩 4. Promise.any()

✅ Definition

  • Returns the first fulfilled (successful) promise.
  • Ignores rejected ones.
  • If all reject, it throws an AggregateError.

🧾 Syntax

Promise.any([promise1, promise2, promise3]) .then(result => console.log(result)) .catch(error => console.error(error));

🧰 Example

const p1 = Promise.reject('Server 1 failed'); const p2 = Promise.reject('Server 2 failed'); const p3 = Promise.resolve('Server 3 responded'); Promise.any([p1, p2, p3]) .then(result => console.log(result)) // 'Server 3 responded' .catch(error => console.error(error));

🌍 Real-life Analogy

You send the same request to 3 backup servers. You don't care which one responds — as soon as one gives a successful response, you use it. If all fail, you show an error.


📊 Summary Table

MethodWaits ForReturns OnRejects OnUse Case
Promise.all()All to fulfillAll fulfilled valuesAny rejectionRun all APIs that must succeed together
Promise.allSettled()All to settleArray with status/valueNever rejectsCollect all results (success or fail)
Promise.race()First to settleFirst resultFirst rejectionCompeting async tasks (fastest wins)
Promise.any()First to fulfillFirst successAll rejectedBackup servers or redundant requests

Closure Explained with a Bank Example

January 6, 20256 min read

🧠 What is a Closure?

A closure is a function that retains access to its lexical scope, even when the function is executed outside that scope. This allows the function to remember and access variables from its outer scope even after the outer function has finished execution.


🎯 Why Use Closures?

Closures are useful for:

  • Data encapsulation → creating private variables
  • Maintaining state → in functional programming style
  • Function factories → creating specialized functions

🏦 Bank Example with Closure

Let's create a bank account using closures. This example demonstrates how closures help encapsulate account balance information securely.

🧾 Code Example

function createAccount(initialBalance) { let balance = initialBalance; return function (action, amount) { if (action === 'deposit') { balance += amount; } else if (action === 'withdraw') { if (balance >= amount) { balance -= amount; } else { console.log('Insufficient funds'); } } else if (action === 'checkBalance') { console.log('Balance:', balance); } }; } // Creating a bank account const myAccount = createAccount(1000); myAccount('deposit', 500); // Depositing 500 myAccount('checkBalance'); // Output: Balance: 1500 myAccount('withdraw', 200); // Withdrawing 200 myAccount('checkBalance'); // Output: Balance: 1300

🔍 Step-by-Step Explanation

Outer Function (createAccount)

  • Accepts an initialBalance argument
  • Initializes a balance variable to store the account balance
  • Returns an inner function

Inner Function

  • Takes two arguments: action and amount
  • Actions: 'deposit', 'withdraw', or 'checkBalance'
  • Has access to the balance variable through closure
  • Retains access even after outer function finishes execution

Action Handling

  • deposit: Increases balance by specified amount
  • withdraw: Decreases balance if sufficient funds, otherwise logs 'Insufficient funds'
  • checkBalance: Logs current balance to console

Reusability

  • Create multiple bank accounts with isolated balances
  • Each account operates independently
  • Perfect for managing separate user accounts

🌍 Real-life Analogy

Think of a safety deposit box at a bank:

  • The box (outer function) contains your valuables (balance)
  • You get a key (inner function) to access the box
  • Even if you leave the bank (outer function ends), your key still works (closure maintains access)
  • Each box has its own unique contents (separate balance per account)

LET'S CONNECT

Phone number
9004409190
LinkedIn

linkedin.com/in/shubhamsalunkhe16/

Address
Charkop, Kandiwali (w.),
Mumbai-67

<shubh/>

© All Rights Reserved. Built with React and Tailwind CSS.