Lead Mobile Developer· 2023

DYO Painting Service App

React NativeHome ServicesReact NavigationContext APIREST API

Overview

DYO is a service app that connects users with local painters and renovators. Users post service requests, and professionals view and respond with quotations. Once a quotation is accepted, the app matches the user and professional. The app also includes messaging, galleries, and the ability to leave reviews and ratings. Built with React Native.

Navigation and architecture

Built with React Native, using stack navigators for drill-down flows and a top tab navigator for switching between sections, with app state handled through React's Context API. Every screen is built from custom components rather than an off-the-shelf UI kit.

Painter profile

The professional side centres on a profile stack: personal information, with its own screens for editing profile details and service areas, a separate service types stack, certificate uploads, a work gallery, and a reviews section, each with their own dedicated flow rather than a single flat settings page.

Professional profile: service areas and service types.

Quotation and project lifecycle

New requests arrive as unquoted projects, jobs with no quotation or offer yet, where the painter reviews the details and submits a price. Once quoted, a project shows its price and proposed start date and can still be revised before acceptance. From there, projects move through ongoing (accepted, in progress) and completed states, each showing the full job details relevant to that stage.

Professional view: unquoted, quoted, ongoing, and completed jobs.

Development status

At the point of this walkthrough, the app was running on dummy data while the REST API integration was in progress, wiring up the GET and POST requests behind each screen.

A walkthrough with my own commentary is on Loom: https://www.loom.com/share/88358869b36744eabdf1dbcdc622cb11