A designer builds a react app from scratch on AWS serverless architecture
Before I start, I like to show you what I built in last 4 months from knowing nothing about AWS and React. Feel free to checkout the app and continue reading if you are interested. https://InflView.com
It all started with this piece of paper that my good friend Shaq gave to me so I can learn how to build a React app on AWS serverless architecture.
I ended up spending over 90% of my free time working on this project for past 4 months. I stayed up till 2 to 3 in the morning almost everyday after my day job and still spending quite amount of time for the improvement. In fact, there are still so much more things to work on.
It was a great timing for me to start this project. Because I have been wanting to learn React and AWS and I happened to have an idea from one of my favorite colleagues that I can actually use to learn all those by actually building the app. I get to learn something new and my colleague gets the app that can help her doing her job at work.
The idea
It was a simple idea but sounds interesting enough for me to get started with a project. I knew this will be a good project for me to work on to learn all these new technologies that I want to be familiar with. Oh, the idea is a making an app where online marketers can write and share reviews for influencers. Just like Yelp but for influencers!
Design
Started the entire process with designing the user flow and user interface on the app. All I want to build for now is an app where people can sign up and write reviews. Focusing on the key features first.
Started with a basic user flow and added more pages and user interfaces as needed.
This process actually helped me a lot for me to identify the things I needed to research/learn and focus. From those sketches, I was able to actually code all front-end UIs with placeholder content. Years of experience of designing websites and converting them to HTML pages allowed me to convert the design that I have in my mind to HTML files directly. However, I still prefer making design mock ups before jump into coding especially when the features are complex. For this project tho, I didn’t want to spend too much time making design mockups since I wasn’t sure if I can make it work or not cause I know I can take forever when I start messing around with visual elements.
Frustration
After having my interactive HTML pages with all the UIs, I was ready to jump in and start building the app. However, it didn’t take that long for me to realized that I had no idea where to start from there. I have all the interactive UIs built already and all I had to do was make things dynamic but I had no idea where to start.
Although I found myself learning better when I actually work on the project rather than watching tutorials, I couldn’t really jump right in to it without knowing anything at all. I ended up going back to the paper my friend gave me and started watching general tutorials on those technologies he listed out on the paper. It took about a month to see all different tutorials on Youtube and got a feeling of how all those things work together.
The frustrations was actually one of the biggest parts for me through out the entire process. I felt overwhelmed almost every night by all the information that I had to learn and understand to build this app which leaded me to frustration every end of the night. Thought about giving up so many times but I’m so glad that I didn’t give up. It’s crazy to see what I know now compare to 4 months ago.
Development
After watching all those tutorials on Youtube and going through bunch of blog articles, I came up with the architecture I want to use. The ReInvent video about Serverless Authentication and Authorization gave me a solution to user management system with AWS Cognito that I can use on the top of typical AWS serverless architecture.
Base on SpaceFinder’s architect, I decided to use
- Cognito for user authentication
- Gateway API and Node on Lambda for API
- DynamoDB for data
- S3 to serve static files
- CloudFront for CDN
- SES for notification emails
- Route 53 for routing
- Certificate manager for free SSL offered by AWS
- and React + Redux for the front end
I started with building user authentication part with sign in and sign up pages with AWS Cognito then hooked it up with Stripe subscription that will allow me to charge members monthly for the service and content they will get on the app. After building subscription base user management system, I moved on the actual features on the app that deals with Gateway API, Lambda, and dynamoDB. It took me a while to figure out how Gateway API, Lambda, and dynamoDB work together but once I figure that out, it was just matter of time to build functions on the app. Thank you to Shaq to walk me through this process to make me understand the how they all work together. It was actually really nice not to worry about the server all at and just work on the pure features on the app. Using Node on Lambda also offered me a very smooth workflow that I can just use JavaScript to do both backend and frontend.
When I got all my main features working on the app, I noticed there are more things I need to do to get the app launched at InflView.com. Putting up all static files to S3 bucket was easy and intuitive but setting up proper redirects, SSL, and CDN took some time for me to figure out. However, there are so many tutorials out there that helped me to set everything up properly to get the app up on the domain.
What I have learned
Design for new technologies
One of the most valuable things I have learn from doing this project. User flow changes and UI changes on different technologies. Working on this project got me realized that I really need to keep up with latest technologies consistently to be a good designer. If you are designing something that will work with the technologies, you want to know how to utilize those technologies in the best way with your design. The only way to find out is to know the technologies.
So many little things
- Integrate subscription payment system with Stripe
- AWS Cognito, Lambda, API Gateway, DynamoDB, S3, Apex, Route 53, CouldFront, CloudWatch, SES, Certificate Manager, and more
- React, Redux, and Javascript!
I can never do this by myself
Beside my good friends Anton and Shaq who are helping me all the time, there are so many more people helped me out through out the entire process. Youtube tutorials, Stack Overflow questions, different blog articles and people from JavaScript community in LA(js.la) who answered my ridiculous React questions in the Slack channel.
Why do I do this?
Because I’m curious. I want to know how my design gets built and want to understand the process. In fact, I want to be able to execute my idea to the actual product so eventually I can build something that can help people’s lives better.
Working on this project for past 4 months was not always fun and exciting at all but I have learned so much that I don’t regret at all now for stressing out myself to build this app. It’s still not even close to be done yet. It just offers the very basic key features for now. There’s are so many more things I want to do to make this better and yes, so many more things to learn to do all that. I know it’s not the best app out there but I’m very happy for what I have now and excited to make this better.
I would love to get your feedback as always. I’m still learning and I know there are so many things to be improved. Please feel free to talk me for anything you have noticed on the site InflView.com. You can reach out to me for a free trial account if you like to check out the app.
So what is this app about?
Read this article about what you can do and why you should use this app.
Originally published at www.ohsikpark.com.
