Home Grown Books is a Single Page Application (SPA) with a JavaScript frontend, a backend API built with Ruby and Rails, and a PostgreSQL database.
Starting this project, I wanted to keep it as simple as possible to give myself the focus to understand how all the pieces work together before jumping into a super complicated app! Users have the ability to add and delete books - as well as add reviews to books they have read.
The first thing I built was the backend - looking back, this was simple compared to what was coming in the frontend.
For the backend architecture - I only have two models - Book and Reviews.
Book has_many Reviews
Reviews belong_to Book
I created the necessary controller actions and serializers to display the json. I used the gem 'active_model_serializers' and added the associations between these two models so when I visited the index page on localhost:3000/books - you have all books and all associated reviews for each book.
For the frontend, I built App, Books, Book, and BooksAdapter classes to organize the Javascript code.
I built 4 AJAX calls covering 3 of the CRUD (CREATE, READ, UPDATE, DESTROY) actions summarized below:
CREATE
*Create a book
*Create a new review
READ
*List all Books
DELETE
*Delete a book
Reflections
Asynchronous JS + time
This project was a great learning experience - I went into this thinking it would only take a couple days.
It is a totally different experience when you are building projects from start to finish - I truly understand why EVERYONE says if you want to learn something, build something with it.
I definitely struggled getting some of my fetch requests working correctly and ended up going through code line by line investigating what is being console logged at each step. One thing I will definitely use more of on my next project are the devtools Chrome provides. I realied too heavily on just console.log when using breakpoints is so helpful!!
This guide was super useful if anyone needs a refresher!
https://developers.google.com/web/tools/chrome-devtools/javascript/
I can't believe I forgot about these...
CSS
For the previous projects that I've built, I was a little intimidated by CSS. Since the focus of the projects wasn't on the frontend, I always used templates that I could tweak CSS slightly and it usually turned out OK.
This time around, I wanted to build from scratch to really get comfortable with CSS and how it interacts with JS.
I knew I wanted a grid layout of all the books so I naively started building out divs and trying to get all the sizing to match up - this was not ideal. I learned from a fellow coder about the magic of flexbox.
I researched the difference between CSS flexbox and CSS grid (flexbox is made for one dimensional layouts whereas grid is made for two dimensional layouts) and decided flexbox would suffice for my app needs.
It took time, but it was definitely worth it! It can be easy to be overwhelmed with all the different properties you can assign - but it's actually kind of fun - and the best way to learn is simply testing it all out.
Git commits - continued
In the last blog that I wrote, I reflected on the importance of committing frequently and my troubles with not doing so initially. This time around, I am happy to report that I was much more thoughtful on the frequency and the thoughtfulness of the messages of my commits. Although, not yet perfected, and knowing this is still something to keep improving on with each project that I build - I wanted to end on a good note - because even if we are always learning and improving - we need to celebrate our small wins.
Happy Coding,
Michaella
Top comments (0)