Gone Full Circle: My First Backend Project
I’ve completed my first Fullstack project and I’m feeling so accomplished that I’m writing this article to make this moment ten times more memorable.
We’ve finally started the Backend-dedicated sprint in the bootcamp (sadly the last one before it’s Final Project time). Ever since I decided to go Fullstack, I’ve been looking forward to this sprint and getting my hands dirty with some server-building.
Oh and did this first project fulfill all those dreams!
The brief was clear: build a RESTful API with Node on Express using a hardcoded JSON object as data. Look at me: a couple months back APIs seemed this super hard concept to grasp, now I’m supposed to build one!
Just the right challenging-dose to get us started.
This was uncharted territory, a bunch of new concepts came into play: nodemon, Heroku, run dev, start the server, what is a server exactly?, how does the server connect to the database?, where is the database hosted?, port, environment variable…
Understanding this whole setup and how each part relates to the other became more important, in order to get started, than the code itself.
The next challenge was to come up with the different core routes for my API.
I knew since the beginning that I wanted to build a Frontend for this project, this vision ended up helping a lot.
I have worked with different APIs on previous projects, so I’ve been in the user’s spot. I started to think: what would be cool to show in the Frontend?
I was working with a Books-related dataset, so sections like Top Rated books, Most Reviewed, Quick Reads became obvious. I could work with this and create some endpoints for that!
Having that Frontend mindset did the trick and helped me come to the conclusion that API building is probably the result of a good discussion between what the Frontend needs and what the Backend provides.
It just happened that I was both the Frontend and the Backend team here.
Besides the ideas for core routes I mentioned above, I went for a main route that lists all the books in the dataset. I decided to challenge myself and implement Pagination to this route, having a vision in mind that I could implement “Back” and “Next” buttons in the Frontend to navigate the whole array of books; this one shows 50 books at a time.
Roaming around on Behance, I got some inspiration for my Frontend’s design: it was time to see what this API can do!
I went for a multi-page React app using React Router and this is where the joy ride began: implementing those fetches and seeing the results of what my API can do was an amazing feeling. It worked exactly as I had planned.
One section I’m especially proud of is the “Search by Author” one. I had to come up with some logic that would make use of the error status when the fetch is not completed. Some useState and if statements later, there it was!
Vane’s Bookish API and App is far from finished, I know this one will still get lots of love. It took more time and energy than I originally planned, but this project was so worth it. Creating a React app with an API I built myself made me feel super powerful (yasss!).
Going into the different Backend and Frontend mindset also helped me understand more about the development process and I believe made me grow as a programmer.
Can’t wait to work on more Bookish APIs and Bookish Apps in the future and that this feeling stays as long as possible.
