Table of contents
RepairRadar is an open-source platform that connects mechanics with vehicle owners. Mechanics can register themselves and set up their profiles. Customers can sign in and find nearby mechanics through an interactive map. Customers can contact different mechanics and request appointments. Mechanics can approve or reject those appointments depending on their schedule. Customers can also leave ratings and review once their work is done.
A lot of times when people are traveling and they face vehicle problems. It's hard to find a mechanic nearby. The shops are far away or people don't know where the shops are and they don't know how to contact a mechanic. Even if they do find a mechanic, the mechanic might be quite busy with other vehicles and people will have to wait hours for their turn.
This is where I came up with the idea of RepairRadar. A way to connect mechanics with customers. Both can communicate easily and schedule appointments. Leave reviews and ratings so other customers can have a better idea of which mechanic to choose.
👷Reason for Building RepairRadar
To complete the project. I leave most of the projects incomplete.
To learn AWS Amplify. I was looking to learn a new technology.
To improve my portfolio.
Of course for the swags and prizes .🤣
Customers and Mechanics can register themselves.
Customers can find mechanics through the map and visit their profiles.
Customers can choose a time and write a description to request an appointment.
Once the work is done and marked as completed by the mechanic, the customer can add a review.
Customer can start a chat with the mechanic.
Mechanics will set up their profiles by uploading a profile picture and giving their shop location.
Mechanics can view their profiles.
Mechanics can edit their profiles.
Mechanics can accept or reject the appointments requested by different customers. Once the work is done, the mechanics can also mark the appointments as completed.
ReactJs - For building the Frontend.
Amplify UI - For building the UI.
Typescript - For type checking and writing better code.
Leaflet - For adding maps.
AWS Amplify - For the backend (Authentication, Database, File Storage, UI Components).
Vercel - For deployment.
-- components -- Chat -- ChatItem.tsx -- Message.tsx -- LocationPickerMap -- index.tsx -- LocationMarker.tsx -- Sidebar -- index.tsx -- SidebarItem.tsx -- AddReviewModal.tsx -- AppointmentItem.tsx -- AppointmentRequestModal.tsx -- AppointmentsSection.tsx -- Header.tsx -- LayoutItem.tsx -- Map.tsx -- Review.tsx -- ReviewViewModal.tsx -- context -- AuthContext.tsx -- hooks -- useImagePicker.tsx -- usePickLocation.tsx -- hoc -- withAuth.tsx -- withNoAuth.tsx -- layouts -- AuthLayout.tsx -- ChatLayout.tsx -- CustomerLayout.tsx -- Layout.tsx -- MechanicLayout.tsx -- UserLayout.tsx -- pages -- customer -- FindMechanicsPage -- AppointmentsPage.tsx -- CustomerProfilePage.tsx -- MechanicProfilePage.tsx -- mechanic -- AppointmentsPage.tsx -- DashboardPage.tsx -- MechanicProfilePage.tsx -- MechanicProfileEditPage.tsx -- ChatPage.tsx -- EmailVerificationPage.tsx -- LandingPage.tsx -- LogInPage.tsx -- OnboardingPage.tsx -- SignUpPage.tsx -- routes -- authRoutes.tsx -- customerRoutes.tsx -- index.tsx -- mechanicRoutes.tsx -- types -- error.types.ts -- map.types.ts -- user.types.ts -- utils -- user.utils.ts -- index.css -- main.tsx
❤️Usage of AWS Amplify
I used AWS Amplify for the following features:
Generating UI Components
I set up authentication using aws cognito and also set up some additional attributes as they were needed for this kind of multi-role application where we have mechanics and customers.
I set up different Data Models for the storage of Users, Appointments, Reviews, Chats, and Messages.
I made a public S3 bucket for storing profile pictures of mechanics.
4- UI Components
I also used AWS Amplify for generating ReactJs UI components from a Figma file.
I was new to AWS Amplify so it took me around 10 days to learn and experiment with the different services of AWS Amplify.
I am not good at design. So I had to search a lot to find design inspirations.
Lack of time. I work as a freelancer so managing the time was a bit hard for me.
These are some features that I was looking to add but did not get enough time. But these can definitely be added in the future.
Mechanics can add services and Customers can choose a particular service while booking an appointment.
In-app payments. Customers can pay directly through the app.
Analytics and Reporting.
Live Preview: https://repairradar.shahmirfaisal.com/
Github Repo: https://github.com/shahmirfaisal/RepairRadar
I'm Shahmir Faisal, currently pursuing my Bachelor's in Computer Engineering. I've been in the world of coding for 4 years now. I'm a web developer and my current stack consists of React, React Native, Next, Node, Express, and MongoDB. But now I will also include AWS Amplify🔥.
Sorry, but I thought I should do some promotion as well :(
I work as a web developer tutor and have taught a lot of students in the past year on Fiverr. Feel free to reach out to me.