My first full-stack app
I recently completed my first project for the CodeOp full-stack bootcamp. The assignment was to create a full-stack app related to anything, basically, and use all of the skills we’ve been building for the last couple of months.
This is my first full-stack project that I’ve put together from scratch. It’s been really empowering and encouraging as a new developer to see a project come together. But, it’s been surprisingly challenging to sit down and write this reflection. I think it’s important, though, to look back at the project and consider the challenges I had as well as the successes.
So, in this post, I hope to walk you through my thought process for putting the My Library App together, look at some of the challenges I faced, and kind of reflect generally on the development process related to this project.
The assignment
My project is called My Library App. And I know this doesn’t mean much now, but I’ll get there. I developed the app as a part of the MVP project for my bootcamp. MVP here stands for “minimum viable product,” so the apps we made needed to be functional and able to be used by potential users in order to get feedback for further development.
This is the first independent project we’ve done as a part of the bootcamp, and as such, each person in the bootcamp chose a problem to address that is meaningful to them. It’s super interesting to see the variety of apps people created for the project!
My project is a full-stack app, so it includes a front and back end. I used React, Express, Node, and MySQL to put the project together. I’ll get more into the tech stack and issues that I experienced in a bit. But first, I’ll get a little bit into the planning process and what kind of inspired the project.
The inspiration
My son has a lot of books. Like, a lot. And one challenge that we face in my household is how to keep engagement up with the books so they aren’t lost to time on the dusty shelf. In order to try to address this challenge, I wanted to create an app that could be used to foster engagement with children’s books.
The My Library App allows users to search for children’s books by title or author, add books to their personal library, add reviews or notes about books in their library, and delete books from their library. These are the basic functionalities I’ve integrated into the app, and I would say that they are successful overall. I’ll get a bit more into an evaluation of the project in a minute.
This is my son’s bookshelf. We have piles of his books in each room of our apartment.
The technology
The technology I used in this app was chosen basically because it’s the tech stack that I am most familiar with. I think it is appropriate for the project, though, so I would have likely chosen a similar stack even if I was comfortable working with other technology at this point.
The front end was built with React, and I used React-Router to allow for multiple pages to be built in the app. I chose to style the app with Bootstrap because I find it to be easier and faster to use than vanilla CSS, and it allows for responsive design without much extra work.
The back end was built with Express, Node, and MySQL. I only used one table in MySQL, so perhaps another, non-relational database could also suffice for this type of project, but like I already mentioned, I’m most familiar with MySQL at this point in my career.
I used the Google Books API with my project, and I wanted to put the fetches to the API in the back end. To this end, I chose to use Node-Fetch to be able to do the API work in the back end. I think the most challenging aspect of this project was making use of the Google Books API effectively. The documentation is pretty extensive, which is great, but I still found it difficult to make the search functionality work well in my app.
Development
This project was a great experience with regard to building a full-stack app from scratch. And quite a large part of that development process includes planning and preparation, which I love! Planning and prep was always one of my favorite aspects of teaching, too.
I used Google forms to make a survey to give to potential users. I got some great feedback from a few people about how they interact with children’s books in their homes and workplaces, and what challenges they face related to engagement with children’s books. But this part of the process felt a bit disingenuous because I had already kind of mapped the app in my mind. I tried to take the feedback into consideration while developing the app, but there may be alternative solutions to address the challenges people brought up in the survey.
Anyway, I considered using various tools to plan my app development. From user flow to UX/UI to database modeling, I looked at a few different tools to put my plan together. However, I ultimately decided to plan most things by hand.
Once my plans were in place, I began development of the back end of my app. I started with the back end because I wanted to make sure that all of the data could be moved around effectively before building the front end of the app. I did a fair amount of adjusting as I built the app, but I thought doing the back end first was a useful way to make sure functionality was at the forefront of my development process.
Once my router functions were put together, I started building the front end. Of the work I did on the project, I think I spent the most time working on the front end. One reason for this is that I wasn’t familiar with React-Router until mid-way through the project. But, I was able to integrate it successfully, I think, and the app is better for it.
Speaking of React-Router, I decided to dig into it a bit more outside of the bootcamp by using a new Scrimba course called Learn React-Router 6, and it was really useful.
Challenges
This project was a great learning experience overall, and I think all of the challenges that I faced helped me build my skill and confidence as a developer.
I already mentioned that it was challenging working with the Google Books API. I think one of the most challenging aspects of using the API was trying to limit the search functionality to children’s books.
There isn’t a great way to limit searches by type of book. The one data point that seemed most useful for this type of functionality was a category designation. But, it turns out that trying to filter the data by category with this API is not easy or very reliable.
First, there are a couple of categories (Juvenile Fiction, Juvenile Nonfiction) that seemed most relevant to limiting my search to children’s books. However, there are a good number of books that could be assigned one of these categories that either have some other, more topical category designation (Months, Sisters, etc) or no category at all. I wasn’t able to overcome this challenge, actually, so the search results in my app aren’t super reliable.
Another challenge with using the API was related to how results were returned. For example, I was finding that if you search for an author’s name, books about that author would come up, but not necessarily books that they wrote. Similarly, if you searched for a specific title, maybe the book would come up, or maybe not. This challenge was also not overcome completely, but I did manage to make results a bit more reliable by offering search functionality by author or title.
One final challenge was also related to using the API and fetching data across pages in the app. As I added features and pages to the app, it took longer and longer for features to load. I believe some of this is due to the fact that data is fetched in each page rather than saving it locally or moving it around some other way. If I’m being honest, this is an area that I need to learn more about.
Since working on the project I’ve read things about React-Query and using context in React (the beta documentation version) to access data across an app, but I don’t totally understand it yet, and I haven’t put it into practice. I hope to learn more about these options in the near future.
Ok, so those are some of the broad challenges I faced while developing this app. Next, I want to take a look at some of the successes.
Successes
The first win with this project is that I managed to keep it all straight and put it together in a way that allows the app to function as I intended. This is sort of a “duh” win, super basic, but I feel quite proud that I was able to build this thing from scratch. I was really able to stretch my knowledge of all of the technology used and put this thing together. There were moments during development when I was like, “What am I doing here?!” But, I managed to keep it all together in the end.
I think another success with this project was related to the design. I think design has been a struggle at times for me. CSS is a beast! But, with Bootstrap, I managed to make the app responsive, and it doesn’t look horrible. The design is rather simple, but I think it works for this app.
Generally, I think my work with the My Library App was successful, too, because I was able to work through roadblocks and find solutions to the challenges I was facing. While the Google Books API search functionality isn’t exactly where I’d like it to be, it’s minimally functional. And I was able to deal with other issues as they came up during development.
Below you can see a demo video of the My Library App.
Looking ahead
I am happy with how this project has turned out at this point. But I think there are a few things I would like to add or change with future iterations of the project.
First, I think it would be really useful to include user accounts with authentication and authorization. This is something that I’m still learning, so I hope to add these types of features to the app in the future.
It would also be nice to find a way to speed up rendering time in the app. As I mentioned previously, different features of the app take a little while to load. I think this is fine at this point, but ideally, things would render a bit more quickly.
Finally, there are a handful of little features that would be nice to have in the app. For instance, allowing users to rate titles with some kind of simple rating system (1-5 with smiley faces or something similar) would be a fun feature to get kids involved in the app a bit more.
You can read more about my thoughts on future development (and other aspects of the project) in the Readme file on GitHub.
Onward and upward
Alright, so that’s my experience building the My Library App in a nutshell. I think there is more to flesh out here, but for now, this reflection will have to suffice. I’ve moved on to work on our next project, a feature extension project, and it’s been a whole other experience. I hope to reflect on it here soon!
Thanks for reading about my experience developing my first full-stack app! Thanks for joining me on my coding journey! Feel free to connect on Twitter, GitHub, or LinkedIn (links in the footer below). And if you’re feeling ambitious, feel free to fork and clone my project and add your own feature or twist! I’d love to see what you come up with.
Crystal Rose-Wainstock
Let’s connect!