👋 Hello! I’m Sarfraz Alam

I’m a passionate Front-End Developer with over 3 years of experience in building modern, responsive, and user-friendly web applications.

I have worked with Concentrix as an Associate UI-Developer, Gurgaon (Jan 2023 – August 2025) and prior to that I have worked with Canon India (Remote) (Aug 2022 – Dec 2023).

💻 I specialize in:

• 🧩 HTML5 and CSS3 for structure and design
• ⚙️ JavaScript and React.js for dynamic functionality
• 💡 jQuery, Bootstrap, and WordPress for efficient UI and CMS integration

Throughout my career, I’ve worked on a wide range of projects — from React-based applications to WordPress-powered eCommerce and blog platforms such as Sharan India and Nykaa Beauty Blog.

🎯 My main focus is on writing clean, efficient code and creating visually appealing, responsive designs that enhance user experience.

🚀 I’m a quick learner who adapts easily to new technologies and enjoys solving real-world problems through smart and creative coding.

🧰 I also have hands-on experience with collaboration and project management tools like:

• 🔗 Git, Jira, Trello
• 💬 Slack and Zoom for smooth team communication

🎓 I hold a BCA degree and have gained valuable professional experience working at Concentrix and Canon.

🤖 I actively use and explore AI-powered tools that make the development process faster and more efficient:

• 💬 ChatGPT / GitHub Copilot – for code suggestions, debugging, and documentation
• ⚡ Codeium / Tabnine – for AI-assisted code completion and refactoring
• 🧩 Uizard / Figma AI – for generating UI designs from text or sketches
• 🔍 Phind – for AI-driven technical searches and code explanations
• 🧱 Cursor IDE – for building, refactoring, and debugging with AI inside the editor

🌟 I’m now looking for an opportunity where I can continue to grow, contribute to impactful projects, and deliver front-end solutions that make a real difference for users and businesses alike.

📌 Thank you for your time — I’d be happy to share more details about my work or projects 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.