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
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.
- React Native Homepage — I suggest using the Hasura tutorials below
- Expo
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.
- Hasura Homepage
- How to Set Up Hasura’s PostgreSQL Database
- How to Integrate Hasura with React Native
- How to Add Location Features to Hasura Database (Ex: Query rows nearby a location)
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.
- Cloudinary Homepage
- How to Store and Display User Images in React — I made this article for React, but everything can apply to React Native Apps as well.
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.
- Heroku Homepage
- How To Deploy a React App with Express Backend — Article by Chloe Chong that helped me deploy my full-stack website on Heroku.
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!
