Home / Lab / Sajag

Sajag Prototype

Public welfare app · by Shahrukh Sheikh

Civic tech · React Native · Early prototype · Not released

See a problem in your street? Report it with a photo and a place.

Sajag is a prototype of a phone app for reporting civic problems: sign in with your phone number, pick your state and city, attach a photo, let the phone add where you are, say what's wrong and choose a category. Five categories are built in: garbage dumping, broken roads, street lights, water supply and illegal construction.

See the four screens What works, and what doesn't

Prototype · Not released · Screens are renderings drawn from the code, not screenshots

Four phone screens of the Sajag prototype side by side: phone login, OTP, state and city selection, and the report form.
Drawn from the app's code, with invented data.

At a glance

4

Screens

Phone, one-time code, place, and the report form.

5

Issue categories

Garbage, roads, street lights, water supply and illegal construction.

3

Things attached to a report

A photo from the camera or gallery, the phone's coordinates and a written description.

0

Servers in the project

The app expects an API for sign-in and reports that doesn't exist yet.

Why it exists

A broken road is easy to see and hard to get fixed.

Most civic problems are reported by whoever is angry enough to phone an office, and the office rarely gets a photo or a location. Sajag starts from the opposite end: a resident takes a picture where the problem is, the phone supplies the coordinates, and the report arrives with evidence and a category the right department can act on.

This repository is the first step only: the app's sign-in and report screens. The server, the review side and the status tracking aren't built.

How it works

Five steps from a problem to a report.

  1. Sign in

    Enter a ten-digit phone number. The app asks the server to send a code.

  2. Verify

    Enter the six-digit code. The server returns a token, which the app keeps.

  3. Place

    Choose a state, then a city in it.

  4. Capture

    Take a photo or choose one, and let the phone read its location.

  5. Describe

    Write a title and a description and choose one of five categories.

The screens

The four screens, drawn from the code.

Design renderings drawn from the app's code

I couldn't run the app for this page, so these are renderings built from the source: every label, field, button and colour comes from the code, and the data is invented. The app uses React Native's plain default styling, so the screens are simple.

The Login screen: Enter your phone number, a phone number field and a blue Send OTP button.
1. Phone number. A ten-digit number, checked before anything is sent.
The OTP screen: Enter the OTP, a six-digit field and a green Verify OTP button.
2. One-time code. Six digits, and a token is stored on success.
The location screen: Select State and Select City pickers and a Continue button.
3. Place. A state, then a city from that state.
The Report an Issue screen: an Upload Image button, a photo preview, the phone's coordinates, a title, a description and a category picker.
4. The report. Photo, coordinates, title, description and category.

What is in the code

Everything the prototype has.

Sign in

  • Phone number entry with a ten-digit check.
  • One-time code sent by the server and verified by it.
  • A token saved on the phone and sent with every request.

Report

  • A photo from the camera or the gallery, with a preview.
  • The phone's coordinates, read with a permission prompt on Android.
  • A title, a description and one of five categories.

Place

  • A state and city picker with three states and nine cities, built into the app.
  • The chosen state and city are passed to the report screen.

Built with

The stack.

AppReact Native 0.79 and React 19, with React Navigation's native stack.
Device featuresCamera and gallery through react-native-image-picker, location through react-native-geolocation-service, react-native-maps installed.
Networkaxios, with a token added to every request from local storage.
ServerExpected at /auth/send-otp and /auth/verify-otp. Not part of this project.

Being honest

Where it stands.

  • It doesn't run end to end. The app's entry point is still React Native's starter screen, so the navigation set up for Sajag is never shown.
  • Some screens would crash. The report screen uses a hook it never imports, and the state picker takes its picker from a place that no longer provides it.
  • Sign-in ends at a screen that doesn't exist. After the code is verified the app goes to "Home", which isn't defined.
  • A report can't be sent yet. There is no submit button and no call that uploads the photo and details.
  • The place isn't used. The chosen state and city are passed along but the report screen doesn't read them.
  • No server. The address in the code is a placeholder, and the token is kept in plain local storage.
  • Not anonymous. It signs in with a phone number.
  • Renderings, not screenshots, because I couldn't run it for this page.

FAQ

Questions people ask first.

What is Sajag?

An early prototype of a mobile app for reporting civic problems, such as garbage dumping, broken roads or a faulty street light, with a photo, the phone's location and a category.

Are these screenshots?

No. The Android toolchain isn't installed on my computer at the moment, so I drew these from the source code. The labels, fields, buttons and flow come from the code, the data is invented and the spacing is approximate.

Can I download it or use it?

No. It is a prototype, not released, and the code doesn't run end to end yet. The project also has no server: the app expects one that I have not built.

Does it work anonymously?

No. This version signs people in with a phone number and a one-time code, so reports are tied to a number. It is not an anonymous app.

Want the notes from reading the code: what the prototype gets right, and the six things to fix before it can send a report?

Read the case study