Once we finished our first project, we were immediately launched into learning the backend. Since I had experience with JavaScript, functions, objects, and OOP, the frontend unit was a bit easier for me, but learning backend proved to be more difficult. We moved at a furious pace (as always), and covered MongoDB, Express, and Node.js (they saved Angular for it’s own unit, Unit 3, which we’re currently in), passport, handlebars, and more in 2 short weeks. Week 3 was project week.
My Gift Registry App
We were given free rein to choose what we wanted to work on, and I choose to create a gift registry app. My wife and I are expecting our first baby in December, and we had just registered for our baby shower that past week. We had been discussing how we wished we could have indicated on the gift registry that we were ok receiving used items, at least for certain things like clothes. Incidentally, if you’ve never seen a baby before, they get dirty, and they double in size about every week, on average. Buying new clothes for a baby is, in our opinion, completely unnecessary. If they don’t stain it permanently, they’re going to outgrow it in a few months. That’s why we wanted our friends and family to feel ok gifting us used baby clothes, furniture, etc. So I built an app.
Applying Lessons Learned
I applied the lessons I learned from building the previous app, so this app went much smoother. I stayed laser focused using Trello, rarely diverting from the MVP for more than a few minutes. I used Creately to create the site diagram, ERD, and site file and directory structure. I coded in very small chunks to see what, if anything, broke. That made it much easier to troubleshoot, instead of writing 50 lines of code and then finding out something isn’t working. It could be any of a dozen things at that point, or more.
I also made generous use of console.log() to see the modified values of variables and primarily http requests and responses. That was very helpful when, for instance, I couldn’t remember how passport knew if a user was authenticated or not. After some console logging, I remembered that information is in request.user, and you can access their username with req.user.username, along with all of their other information.
Learning Git by Screwing Up
Even though I applied the lessons I learned previously, this project allowed me to learn a few new things, primarily about git. Our instructors encouraged us to create a developing branch of our repo, where we could write code and not worry about it breaking things in our master branch. I did this, and things were working just fine until I needed to merge the two branches. After doing git merge, I was told I had deleted certain files from the developing branch, which I hadn’t, so I did a lot of troubleshooting. I’m still not sure why there was a merge error in the first place, but I learned how to use git reset, git abort, git revert, and git log, which I’m sure will come in handy for our next project, which will be collaborative. As one instructor put it, “It’s going to be so fun to figure out who in your group is going to screw up your git.” Well, at least I now know how to fix it :)
Flexbox Cards and Responsive Design
To display the items in a user’s registry, I decided to use flexbox cards. The first two results that come up when you google that phrase are this one and this one. I really wanted to adapt the first one and use it because they looked nicer, but with little time leftover for make things look pretty, I chose the second one. This allowed me to make the entire site responsive, with the one exception of the image on the home page, and even though that can be fixed in a few seconds, I still didn’t have time for it.
Scheduled Changes to the App
I would like to revisit the app and make several changes. First and foremost is the signup process. Even though I used passport for authentication, I did not force the user to choose a secure password. A new user can choose a single character password, which of course is terrible practice.
I would like for a user to be able to upload a personal photo that would appear on the search page so that others can further verify that they’re selecting the correct registry.
There are numerous aesthetic improvements I would like to do, such as adding a nav bar on all pages, changing how the item information is displayed to the user so that the new/used option doesn’t say “true” or “false,” make the signup and login forms more attractive, make all buttons more attractive, and a lot more. But for now, I’m happy with what I achieved, and the knowledge that, given enough time, I could make a really great app from scratch.
I would love to hear what you learned from your first few projects! Tell me in the comments section below.
TECHibid 