![Profile Picture](hero.jpg)
Hi, I'm Afaq 👏
MERN STACK
web DEVELOPER.
A passionate Fullstack/MERN Stack/ NextJS Web Developer and UI/UX enthusiast specialized in building stunning pixel-perfect interactive websites/applications.
About
Hello there! I'm Afaq, a Fullstack/ MERN Stack / NextJS web developer in Faisalabad. I wake up in the morning, grab a cup of timmies coffee, open up my laptop and build things that live on the web all day, everyday.
People who know me say I'm obsessed, that's fair, I am very driven and love learning new things.
I recently created a YouTube channel called RAJPOOT DEVELOPER where I upload videos on front-end / full-stack web development topics. for showcasing my skills.
Technologies
- HTML5
- CSS3
- TailwindCSS
- BootStrap
- MUI
- JavaScript
- TypeScript
- ReactJS
- NextJS
- Redux RTK
- NodeJS
- ExpressJS
- MongoDB
- MySQL
- Postgree
![Profile Picture](./about.jpg)
Featured project
The real-time chat application is a robust platform facilitating seamless interactions through its login, signup, and root route pages. It boasts secure authentication, production-grade code, and real-time communication via Socket.io, ensuring privacy and scalability. With JWT token-based authorization and state management via Context API and Zustand, it offers efficient resource access and user experience. Features like notification sounds and live status indicators further elevate its usability, setting a high standard for real-time communication solutions.
Tech stack
- TailwindCSS
- ReactJS
- JWT token
- Socket.io
- NodeJS
- Express
- MongoDB
Project type
MERN Stack
Timeline
Feb 2024 - March 2024
![](/Featured Project/loginChat.jpg)
![](/Featured Project/signupChat.jpg)
![](/Featured Project/homeChat.jpg)
![](/Featured Project/liveConversationChat.jpg)
Projects
Hi there! I've created several projects using MERN stack technology, such as a real-time chat app, a MERN todo app, and themes switchers using Redux, Zustand, and Context API. Additionally, I've developed projects solely with vanilla JavaScript, including calculators, stopwatches, tic-tac-toe games, and many more.
React Quiz App
![Reac Quiz Website](/react quiz app.jpg)
React Quiz App
Introducing a dynamic and engaging Quiz App designed to challenge and entertain users of all levels! With customizable settings at your fingertips, this app offers an immersive quiz experience.
Tailor the difficulty level to match your expertise, with options ranging from "easy" to "hard," ensuring a challenging yet rewarding experience every time. Powered by the Open Trivia Database API, guaranteeing fresh and diverse content with every session. With seamless navigation facilitated by the useNavigate function from react-router-dom, users can effortlessly transition between pages, enhancing the overall user experience. With a fully responsive design that adapts to any screen size, users can enjoy the quiz experience anytime, anywhere.
WebsiteMERN Todo App
![MERN Todo App](/mern todo.jpg)
MERN Todo App
Introducing a robust and versatile Todo App, meticulously crafted with cutting-edge MERN stack technology to streamline your task management experience.
This Todo App offers a comprehensive suite of features, allowing users to easily create, read, and delete tasks. Powered by MongoDB, a flexible and scalable NoSQL database, data storage is efficient and reliable, ensuring seamless access to your tasks.
WebsiteContext API Todo
![Context API Todo Website](/context todo.jpg)
Context API Todo
Introducing a robust Todo application built with React and powered by Context API for state management.
This intuitive app allows users to effortlessly manage their tasks with features such as adding, reading, deleting, and marking tasks as completed. Leveraging the simplicity and efficiency of local storage, your Todo data is seamlessly stored and retrieved, ensuring a smooth user experience. With its clean and intuitive interface, this Todo app is designed to enhance productivity and organization in your daily life.
WebsitePassword Generator
![Platform Pro Website](/password generator.jpg)
Password Generator
Introducing a versatile Password Generator built using React, capable of generating passwords ranging from 6 to 100 characters in length.
This generator includes automatic number inclusion within the specified length range and the option to include special characters as needed.The useCallback () hook ensures memoization of the password generation function, optimizing performance by preventing unnecessary re-renders.
WebsiteMini MS Paint
![Mini MS Paint Website](/ms paint.jpg)
Mini MS Paint
Introducing a versatile mini MS Paint application that brings creativity to your fingertips! With a sleek and intuitive interface, this app offers a variety of tools and options to unleash your imagination:
Drawing Tools, Color Palette, Brush Size Control, Fill Color Option, Canvas Clearing, Image Saving. Whether you're a seasoned artist or a beginner exploring your creativity, this mini MS Paint app offers endless possibilities for expressing yourself and bringing your ideas to life!
WebsiteTic Tac Toe
![tic tac toe Website](/tic tac toe.jpg)
Tic Tac Toe
Introducing a simple yet engaging Tic Tac Toe game, crafted with HTML, CSS, and JavaScript to provide hours of fun and entertainment.
The game logic is implemented using JavaScript, with event listeners attached to each cell to handle player input and update the game state accordingly. With its intuitive gameplay and sleek design, this Tic Tac Toe game is perfect for players of all ages to enjoy solo or with friends.
WebsiteExpense Tracker
![Expense Tracker Website](/expense tracker.jpg)
Expense Tracker
Developed with ReactJS, this expense tracker app offers a simple and intuitive interface for managing your finances. Track your income and expenses effortlessly, with real-time updates on your total balance, income, and expenses.
Add new transactions with ease, specifying the description and amount, and watch as the app dynamically updates your financial summary. Easily delete transactions when needed, maintaining accurate records of your spending history. With its clean design and user-friendly features, this expense tracker simplifies financial management for users of all levels.
WebsiteWeather Dashboard
![Weather Dashboard Website](/weather_dashboard.jpg)
Weather Dashboard
Introducing the Weather Dashboard: your comprehensive weather companion offering today's details and the last 7-day forecast, including visibility, humidity, wind speed, air pressure, sunrise, sunset, and temperature variations.
Powered by Next.js and TypeScript, with responsive design facilitated by Tailwind CSS, the Weather Dashboard ensures seamless accessibility across devices. Leveraging the OpenWeatherMap API, users can search for weather information for any location on Earth.
WebsiteDaily Recipies
![Recipie Site](/recipies.jpg)
Daily Recipies
This project is a fully responsive website designed to provide an engaging user experience across various devices. The site utilizes Font Awesome for icons and Vanilla JavaScript for interactive features. It is styled with CSS and designed to be both visually appealing and user-friendly.
Technologies Used HTML5: For structuring the content. CSS3: For styling the website, including responsive design using media queries. JavaScript: For adding interactivity and dynamic behavior. Font Awesome: For incorporating scalable vector icons. Google Fonts: For using the 'Roboto' font family.
WebsiteFocus on today
![Focus on today](/focus on today.jpg)
Focus on today
Focus on Today is a mobile-first,fully responsive. Users can add up to three tasks and track their progress with a dynamic progress bar. The app provides motivational quotes as tasks are completed, fostering a sense of accomplishment. Built with Vanilla JavaScript and modern-normalize CSS, it ensures a consistent user experience across devices.
Interactive elements like a rotating sun icon add visual appeal, making task management enjoyable. the complete functionality of this web is using VanillaJS, and Vite is used for development server. Whether starting your day or boosting productivity, Focus on Today provides the tools and motivation needed to achieve your objectives.
WebsiteGet In Contact
Whether you are starting a project, have business inquiries or just want to say hi, my inbox is always open so feel free to reach out and I will get back to you as soon as possible.
Reach Out