3 Hour Challenge - Building a Trade Tracker for mobile and web using React.js + Supabase

Recently I challenged myself to build an app from scratch that could help my track my trade ideas - in just three hours.

Here is the main idea I had with this app - 

1. The app should be responsive, so I used material-ui - so I could jot down ideas easily using my phone

2. I used supabase with the app - so I wouldn't have to setup the database/backend and host it

3. I hosted the app on netlify free tier - so deployment and builds become as easy as pushing to Github

These are the main features I had in mind for this app - 

1. A multi-tab mobile app like UI for quickly switching between screens

2. Adding trades in the app and store them in a database

3. Some custom utility like adding new instruments on the fly

Setting up the backend with supabase

Setting up the database with supabase is as simple as creating a table using the built-in UI editor.

Skipping the obvious setting up of the tables - the most striking feature of supabase database is the RLS or Row Level Security that can be used to control individual rows using policies. After a few Google searches, it became clear that I needed to setup policies to allow access to my React app to read/write to a table. 

Creating the React.js application

For the application, I used a bottom navigation based layout, that used different components, as shown below - 

It allows the user to select the instrument, a strategy name and describe the strategy in detail. The settings view has some basic options to add new instruments, delete test trades (useful when testing the app) and other features I plan to add to make this app really useful - like filtering trades based on the instrument name etc.

Connecting the app to supabase was really simple - just add your connection string and the key. Then create a supabase client and basic CRUD works really well. It is possibly the simplest integration with a database+backend.

Material UI components handled the rest - responsive components that can be used on the mobile easily without any additional setup.

To finish it up

To deploy it I just had to push it to Github and that's it - netlify builds it automatically as new commits are pushed to the app. And I get my very own app hosted in a couple of hours.

Building this app from scratch was to really just test my skills in frontend. Three hours may sound like a lot for an app so simple - but being out of touch with React.js for too long, it was probably more challenging for me than a seasoned UI developer. Still I had fun building it. I also plan to flesh out the features and add new ones - make it really useful for anyone who wants to quickly note down their trade ideas.

Watch this space for more projects - I plan to explore complex topics in quant trading, AI, security and more soon.