I have a long history as an Angular/Ionic developer but was noticing that react native seemed to be the new trend in terms of hybrid mobile development. I wanted to continue to keep my skills sharp and in line with what the job market was looking for, so I decided to learn React Native.

Background

As someone that is car-less in a big city, I often get frustrated by the way that cars park. Wether it is in the middle of a cross walk, a bike lane, or a bus only lane, cars often seem to park in ways that are very inconvenient to a pedestrian like me. Unfortunately, the city I live in is just too big for all of these illegally parked cars to be ticketed, but I always wondered what it might look like to have an app for citizens to submit pictures of illegally parked cars for review and possibly post-hoc ticketing. In comes TattleTires!

TattleTires

TattleTires is my take on this idea, where users can submit a photo along with street(s) and other notes for future review. The data is submitted via a Node.js api connected to MongoDB via mongoose, and the photos are stored in an AWS S3 bucket and then served via a cloudfront url. This project also helped me learn more about AWS, Node.js apis, and mongo atlas.

App Structure

There were a couple major features that I wanted within the app that would allow it to serve as a proof of concept

User login/logout with roles (User/Submitter vs. Moderator/Reviewer)
User submission and status tracking
Moderator review and actions

I figured that with these three major things it would allow for the basic functionality within the app. Citizens like me would be able to create an account, submit pictures and details of illegally parked cars, and track the status of those submissions through multiple review stages. Parking enforcement would be able to review these submissions, take actions (approve or deny submissions), and issue tickets to the proper cars.

There were also a couple minor features that would take this from a proof of concept to a "v2" prototype:

A user point system

For example, if a user was consistently uploading high quality pictures with good notes and accurate street addresses, they should be rewarded or "promoted". In these scenarios users could be fast tracked to approval without manual review, and would only need review if the car driver disputed the ticket once it was issued. On the flip side, users that abuse the system, or upload poor quality images and/or innacurate notes and addresses should be punished. In those scenarios those users accounts could be limited or closed depending on severity.
Using EXIF data to fill out more detailed ticket

There might be opportunities to gather EXIF data from the images to create a more detailed "ticket" upon submission which would allow for better and more accurate review, and also more accurate status tracking. For example, if we could take the time and geolocation data the reviewer could compare to the notes and address provided to make a more accurate decision. Due to this taking more time the status could be updated to "in progress" or "under review" while the moderator is comparing all this information.
User rewards

We can assume that there are other people like me that would take time out of their day to take pictures and submit illegally parked cars just because it makes the community a more pleasant place for pedestrians, but in order to make this system more effective we would want the most users we can possibly have. In order to attract more users there coud be a reward system if the user is in good standing with the point system (#1). I have a basic concept in my head where a percentage of the ticket fee paid by the driver could be sent to the user's account and cashed out once it hits a certain amount. This would allow for a sliding reward scale for users with really high scores (to reward frequent, high quality effort) by increasing the percentage as the user gains higher and higher score. I can see arguments against this because the revenue generated by parking tickets should go to the city to improve and maintain the infrastructure, but in my head the percentage "lost" to user payout would be lower than the revenue gained by all the extra parking tickets that are issued. If this presented legal challenged then perhaps the rewards could be giftcards to local businesses or experiences throughout the city.

Problems I faced

There were a couple roadblocks that I encountered when developing TattleTires.

How to store the images that were sent to the api

If we assume this app is a prototype for a large city with potentially 1M+ users, it doesn't make any sense to store these photos locally like in assets/images. So my next thought was to store them in a cloud service like AWS or Azure. I had done a little work in AWS in the past so that's what I decided to use in hopes that it would make the learning process a little easier. I setup the aws-sdk and successfully submitted images from the app to my s3 bucket. Then I realized that I was not able to serve these images using the link in s3 unless I wanted to make the read access to the files in the bucket 100% public which I didn't like. After a little more googling and research I learned about CloudFront which can be used as a CMS and provides links that can be used to display the images on the app. This solution seems to be working well for me and I just store the cloudfront link in the mongodb which makes retrieving them very easy.
How to manage users, authentication, and roles

I had never personally created an app that required users and user authentication so I was unsure on how to implement this within TattleTires. I knew that there are a lot of security risks when it comes to authentication, especially with store user login details. Even though I didn't expect this app to ever have any real users I wanted to make sure that I was building it under the assumption that there could be millions. I looked into create my own system and how to properly store login details, but I decided that because this app was meant to be used as a way to learn react native I didn't want to spend tons of time also learning how to implement custom authentication systems. I then looked into what was already out there in terms of user management systems and I found Clerk which offers a free tier that I thought would be perfect for my needs. I used their api to create my own login page, and used their metadata feature to specify the users role. This ended up being a perfect solution for my POC.