DEV Community

Cover image for How we built a SaaS with React and AWS

How we built a SaaS with React and AWS

Luca Restagno on August 02, 2021

I started iterspace with Marco Zani in the summer of 2018. The plan was to build a tool that would let people share clear feedback with the right c...
Collapse
 
thealexkates profile image
Alex Kates

We are huge fans of Amplify at creditgenie.com as well.

Great article! Glad to see other people using this tech in a similar way as us.

Feel free to check out my write up as well! dev.to/aws-builders/how-we-scaled-...

Collapse
 
ikoichi profile image
Luca Restagno

Thanks for sharing Alex!

You'll look into the article 😉

Collapse
 
berlangerc profile image
berlangerc

Hello, thank you for describing the architecture!
Was there any reason not to use S3 for "hosting" your SPA instead of amplify?
Price wise? Other things?

Collapse
 
ikoichi profile image
Luca Restagno • Edited

Hi berlangerc!

With Amplify you can connect your git repo and configure deployment pipelines, you get simplified custom domain configuration, multiple environments, rewrites and redirects, custom headers support, monitoring and notifications and so on.

You can definitely go with S3 but Amplify provides a complete hosting solution (at a price of ~6$/month)

Collapse
 
berlangerc profile image
berlangerc

I see! Ok thanks! 😄

Collapse
 
pschoeps profile image
Patrick Schoeps

This is sweet! Thank you. Maybe this is a dumb question but if Node is your backend and you went serverless, where exactly does it fit into your stack? Do your serverless functions run in a Node runtime?

Collapse
 
ikoichi profile image
Luca Restagno

Hi Patrick!

The way Lambda Functions works is that you select the runtime (Node.js in my case) and you upload the code to execute.

Then you link the Lambda to other services, like API Gateway for instance.
So that when a specific URL is called, your Lambda Function is invoked.

You can plug them into many services, like DB or storage triggers, or AWS AppSync for GraphQL APIs.

The code execution environment and the handling of the runtime are delegated to AWS.

Does it reply to your question?

Collapse
 
pschoeps profile image
Patrick Schoeps

Yeah that makes sense, thanks for answering my question!

Collapse
 
pflash profile image
Precious adeyinka

I love the presentation style writing and every details included, the breakdown of the system architecture/design and the reasons backing them up is very narrative and descriptive, congratulations and looking forward to more achievements for you guys, cheers!

Collapse
 
ikoichi profile image
Luca Restagno

Thanks! I really appreciate your kind words 🙌

I tried to be more descriptive as possible without losing details.

Collapse
 
octaviannn profile image
Octavian • Edited

Curious why Rails was not picked? Was it because you were not familiar with Ruby? Also can you elaborate on the costs involved by this choice of architecture? Did you have any funding?

Collapse
 
ikoichi profile image
Luca Restagno

Just for that yes 😉 I'm much more familiar with the JS ecosystem.

Would you suggest Ruby on Rails? And why?

Collapse
 
octaviannn profile image
Octavian • Edited

Same reason - I am familiar with Ruby and Rails and it's all one codebase. Way simpler than the architecture you are using but arguably not as cool as yours.

Collapse
 
miss_vitriola profile image
Nancy C

Thanks for the great article. Do you have one frontend for this application? What is your opinion on micro frontends?

Collapse
 
ikoichi profile image
Luca Restagno

Hi Nancy!

For this application I have one single frontend app (even the chrome extension code is inside the same project, so I can reuse the React components of the web app).

I like micro frontends, but they add an overhead — you need to manage all of them separately, cross dependencies, the release of each of them.

So, in my opinion, it's good to start with a monolithic app, and if it increases in compexity, at a certain point, switch to a micro frontend architecture.

There are benefits in using a micro frontend architecture like:

  • smaller projects
  • quicker continuous integration pipelines
  • reduced code complexity

I hope it helps! 🙌