About RepairRadar

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.

🚩Problem

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.

💡Solution

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 .🤣

🔥Features

Authentication

Customers and Mechanics can register themselves.

Customer Features

Find Mechanics

Customers can find mechanics through the map and visit their profiles.

Book Appointment

Customers can choose a time and write a description to request an appointment.

Add Review

Once the work is done and marked as completed by the mechanic, the customer can add a review.

Chat

Customer can start a chat with the mechanic.

Mechanic Features

Onboarding

Mechanics will set up their profiles by uploading a profile picture and giving their shop location.

Profile

Mechanics can view their profiles.

Edit Profile

Mechanics can edit their profiles.

Appointments

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.

👨‍💻Tech Stack

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.

🧱Folder Structure

-- 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:

Authentication
Database
File Storage
Generating UI Components

1- Authentication

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.

2- Database

I set up different Data Models for the storage of Users, Appointments, Reviews, Chats, and Messages.

3- Storage

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.

😕Difficulties

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.

🤖Future Enhancement

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.

Dark Mode.
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.

🔗Useful Links

Live Preview: https://repairradar.shahmirfaisal.com/

Github Repo: https://github.com/shahmirfaisal/RepairRadar

🧑About Me

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.

🎇Conclusion

I have learned a lot of things by participating in this hackathon. It was a bit tough for me but still made an amazing app. Thank you Hashnode and AWS Amplify for organizing this amazing hackathon.

Shahmir Faisal