👋 Hi, thank you for the opportunity!

My name is Sarfraz Alam, and I'm a Front-End Developer with over 3 years of hands-on experience in building modern websites and web applications.

💻 I primarily work with:

• ⚛️ React.js
• 🚀 Next.js
• 🖼️ Vue.js

I’m confident handling both small and large-scale projects. On the backend, I've used PHP and MySQL for full-stack applications.

🏢 Recent Experience:

• Concentrix, Gurgaon (Jan 2024 – June 2025)
  ➤ Migrated a legacy project to Next.js
  ➤ Improved site performance by 40%
  ➤ Created reusable components & custom hooks to save dev (development )time


• Canon India (Remote) (Aug 2022 – Dec 2023)
  ➤ Started as an intern, later promoted to full-time
  ➤ Worked with Vue.js
  ➤ Improved UI with animations and pixel-perfect design matching

🧪 Personal Projects:

• ✅ Job Portal: Built using HTML, CSS, JS, PHP, MySQL, integrated with Adzuna API (Hosted on CheapHosty)
• 🖌️ PSD to Live Website Conversion: Converted layered Photoshop designs into fully responsive and interactive websites using HTML, CSS, and JS
• 💬 Real-time Chat App: Built with React and Firebase, including dark/light mode
• 📈 Stock Tracker Dashboard: Built with Redux, live charts, and real-time API

🎯 Core Strength: Creating fast, beautiful, responsive UIs.
I’m skilled with:

• 🎨 Tailwind CSS, Bootstrap, Material UI
• 🔁 Redux, Axios
• ⚡ Code splitting, lazy loading, Lighthouse optimization

🤝 I'm used to working in Agile teams and have mentored junior developers as well.

🌍 Currently Looking For: A remote (or onsite in Bangalore, Hyderabad, Pune) opportunity in a fast-paced team where I can grow as a Front-End or Full-Stack Developer.

📌 That’s a quick summary about me. I’d be happy to dive deeper into any project or experience if you’d like!

What’s the difference between a library and a framework?

• Library gives me tools. Framework gives me structure.
• A library is like a helper tool — I decide when and how to use it.
• A framework gives me a ready-made structure — I write my code inside it, and it controls when things run.
• I’ve worked with both libraries and frameworks depending on the project.

• React – Library – Like LEGO for websites — I build reusable parts like buttons and forms.
• Vue.js – Framework – Simpler than React, good for quick work.
• Angular – Framework – Best for big apps needing structure.
• Next.js – Framework (built on React) – Like Super React — handles frontend and backend.
• Svelte – Framework – Fast, compiles to pure JS.
• Tailwind CSS – Utility Library – I style using small class names like p-4, bg-blue-500.
• Bootstrap – Framework – Ready-made components like forms and navbars.

• Express.js – Helps build the brain of the website — like login, APIs, and form handling.
• NestJS – Like Angular but for backend — very clean for big projects.
• Koa.js – A lighter version of Express.
• Next.js API Routes – Lets me write backend code in frontend apps.
• Fastify – A fast alternative to Express.

• Axios – I use it to send/receive data (forms, APIs).
• Lodash – Helps sort, filter, and clean data.
• Moment.js / Day.js – Formats dates like “2 days ago”.
• Zod / Yup – Validates user input (e.g., emails).

• Firebase Auth – Easy login via Google, email, or phone.
• Auth0 – Secure login for large-scale apps.
• bcrypt.js – Encrypts passwords safely.
• jsonwebtoken (JWT) – Creates secure tokens for logged-in users.

• Jest – Tests JavaScript code.
• React Testing Library – Tests React components.
• Mocha / Chai – For backend testing.
• Cypress – End-to-end testing (like a robot using the app).

• Webpack – Combines all files for faster load.
• Vite – Super fast dev environment.
• ESLint – Checks for code issues.
• Prettier – Auto-formats code.

• MongoDB – Stores user data and job posts.
• Mongoose – Simplifies MongoDB in Node apps.
• Firebase Realtime DB – Instant updates, great for chat apps.
• Prisma – Works with SQL databases easily.

I use frontend tools like React and Tailwind to build what users see.

Then I use backend frameworks like Express or Next.js API to handle login, forms, and databases.

I also make sure the app is secure (with Firebase/Auth0), tested (with Jest/Cypress), and runs fast (using Webpack or Vite).

And to store data, I use databases like MongoDB or Firebase depending on the project.

Tools Used: Next.js, Stripe, Firebase, Tailwind

• Built an online shop where users browse products, add to cart, checkout.
• Integrated Stripe for safe and fast payments.
• Used Next.js for better SEO and server-side rendering so products load faster.
• Firebase stores order history and user details securely.
• Tailwind helps with consistent, fast UI styling across all pages.

Tools Used: Next.js, Markdown, GitHub, Vercel

• Created a clean blog or portfolio to showcase skills, projects, and posts.
• Posts written in simple files (Markdown) that are rendered beautifully.
• Hosted on Vercel with Next.js, which loads fast and ranks well in Google.
• Added contact form using EmailJS or Formspree to collect messages.
• Responsive design using Bootstrap or Tailwind for mobile viewing.

Tools Used: React, Firebase Realtime DB, Tailwind, Socket.io

• Users can chat in real-time, like WhatsApp, without reloading the page.
• Messages are stored and synced using Firebase Realtime Database.
• Used Socket.io for instant updates — when someone types, others see it.
• Login with Google Auth to join the chat.
• Designed using Tailwind for a modern and neat chat UI.

Tools Used: React, Express, MongoDB, Chart.js

• Built an admin panel to view users, sales, and performance reports.
• Data from the backend (Express + MongoDB) is shown using charts and tables.
• Admins can edit/delete users, manage roles, or approve requests.
• Chart.js or Recharts used to show graphs (e.g., monthly revenue).
• Protected routes using JWT so only admins can access.