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.