MUHAMMAD HAMMAD 👋
A Passionate MERN Stack Developer 🖥️ having 3 years of Experience in web application development.
Overview
This is a modern web application developed for a driving school platform based in Ireland, allowing students to search for certified instructors, book driving lessons, and pay securely via PayPal. I contributed as a React frontend developer, focusing on building dynamic user interfaces, seamless user experience, and robust state management for both instructors and students.
The platform is divided into two primary modules: Instructors and Students, each with its own dashboard and unique feature set.
Key Features
👨🏫 Instructor Module
Availability Management
Instructors can create and update their weekly availability by selecting days, time slots, and duration directly from an intuitive calendar interface.Booking Requests Dashboard
React components display booking requests categorized into: Pending, Accepted, and Completed. Instructors can respond to requests with real-time UI updates.Ratings & Feedback
Students can leave reviews, and instructors can view their average ratings and feedback summary on their profile.Finance & Withdrawals
Integrated UI components to show instructor earnings, payout history, and initiate withdrawal requests through a clean and responsive design.In-App Messaging
A live chat system built with real-time interactivity, allowing instructors to communicate with students via a support channel.
🧑🎓 Student Module
Instructor Search (Geo-based)
Students can search for instructors within a 20km radius of their location. Interactive maps and filters enhance the searching experience.Booking Lessons
Students can view available time slots, select a preferred instructor, and book driving hours using a guided, multi-step booking form.PayPal Integration
A smooth checkout experience using the PayPal SDK embedded into the frontend, enabling secure and fast payments for lessons.Booking Confirmation & Status Updates
Students get real-time updates when instructors accept or reject their booking. Visual indicators and timelines help track the lesson journey.Progress Tracking
Students can see their learning progress and whether they have passed the driving test, all from a personalized dashboard.
Frontend Tech Stack & Tools
React.js: Core framework for building reusable UI components.
React Router: For seamless navigation and role-based routing (Student vs Instructor).
Redux / Context API: For state management across authenticated components.
Axios: For API requests and error handling.
PayPal SDK: For integrating payment functionality into the frontend.
Google Maps API / Geolocation: Used for showing instructor proximity.
Bootstrap / Material UI: Used for consistent and responsive component design.
Challenges Solved (Frontend Focus)
Dynamic Time Slot UI: Built complex calendar components that supported instructor availability management and student booking in real-time.
Responsive Role-Based Dashboards: Ensured fluid user experiences across different devices, with dashboards tailored for both students and instructors.
Real-Time Feedback and Chat: Integrated WebSocket-based components for real-time chat and instant booking updates.
Payment Flow Handling: Managed payment state transitions and UI updates, including error handling and transaction status confirmation.
Results/Conclusion:
This project showcases my capabilities in building highly interactive React applications with real-time features, integrated third-party APIs, and a clean, user-focused design. My work on this project highlights frontend engineering skills, component architecture, and attention to usability — all tailored for a real-world, service-based platform.
