How to Build An App — The HARC Stack

If you’re just starting to build apps or websites, this article will save you months.

Find this post on my personal blog: overtcoder.com

I often mention that the hardest part of doing anything is figuring out how to do it in the first place. I have spent the last year building a scalable web application/app combo that is calculated to scale up to hundreds of thousands of users a month with no effect on performance.

When I first set out to make this app, my only experience in app or web dev was html/css. I had no idea where to even start. But now, I can introduce to you the great stack of 2020… The HARC stack!

Hasura — Auth0 — React Native — Cloudinary

Me trying to find out how to build an app that can scale to 1,000,000 users.

This collection of tools has been gathered via countless hours in the last year building React and React Native apps. They have great free plans that allow you to build your entire platform before your grand opening.

1. React Native — Front-End

Anticlimactic #1 but I enjoy React Native so much. It allows you to make both iOS and Android apps, and using Expo to build it made the initial setup so simple and allowed me to make iOS apps without needing a Mac. React Native uses Javascript… But I knew zero JS before I delved in React, so go ahead and npm start 😎. I made an app/website combo with React/React Native since the back-end code can be easily translated into one another.

2. Hasura GraphQL — Database/GraphQL Engine

Hasura creates your database and gives you a nice interface to view/manipulate your db data. Hasura is also really easy to connect to any front-end and uses GraphQL so you can make front-end API calls to query or manipulate the database. This means after you make your React Native project, you’ll make a simple wrapper (with Apollo) so you can get DB data from an. Hasura can also do this in Realtime so you can make that Messaging or Maps app you always wanted.

This is where I’m going to get heavy on the links. Hasura has repeatedly impressed me with their integrations and the documentation accompanying it. They seem to have dipped their toe in everything, so I’ll try to provide the most useful resources I could find while researching.

You can stop reading here, you only really need React Native and Hasura. But, if you want to make a really really good app that people will love and cherish, keep going.

3. Auth0 — User Authorization and Authentication

You can spend weeks/months learning Cyber Security and making your own authorization, or you could just get the free plan on Auth0. This way you can easily log users in and keep track of who is logged in so the wrong people aren’t making changes to accounts. Easily integrates with Hasura, allows you to get login/device information and communicate it with the database.

4. Cloudinary — Easy Image Storage and Retrieval

Images are so important in any application, so I wonder why it’s so hard to find out how to utilize them. To make your life easier, I’m introducing Cloudinary. Cloudinary is extremely simple to set up and proved to me the best way to store images and show them to the users on your app.

I tried using AWS and DigitalOcean but it felt like working against the grain at every turn. Cloudinary got pictures working for me in less than 30 minutes.

5. BONUS: Heroku — Deploy

This one is for websites rather than apps. Deploying is taking your fully built website and finally putting it out into the world. This brings in a whole new world of complications.

Luckily, Heroku makes it simple by allowing you to deploy straight from Github. It scales well but could get expensive fast if traffic increases. This is what I used to deploy my React website as I couldn’t add hosting to my pile of todos.

When using Heroku, I suggest using Namecheap as your domain provider as they can offer DNS with CNAMES.

Conclusion:

Since it’s all built in JavaScript, this stack integrates seamlessly with both web and mobile apps. My own platform was built using the HARC stack! Filled with users, profile pictures, realtime data, and location features in the app.

While it works well for a quick release, know that scalable doesn’t mean cheap. Luckily Auth0 and Cloudinary have Startup programs so you won’t stress over a monthly payment until you have the pleasure of increased traffic.

HARC was made by the shaking of my head going back and forth between my portable HD monitor and the code on my laptop, so make sure you rack up on monitors for all of the tabs that are coming your way.

I’m not quite sure what the definition of a stack is, but I sure do love these tools. Now that you’ve seen HARC, let me ask you, what would you add to my stack? And make sure to share, it helps out a lot!

--

--

--

Hello! I’m Tan, a Computer Science graduate and entrepreneur. I try to write my mind on emerging economies and the potential of globalism in every sector.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Build Fast, Advanced JSON-Powered Forms on Angular With ngx-formly

Perspective engineering in Three.js

React Component States

Using Firebase Analytics Server-Side

Spring Webflux and domain exceptions

Integrating p5.js and WebGL With React.js

How To Improve React Components With Optional Chaining

Code snippet

JavaScript Functions

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tan Arin

Tan Arin

Hello! I’m Tan, a Computer Science graduate and entrepreneur. I try to write my mind on emerging economies and the potential of globalism in every sector.

More from Medium

How to Convert Figma Designs to React Code

Host/Deploy your React.js Web-App on MongoDB Realm

Stripe Integration to NestJs and React App

I can’t install react using npx create-react-app. Here’s the solution — Let Me Fail