Building and deploying a personal project cost effectively ( RN app, ReactJS portal, Java microservices API on GCP cloud )
Tags: javascript, webdev, react, showdev
Published: 2021-01-22 14:26:39

# TL;DR
I wanted to build a learning platform as my side project and ended up creating it using React-native (Mobile app ), ReactJS ( Web portal ) talking to Java spring-based microservices backend. All of these are hosted in GCP at a cost of just $15 per month. 

Portal: https://portal.microideation.com/about
Mobile App: https://play.google.com/store/apps/details?id=com.microideation.app

# Long Story 

The lockdown period of 2020 gave me time to think of a better and easy way of learning the topics. There are different coding groups in Instagram that generate simple content using images and we can swipe and see each of them. But most of the content is generated using professional design tools and may not be a necessary skill set of a seasoned programmer.

This gave the idea for microideation. This is a simple platform where a developer or a person with skill can go and create content using basic formatting and images. These are presented to the user as ideations. The ideations are 500 characters or less content and need to be self-contained. They may have links to related content. Users can use simple swipe gestures to see the content and learn about topics. Each topic tasks less than 30 seconds or read time and explains the concept concisely. If the user is interested in a particular subject, they can freeze and follow topics from that.

{% youtube 2B5vs_e4NHs %}

I am primarily a backend developer with good knowledge of cloud deployments and DevOps. But frontend and mobile development were not my forte. I had some experience in android but that too was not on designing UI or UX. 

My profile: https://www.microideation.com/mi-profile.html

### Mobile App - React-native

The first decision I had to take on was the framework to be used for mobile app development. I didn't want to use native code ( Android or iOS ) as that would be double work. Then the choices were RN and Flutter. I also required the web portal for the ideators to create content and for that ReactJs was a good fit. Since I need to learn ReactJs, it made sense to use RN for mobile development. Also for the package management and quick bootstrapping I used expo.

The design, color schemes, and the UX were all done by myself over a long period of time. Since I don't have much of designing background, I tried multiple iterations and fixed what looked simple and presentable. 

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

### Web portal 

As specified before, my choice for the Web portal ( for creating the ideation content ) was ReactJS

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

### API Layer

My primary area of expertise is Java Spring-based microservices and this was the easy part for me. Created services for auth, gateway, ideations, and notifications as Spring boot applications. There was sufficient caching and throttling of non-critical functions for handling the load and serving requests as soon as possible.  

### Hosting them all ( GCP ) 

Building something is one part. Hosting it effectively and making it available to everyone is a totally different story. Again my DevOps experience helped me a lot here. 

I evaluated the cheapest ( yet familiar ) options on the cloud and ended up choosing GCP. They have 3 months free credit and the cost was also less for them.

For a personal project, you end up paying from your pocket and need to make optimum use of the compute resources. I used a mix of caching and queuing at the API layer to handle the load. Also, the choices of instances were also important. 
GCP has the lowest cost of running when you select the region as Iowa. You will also get an f1-micro instance ( 700 MB shared CPU ) free. I wired up an Nginx for service the reactJS portal on this f1-micro with some nice caching. The rest of the services ( MySQL DB, Rabbitmq, all the microservices ) are running on an e2-small machine ( 2GB ram and 2vCPU ). The services are optimized to run with a small footprint. I do accept that this running with a risk. I might turn off the notification service for some time as currently there is no login mandatory for checking out. 

There is no load-balancer setup for the project and the load is handled by the Nginx alone. 

So the only cost from GCP at the end of the day is for the e2-small instance, bandwidth, and storage ( which are nominal ).

## Footnotes

Please note that I am in no way claiming this as a perfect setup for a real production application. I am well aware of the availability and consistency requirements of a real app. 

This is a setup for a personal project being bootstrapped. 
Once the traffic picks up and if I am able to get some income, I will be moving to a better architecture with auto-scaling and better availability. 

But till the time, this is an ideal setup that is cost-effective.