How I Built My First Full-Stack App

1. Idea

I wanted to build a full-stack app because I was doing job hunting and found out many job postings asking for skills in JavaScript and ReactJS. I also thought adding something that was viewable would help my resume stand out in HR screening. Then the next question came, what project should I work on?

So I thinked super hard for a while, and found the inspiration from a Kala-OK app. It could created posters like this with the chosen part of the lyrics and the chosen background image. I wanted to do a project that creates posters like this.

I designed three pages: one is the index page that shows all the posters created,

2. The begining of learning ReactJS

So the journey of learning ReactJS began. My university bought one-year use of Udemy for the students, so that was the first site I looked into. After I looked at the several courses including the one famous for the YelpCamp project, I was not impressed and also figured out videos are not for me. Then I started with the ReactJS official site and learning from the official guide. And I also looked through the list of recommended resources and examples. And I found one example that I could make use of: it was a photo gallery project https://github.com/Yog9/SnapShot.

So I cloned the project and studied its structure. It used Yarn to manage the packages and used Facebook's React start package.

3. Components

I

4. Canvas