Book App

A decision I made in my approach was to not directly follow any tutorials and build the project from the ground up. I know that it is common for entry-level frontend devs to closely follow a tutorial and package it as their own: while there is a time and place for copy, paste, and modify, I wanted to really get an understanding of what was going on in the project.

I built this project after my internship with REI. This meant that I spent 12 weeks working with a well-organized code base that allowed me to discover how the tech stack of a major retail company fits together. I am still surprised how much better at development I became through this internship, and by the end I picked up a lot of knowledge and practices that I directly applied to this project. This includes codebase architecture, and using BEM naming conventions

I also built this project step-by-step. I started with the structure (JSX) and styling (CSS), using mock data. Then I added code for fetching data from Google Books API, then adding state management, etc. This step-by-step process is also evident in my use of Git version control. When working on a new piece of the puzzle, I created a new branch (so far there are 13 branches), only merging back to Main once the piece was added.

This step-by-step process made the process go a lot smoother, allowing me to focus on the pieces of the project individually, instead of making futile attempts to understand everything at once. While there were bugs that I solved throughout my implementation, this approach made bugs a lot less frequent than my previous projects. It also made the origin of each bug easier to pinpoint and therefore easier to solve.

1. Organization and Refactoring: I paid close attention to how I was organizing my code. I utilized common frontend directory hierarchies – keeping the logic for different areas of the app separate and organized. I also recognized that it is difficult to do everything perfectly from the get-go and made it a point to refactor at regular intervals.

I initially held the logic for fetching book data in one function with a couple helper functions. However, as the project progressed and more logic got added, I switched to a class based implementation. This allowed me to explore object oriented programming in Javascript, and facilitated adding more complicated logic.

2. Naming Conventions: An area of programming that I’ve been working to improve at is maintaining readability through standard naming conventions and semantic variable names. I kept all my component names in PascalCase, my variables in camelCase, my util functions in kebab-case, and I utilized BEM (block__element–modifier) for CSS class names.

3. Components: I kept the logic for each component simple, using a total of 11 components throughout the project.

4. Styling: In previous projects I’ve utilized Bootstrap or Material UI, however I made the realization that I had been using Bootstrap as a crutch. For this project I avoided UI kits, and instead did all the styling from scratch using CSS.

On a side note, I’ve struggled in the past with some of the visual aspects of frontend development. This includes visualizing how boxes move around a screen, how positioning works in CSS, and how HTML elements can have a parent-child relationship. These are very important concepts in frontend development, and as such they are concepts I constantly try to increase my understanding of. I’m not sure what happened, but while working on this project, something clicked and my ability to visualize these concepts skyrocketed. Skill unlocked!

1: Data Cleaning: I used Google Books API in order to fetch book data when users search for a book. One of the first things I did was read the documentation for this API, and set the query parameters to return English books in the order of relevance.

However, I quickly noticed that there were a lot of duplicate books with slightly varying titles and author names. To remedy this issue I used a map to hold the books, where the key was a concatenated and stripped string containing the title and author. This allowed for a quick and efficient method of getting rid of duplicate values.

2: Scope: One thing I struggled with throughout this project was having a clearly defined scope, and not going down rabbit holes that did not align with the goals for the project. For instance, one issue I ran into was book data not being labeled with the correct language, therefore thwarting my API call that filtered for only English books. There are libraries and methods out there to remedy this issue, however, as this was mainly a frontend project I decided this was out of the scope of the project.

For the MVP version of this project there is no backend, and that gave way for some issues to pop up. For example, Library should be on a separate page. Since Redux is used for state management, the state does not persist when users click on a new link. Because this issue will be easily remedied once it is connected to a backend that serves each user their library data, I decided to temporarily create a section on the homepage for Library.

1. Add a Backend: I am planning on using a MERN (MongoDB, Express, React, Node) stack for this project. Going along with adding a backend, I also plan on adding user authentication.

2.More features: There are a lot of features that I want to add to this project. When I initially envisioned this app, I envisioned limited social features. Namely, I want to add a feature that acts as a book club. Selecting a few books each month, and giving users a space to discuss those books.

Once I realized I was passionate about software development, and committed to it as a career I began to build projects. In the first couple months of this commitment I created the project Temperature Blanket. Since that project a lot of events occurred: I took 8 more Computer Science courses at UCSD (completing an intensive minor in a year), spent time working on more software development projects, graduated college, and completed an internship with REI.

To support all these accomplishments, my approach to and understanding of programming drastically improved – along with my ability to produce quality code, as can be seen by comparing the code of Temperature Blanket to the code of Book App.

While I'm surprised by how much better I’ve gotten in this time period, I recognize that I still have a lot of improvement to do. I’m genuinely fascinated by all aspects of programming, and plan on using this fascination to continue driving my improvement. Whether that be in the form of more projects, self-studying, getting a Computer Science master's degree, or working on a company code base.