Bilal Mansuri

about me.

Hey! I'm a frontend developer dedicated to creating scalable websites and applications. I prioritize exceptional user experience, beautiful design, smooth developer workflows, and projects that make a real impact. I love working at the intersection of design and engineering, creating software that's both visually appealing and technically robust.Beyond coding, I find joy in immersing myself in books and engaging in online gaming.

experience.

• Frontend EngineerBengaluru, India

  at, razorpay.com

  Sept, 2024 - Present

  • Next.js
  • Tailwindcss
  • React.js
  • Typescript

• Frontend EngineerRemote

  at, zuai.co

  June, 2022 - Aug, 2024

  • Leading the development of ZuAI web, bringing app features to the web, and ensuring design and implementation decisions align with project goals.
  • Developed a real-time ZuAI Chat for the web using Next.js, Redux, Websockets, and Tailwind CSS.
  • Created a user-friendly moderation dashboard frontend utilizing Next.js, Tailwind CSS, and Next-Auth.
  • Designed, built, and maintained the landing page for ZuAI, ensuring regular updates and optimizations.
  • Collaborated with backend developers to integrate RESTful APIs, enhancing the functionality and performance of web applications.
  • Created reusable components to streamline development and promote code reusability across projects.

  • Next.js
  • Tailwindcss
  • React.js
  • Next-auth
  • Framer-motion
  • React-query
  • Zustand
  • Redux-toolkit
  • React-router
  • Mui
  • ShadCn
  • Typescript
  • Firebase
  • Supabase
  • Mongodb
  • Figma
  • Git & Github

projects.

• EmojicaJul 9, 2023

  live preview github

  • Emojica is a full-stack social media application where users can post emojis and text, view a dynamic feed, and follow their friends. The frontend is built using Next.js and styled with Tailwind CSS, while the backend leverages Next.js API routes.
  • Working on this project enabled me to gain hands-on experience with MongoDB, including advanced features such as aggregation, indexing, and the populate method.
  • Additionally, it provided valuable insights into designing and implementing the overall flow of a social media app, enhancing my skills in both frontend and backend development.

  • Next.js
  • React-Query
  • Next.js Api
  • MongoDB
  • Next-Auth
  • Mongoose

• VestirJun 9, 2022

  live preview github

  • Vestir is a full-stack e-commerce clothing store built with Next.js, Redux, React-Context, MongoDB, and JWT.
  • Frontend is built with pure React.js and Redux, while the backend is implemented with Next.js API routes and MongoDB.
  • This project provided me with the opportunity to understand the intricacies of full-stack development and enhance my skills in both frontend and backend development.

  • React.js
  • Nextj.js
  • Redux
  • React-Context
  • MongoDB
  • JWT
  • Authentication

• NeuroOct 20, 2021

  live preview github

  • Neuro is a full-stack e-commerce clothing store built with Next.js, Next-Auth, SCSS, Stripe, and MongoDB.
  • This project significantly enhanced my understanding of developing a complete e-commerce solution which includes payment gateway, orders management, database management and authentication.,

  • Next.js
  • Next-Auth
  • Redux
  • SCSS
  • Stripe
  • Webhooks
  • MongoDB

• Netflix UI CloneOct 20, 2021

  live preview, github

  • This project is a clone of the popular streaming service Netflix. It is built with React.js and SCSS, and uses the TMDB API to fetch movie and TV show data.
  • I built this project to practive my UI skills and to create a responsive clone of netflix.

  • React.js
  • Responsive UI
  • SCSS
  • TMDB API

technical blogs.

• Debouncing and Throttling in javascriptJul 25, 2022

  Read more4 min read

  Debouncing and throttling are often confused by the developers. Both are two different techniques of doing a similar task - controlling the number of times a function should be executed over time. Debouncing and throttling help us to optimize event handling.

• Hoisting in JavascriptJul 20, 2022

  Read more4 min read

  In this blog, we will be reading about how hoisting works in the case of var, let, and const. Before starting let's understand what is hoisting? In simple terms, we can explain it like this- accessing a variable or function before declaring it in code. For example, let's take this code and its output.

• Polyfills for .map(), .reduce(), .filter() methodsAug 2, 2022

  Read more3 min read

  Before creating polyfills for the map, reduce, and filter method, let's first take a look at what they are used for.Map Method - The map method creates a new array by transforming the original array according to our needs. The below code shows how the method works

• Scope in JavascriptAug 2, 2022

  Read more2 min read

  The scope can be defined as the region in which a variable can be accessed. Outside this region, that variable is not available. In JavaScript, there are three types of scopes Block Scope, Function Scope, Global Scope Block Scope - Block scope is the scope between two brackets { },

• Web Storage API - Local and Session StorageMar 19, 2023

  Read more4 min read

  Web storage API is the mechanism that allows data to be stored inside a web browser. It enables web developers to store and retrieve data without the need for a server. Web storage is like a very big object of key-value pairs of strings. It also allows for faster data retrieval since the data is stored locally and doesn't need to be fetched from a server.

technical skills.

• Languages:

  Javascript, Typescript, HTML, CSS, SCSS.

• Frameworks:

  Nextjs, Tailwindcss.

• Libraries:

  Reactjs, Framer-motion, React-query, Zustand, Redux-toolkit, React-router, Mui.

• Others:

  Firebase, Mongodb, Figma, Git & Github.