Hi, I'm Esa Bin Shakeel

ParcelBuddy

• Implemented OOP and MVC principles for streamlined code organization and scalability.
• Integrated PHP, MySQL, and Bootstrap for a cohesive, responsive, and visually appealing online system.
• Engineered advanced features like a secure login, dynamic search, and CRUD functionality, optimizing usability for managing parcel records and user tasks.

"ParcelBuddy" is the name of an online client-server data-centric parcel delivery tracking system. It makes use of HTML/CSS, MySQL, PHP, and an Object-Oriented approach with the Model-View-Controller architectural pattern.

To facilitate testing and demonstration, ParcelBuddy offers two pre-configured accounts:

• Manager Account:
  • Username: admin
  • Password: 123456
• Deliverer Account:
  • Username: lee
  • Password: 123456

Expense Tracker

• Developed an expense tracker web application using React to help users manage their finances effectively.
• Implemented features for adding new expenses, displaying a list of expenses, and calculating the total expense.
• Utilized React state management (useState and useEffect hooks) to handle user input and dynamically update the expense list.
• Designed with a responsive layout using CSS Flexbox and Grid for optimal viewing on various devices, ensuring accessibility and usability.
• Integrated custom CSS for styling, including animations and transitions, creating an intuitive and visually appealing user interface.
• Utilized localStorage to persist expense data across sessions, providing a seamless user experience.
• Implemented error handling for input validation, ensuring that users provide valid data for expense entries.
• Added functionality to delete individual expenses from the list, enhancing user control and flexibility.

Chatbot

This chatbot allows users to chat about various topics, including CV, education, skills, hobbies, work experience, weather information, and definitions. Engage with the chatbot to learn more about me!

Caesar Cipher Encrypt and Decrypt Tool

• Developed a web-based tool for encrypting and decrypting text using the Caesar Cipher algorithm.
• Implemented both encryption and decryption functionalities using JavaScript.
• Utilized HTML and CSS for creating a user-friendly interface with input and output text areas.
• Integrated FontAwesome icons for copy-to-clipboard functionality.
• Designed a responsive layout using media queries for optimal viewing on various devices.
• Users can select a key and encrypt or decrypt text easily with the click of a button.

This tool allows users to encrypt and decrypt text using the Caesar Cipher algorithm. Try it out to secure your messages!

React Voting System

• Developed a dynamic and interactive voting system using React, showcasing the core principles of React components, state management, and event handling.
• Implemented a list of people to vote for, each with their image, name, and vote count, allowing users to cast their votes with a click.
• Utilized React's useState hook for managing the application's state, tracking the total number of votes, and determining the winner.
• Designed with responsive web design principles to ensure compatibility across various devices and screen sizes, providing a consistent user experience.
• Enhanced user interaction with real-time updates on vote counts and immediate winner announcement once the voting limit is reached.
• Integrated custom CSS for styling the application, creating visually appealing cards for each person, and enhancing the overall user interface.

The "React Voting System" project serves as a practical demonstration of building interactive web applications with React, focusing on user engagement, real-time updates, and responsive design.

Music Player

• Developed a music player web application using React, allowing users to play audio files uploaded from their device.
• Implemented features like adding and removing songs from the playlist, play/pause controls, and skipping to the next or previous track.
• Designed with a user-friendly interface, including visual feedback for the currently playing song and volume control.
• Utilized HTML5 audio element and React state management to synchronize playback state and song information.
• Integrated custom CSS for styling, ensuring a cohesive and visually appealing music player experience.

Laptop Shop

• Developed a comprehensive laptop shop website using HTML, CSS, and JavaScript.
• Implemented a responsive design to ensure optimal viewing and usability across various devices.
• Created dynamic content loading and user interactions using JavaScript for enhanced user experience.
• Utilized Flexbox and Grid layouts for the efficient and visually appealing arrangement of elements.
• Included search functionality to allow users to filter laptops based on their preferences.
• Integrated a modal popup feature to display detailed information about each laptop.
• Implemented a navigation bar with smooth scrolling and a side menu for easy navigation.
• Added a customer reviews section to showcase user feedback and ratings.
• Developed a chatbot feature using JavaScript to assist users with inquiries about laptops, return policy, and more.
• Included chatbot functionalities such as greeting messages, product information, current date and time, and return policy details.

Explore the best laptops with unbeatable prices at our laptop shop. The project demonstrates proficiency in web development with a focus on user experience and responsive design. Engage with the project to see the detailed implementation!

EPhone: Mobile E-Commerce Platform

• Developed an intuitive mobile e-commerce platform catering to electronic gadgets, with a focus on smartphones.
• Implemented a user-friendly interface using HTML, CSS, and JavaScript to enhance the shopping experience on mobile devices.
• Integrated a dynamic product catalog showcasing the latest smartphones with detailed specifications, images, and pricing.
• Designed with responsive web design principles to ensure optimal performance across various mobile devices and screen sizes.

The "EPhone" project serves as a digital storefront for electronic enthusiasts and smartphone shoppers, offering a wide range of products with detailed information, reviews, and ratings to help users make informed purchasing decisions.

To-Do List Web App

• Developed a dynamic to-do list web application using HTML, CSS, and JavaScript.
• Implemented features for adding tasks, marking tasks as completed, and deleting tasks for a user-friendly experience.
• Designed with responsive web design principles to ensure compatibility across various devices and screen sizes.
• Enhanced user interactivity with real-time updates and a downloadable task list functionality.

The "To-Do List Web App" project offers a simple yet effective solution for managing tasks and staying organized. Users can easily add, mark, and remove tasks, making it a handy tool for daily productivity.

Interactive Web Calculator

This project entails the creation of an interactive web-based calculator using HTML, CSS, and JavaScript.

The calculator provides basic arithmetic operations such as addition, subtraction, multiplication, and division, as well as the functionality to clear the display, delete characters, and compute results.

The calculator interface is designed to be user-friendly and responsive, ensuring compatibility across various devices.

QR Code Generator

• Developed a web application for generating QR codes from text or URLs, enhancing digital communication and sharing capabilities.
• Implemented with HTML, CSS, and JavaScript, ensuring cross-browser compatibility and responsive design for seamless user experience across devices.
• Utilized the QRCode.js library (qrcode.min.js) to generate QR codes dynamically based on user input, offering real-time preview and customization options.
• Designed an intuitive user interface with features for adjusting QR code size, color, and error correction level to meet various requirements.
• Implemented a clear button functionality to reset the input field and clear the QR code display, enhancing usability and convenience.
• Enhanced accessibility and usability through keyboard navigation and screen reader compatibility, ensuring inclusivity for all users.

The QR Code Generator project provides a simple yet powerful solution for creating QR codes on the fly. Whether for sharing website URLs, contact information, Wi-Fi credentials, or other data, users can easily generate QR codes with customizable settings to suit their needs.

This project serves as a valuable tool for businesses, marketers, educators, and individuals seeking to leverage QR codes for various purposes, including marketing campaigns, event promotions, digital payments, and more.

Signature Box

• Developed a web application for capturing and downloading digital signatures.
• Implemented HTML, CSS, and JavaScript to create a responsive and user-friendly signature interface.
• Utilized HTML canvas element for drawing signatures with mouse or touchscreen input.
• Integrated features for clearing the signature canvas, changing font size, and downloading the signature image.
• Ensured cross-browser compatibility and responsive design for seamless user experience across devices.

The "Signature Box" project provides a simple yet effective solution for users to create and download digital signatures. Whether for signing documents or adding personal touches to digital artwork, users can easily draw their signatures and download them in image format.

This project serves as a versatile tool for individuals, businesses, and organizations seeking to streamline signature capture and integration into their digital workflows.

Password Project

• Implemented secure password generation algorithms to create strong and unique passwords for enhanced online security.
• Utilized HTML, CSS, and JavaScript to develop a user-friendly interface for generating passwords with customizable settings.
• Integrated features for specifying password length and including various character types such as uppercase, lowercase, numbers, and special symbols.
• Designed with responsiveness in mind to ensure compatibility across different devices and screen sizes.

The "Password Project" aims to provide users with a convenient tool for generating strong and secure passwords tailored to their specific requirements, thereby promoting better cybersecurity practices.

Google Clone (Still Working on It)

• Developing a Google search engine clone using HTML, CSS, and JavaScript.
• Implementing responsive design principles to ensure optimal user experience across various devices and screen sizes.
• Utilizing Flexbox and CSS Grid for layout structuring and positioning of elements.
• Integrating JavaScript to add interactive features such as search functionality and button actions.

The "Google Clone" project aims to replicate the essential functionalities and user interface elements of the Google search engine. Currently in progress.