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

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.
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%.
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.
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.
RESOURCES
MongoDB Essentials & Query Notes
Detailed notes covering MongoDB fundamentals, data modeling, CRUD operations, aggregation pipeline, indexes, relationships, performance optimization, and advanced query operators with examples.
React Core Concepts Notes
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.
React Hooks & Memo Notes
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.
Express.js API & Middleware Notes
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.
Next.js App Router & Rendering Notes
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.
Redux Toolkit & RTK Query Notes
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.
BLOGS
JavaScript Promise Methods - Complete Guide
🧠 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
| Method | Waits For | Returns On | Rejects On | Use Case |
|---|---|---|---|---|
| Promise.all() | All to fulfill | All fulfilled values | Any rejection | Run all APIs that must succeed together |
| Promise.allSettled() | All to settle | Array with status/value | Never rejects | Collect all results (success or fail) |
| Promise.race() | First to settle | First result | First rejection | Competing async tasks (fastest wins) |
| Promise.any() | First to fulfill | First success | All rejected | Backup servers or redundant requests |
Closure Explained with a Bank Example
🧠 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.com/in/shubhamsalunkhe16/
- Address
- Charkop, Kandiwali (w.),
Mumbai-67






