DO Hackathon: Final Submission
Tags: dohackathon, react, python, typescript
Published: 2021-01-04 12:05:50

![HNY](https://media1.tenor.com/images/037d1d63da09fd3f0cbf78c0c5a81340/tenor.gif?itemid=10810207)

## What I built

A catalogue of all the products along with whole search functionality. It may sound simple, but once you follow along with the series you can understand the challenges faced and how it was not so straight forward.

### Category Submission:

> Built for Business: Build something that could become commercial and earn big bucks. This could be anything from a professional tool to something that’s a part of your very own business

### App Link

[Digital Ocean application link.](https://product-list-de725.ondigitalocean.app/)

[Vercel Deployed link](http://bpdproductlist.vercel.app/)

[Netlify Deployed link](https://bpdproductlist.netlify.app/)

Surprised by seeing three different links? 🧐

More info in the `Additional Resources/Info` section of the post.

### Screenshots

![Previewed](https://dev-to-uploads.s3.amazonaws.com/i/6mlhc2guk1393cr67k90.jpeg)

_Generated using previewed_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9lm1esy01biwnc4vp8jp.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wegtyuyayqd9rwkjv14c.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gn6s0vwu3tqqk8aer963.png)

### Description

### Link to Source Code

The complete web application, python code, algolia code is available in this [repository](https://github.com/Rohithgilla12/BPDProductList).

But the Digital Ocean App Platform doesn't support the creation of the web application is nested in a different folder, so had to create a different repository for the web application code.

You can find it [here](https://github.com/Rohithgilla12/product-list).

### Permissive License

MIT License

## Background

We own a business that distributes medicines to the retailers.

One of the primary concern what business faces is when a new client comes in and wants to buy products from the business the main thing they ask for is the product list. The product list is like a menu card when you visit a restaurant.

Traditional way: From the past few years when the business faces the situation, they tackle it by sending the excel sheet to the client.

But the concern is that not all clients are tech-savvy enough to open an excel sheet and search for the products they want. Many clients started asking to send in a different format and the business team decided to send it in the PDF format. That's when this caught me, I asked what do you do if a new product is added or a new company is added? That's when I got the idea to built for them, a **searchable product list**.

I always wanted to help the business in a technology perspective but never got the chance to do so. As people say "When the opportunities are closed, create one!". I followed the same here, and honestly, it worked well.

### How I built it

I used DigitalOcean’s App Platform. The whole platform is new and the overall experience is great.

A major part of the tech stack:

- Python
- Typescript
- Firebase
- Algolia
- Javascript
- Material UI

### Additional Resources/Info

Future Scope

This could be really expanded to a state where a user can upload excel files with fields and say which format they are in and done.

They can have a custom searchable catalogue of their products as a progressive web application 🔥.

Digital Ocean App platform will be really useful that time when this application scales, like having a database, scaling the servers if needed. Everything can be done within clicks and also the best part is we can have a backup of the snapshot for a really decent price.

The components feature in the App platform is really underrated feature.

Would be working on making this into a reality in coming months 😄

A quick comparison between the deployment solutions used, Netlify, Vercel and DO App Platform.

- Configuration files
- Nested folder app detection/selection
- Insights

**Configuration files**

Netlify uses `[netlify.toml](https://docs.netlify.com/configure-builds/file-based-configuration/)`

Vercel uses [`vercel.json`](https://vercel.com/docs/configuration)

`vercel.json` and `netlify.toml` are used for file-based configuration of the application. The options range from redirects, names, managing environments, handling redirects, headers and a few more.  Netlify has a wide variety over vercel, since it also has functions and other features.

**Nested folder app detection/selection**

This is something I would really expect to see in DO App Platform in a few months. Initially, I had my web application, python script and algolia script in a single repository. Given the repository URL, digital ocean doesn't let me choose the folder but simple throws an error, whereas in vercel and netlify you have the option to choose root folder.

**Insights**

This column in DO App Platform would really be their USP when compared to Netlify and Vercel. This is really amazing. We can monitor the various stats in a graphical representation that is missing in others.  I feel this is an important factor when hosting. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d15s8t2xweb3gclpg50q.png)

![Thanks](https://media1.tenor.com/images/40317e3f3b28d57c89edceb1d75832c2/tenor.gif?itemid=16119732)


Rohith Gilla