Description

Find Mechanic – Premium React Native Full Application with Backend NodeJS for iOS & Android

Application Walkthrough

Have you ever wondered about a Service Providing Hybrid Application where you have an app from which you can request any service by adding relevant details to it and you don’t have to go anywhere for it and on the other App there are many service providers from which one can perform that job in real time while the you can can see their work status, give payment and provide feedback on their work.

However one such case is finding and hiring the best mechanic near you for your car wherever you are – Find Mechanic.is on such on-demand Service providing Hybrid Mobile Application build using React Native v0.61.4 for providing Mechanical service to the consumer. It facilitates both user and service provider by providing user ease in getting his/her vehicle fixed anywhere any time at very cheap cost while mechanics have the opportunity to get his/her earnings easily while increasing his/her profile reviews and ratings. Find Mechanic is not just an application, it’s a medium for big business opportunities.

What Does App Package Include?

• React Native Full Source Code
• Android Source Folder
• iOS Source Folder
• Backend NodeJs
• Database Mysql Migrations
• FCM Integration for real-time push notifications
• Twilio SMS service for phone number verification
• Stripe Payment Integration

Installation Requirements

In order to use and run the app on Android and iOS you need to have knowledge of React Native. You also need to be able to install React Native and its dependencies on your machine. We recommend you to use the React Natice official installation guide to get started https://reactnative.dev/docs/getting-started. The App is built on React Native v0.61.4.

For Backend, you must have knowledge and understanding of NodeJs and its AdonisJs framework v4.1.0. For Installation we remommend to to follow the guide on https://adonisjs.com/docs/4.1/installation

We then will be happy to answer all the app related questions/issues.

Other Services Dependencies

• Google Map Credentials in order to enable Google Map Services and Location
• Notifee License for availing full features of notifications.
• FCM (Firebase) Account for integrating Push Notifications.
• Twilio account for SMS service for phone number verification
• Stripe account for Payment Integration

Application Features

• 2 in 1 App: Single app with role based handling of User and Mechanic Screens.
• Backend NodeJs (AdonisJS Framework):  A Full fledge application integration with React Native both Android and iOS
• Left Navigation Menu Using React Navigation: Left navigation menu contains all the features using React native navigation with easy customisation.
• Network Connection Handler: All the Screen reconfigured with Network availability and if there is no internet then the screen will be directed to proper No Network Connection Screen.
• Predefined Data binding & Backend Integration Ready: All the screens are properly structured and data are bonded with dummy values. Code in all the screens are written in such a way that it can easily be integrated to any backend technology stack.
• Proper handling of Empty Pages, Screen Loader and Pagination: All the Screen contains proper handling code of no data message, screen loader for calling backend apis and pagination (infinite loader) with easy customisation.
• Toasts & Alerts: Added ability to display alerts, success , errors, loadings , and more.
• Animations : Beautiful Animations are added on each screen and items.
• Ask Permission: Added permission for location, gallery, camera and wifi on both iOS and Android using react native permission library and for full documentation please read the link https://github.com/zoontek/react-native-permissions.
• Responsive Device: Application is responsive to support screen sizes from 4” to 10” devices.
• Media Viewer: React native media viewer is supported to view images using react native image zoom view. For full documentation please see the link https://github.com/ascoders/react-native-image-viewer
• React Native Elements: React native elements are used for designing the application theme and custom components are built like Button, ListView, Search Bar, Header Bar , Popup Modal, TestArea, Images etc for reusability. For full documentation please see the link https://reactnativeelements.com/docs/

Main Features

• Authentication
  • Login Screen
    • Modern login system with phone number that either logged in to your account or ask our username if not already registered.
  • Register Screen
    • Separate registration screens for mechanic and user onboarding.
  • PIN Code Base Phone Number Verification
    • Added ability for users to verify their phone number using sms pin code.
• Find Mechanic
  • Maps and Geolocation
    • This feature allows you to pinpoint any location you want and map out different routes to locate mechanics near you.
    • Nearby mechanics will be shown as a custom pointer on the map and tapping on either mechanic will take you to the Request New Service Screen.
    • Access user’s Geolocation using GeoLocation Plugin
  • Search Another Location
    • You can change your location through the search location screen.
    • You can also set your home location or bookmarks to your favourite locations on the search location screen.
  • Filter Mechanics By Vehicle Type
    • You can choose between different vehicle types (Car, Bike, Bus, Truck etc) and filter mechanic based on vehicle type.
  • Satellite Map View
    • You can choose between different map view types like earth view or standard view etc.
  • Mechanic profile View and Request New Service
    • Each mechanic point show a popup contains the relevant information regarding the mechanic for example: rating, total reviews, visiting charges and distance.
    • You can tap on any mechanic pointer to show their profile or request a new service.
    • Mechanic profile contains the personal information & reviews.
• Profiles
  • User Profile
    • User Profile screen to view and edit user personal information like username, profile image, phone number, home address, gender, date of birth etc
    • React Native Image Picker Library is configured for choosing images from Gallery or Take Photo from Camera on Both iOS and Android.
    • Full Documentation of React Native Image Picker can be found on link https://github.com/react-native-image-picker/react-native-image-picker
  • Mechanic Profile
    • Mechanic Profile screen to view and edit information like username, profile image, visiting charges, shop address, skill tags and vehicle type, phone number, home address, gender etc
• My Services
  • Service Listing and Tabs
    • Service listing shows all requested services with service details and service completion statuses.
    • Service tabs filter the services by recent requests, completed services and archived services.
  • Request New Service Screen
    • Added ability for users to request new service using text, description, vehicle type, model, date, time, description and images
  • Service Assigned Mechanic and their job statuses
    • Service listing als*details of assigned mechanic and their job statuses
    • Also feedback can be provided in the form of stars and review to the mechanic after completion of Job.
  • Service Invoice
    • Service invoice can be viewed directly by tapping on the view invoice button after service status changed to completed.
  • Multiple Workflow of Service Request & Completion
    • Service accomplished by various stages of workflow using different actions for example Service accepted, Assign Mechanic, Remove Mechanic, Mark Service as completed, Invoice Paid etc.
    • Custom status can be added or removed based on requirements.
• Job
  • Job Listing and Tabs
    • Job listing shows all requested services in the form of job to the assigned mechanic with service completion statuses.
    • Job tabs filter the jobs assigned to mechanics by Picked, Today’s Job and My Jobs.
  • Job Details Screen
    • Job details screen full detail of service like service type, title, date, time, images, description, status etc
  • Job Timeline
    • Job timeline show each job status in the form of timeline by date
  • Job Invoice
    • Job invoice shows the invoice of the job completed by the mechanic however mechanics have the ability to add or edit items in the invoice and then send it to the user for payment.
  • View Job Feedback
    • Job feedback can be viewed by the mechanic after the user marks the service/job completed and gives a rating to the mechanic.
  • Multiple Workflow of Job
    • Likewise, Job also has various stages of workflow using different actions for example Job accept, Leave Job, Cancel, Request for payment, Job Finished, Start Job, Arrived to Location etc.
    • Custom status can be added or removed based on requirements.
• Notifications Center
  • Listing Screen
    • Notification listing shows all the notifications related to service, chat messages and application updates.
  • Firebase (FCM SDK) Push Notification Support for iOS and Android
    • App is all preconfigured with FCM SDK and can be easily integrated on both Android and iOS devices.
  • React Native Notifee Library Configuration
    • React Native Notifee library is pre configured with this application to show beautiful custom notification to the user on either foreground or background.
    • Full React Native Notifee Library Documentation can be found in the link https://notifee.app/react-native/docs/installation
• Wallet
  • Detail Screen
    • Added ability for user and mechanic to maintain their credits in virtual app wallet, view transaction history, Add Credit to the wallet through Credit Card, Easy Paisa and Scratch Cards etc.
    • Ability to send credit to another user using their contact number.
    • Ability to add Credit card information to the system.
• Rewards
  • Reward Screen
    • Added ability for users to receive timely rewards against their requested service and keep their points in the form of a membership card.
    • Mechanics also receive rewards after completion of each job.
    • Custom rewards can also be availed using credits from their wallet.
  • Points & Voucher Screen
    • Ability for users to view their points history.
    • Voucher can also be availed by the user.

• Packages
  • Weekly & Monthly Packages for Mechanic
    • Ability for mechanics to subscribe any of the packaged from weekly or monthly and start performing their first jobs.
  • View Active Package
    • Ability for mechanics to view fun details of their current subscribed package, remaining count of jobs, Package Benefits and Terms & Conditions.
• Help & Support
  • Report a Problem?
    • Ability for users to report any type of problem related to application.
    • User can their responses of their reported question
  • Ask a Question
    • Ability for users to ask any question and then can see their responses on a separate screen.
  • Predefined Support Question
    • Ability for users to search through the list of predefined questions in the form of a blog and can read the answers.
• Settings
  • General Settings
    • Ability for users and mechanics to set their language and can read application Terms & Conditions and Policy.