BLK Bookshelf
For this project, I imagined an application for African American book lovers. I coded an app to showcase all of my favorite books using Swift UI, including book titles, authors, genres, covers, and summaries.
Case Study
For my midterm project in App Development, I created an app with a library of books written by Black women for users to discover. [2023]
Focus: App Development
-
Application Developer
-
As a young person falling back in love with reading books leisurely, I’m always looking for more books, especially written by Black women. There is no central place to find these books. I usually just search the internet or TikTok and go from there, but this takes a lot of time. This app would be an easier way to find books written by Black women because they would all be written by Black women, and instead one could focus on other criteria (genres, topics, ages, etc).
-
So, I started by compiling a list of my favorite books. This list included their titles and the authors. Then, I used the internet to decipher their genres and add summaries. I also saved free versions of the book covers.
Then, I created a new project in SwiftUI and named it “midterm” until I could come up with a name. I imported all of the book cover images into my assets, and I started working on a cover for the app, or the introductory screen, in ContentView. I knew I wanted to use the quote from Jean Michael Basquiat, so I added that. I brainstormed a name and landed on “BLK Bookshelf”. I started styling it to my liking and then I added a button that would guide users to their bookshelf.
Once that was complete, I created variables for the titles, authors, genres, summaries, and covers. At that point, all I had to do was write the code to express each item’s information through arrays arranged in a list.
Next, I started styling this view. I love brown tones so I integrated the brown native to SwiftUI and created a dark brown in my color library using the hex code. I added a navigation title and a small book SF image in the toolbar. But it wasn’t looking as pretty as I wanted it to.
I ran into my first roadblock with trying to figure out how to make the navigation title show up in the toolbar. I also didn’t really like the brown background. So, I had to hide the navigation title and just add text to the toolbar that I embedded in a VStack to sit on top of the small book. Once I removed the brown background, it changed back to white with the standard grey box around it.
At this point, I realized my issue was with the grey entirely so my mission then became to remove the grey. Through much trial and error, I landed on using the “scrollBackgroundhidden” property and “.ignoreSafeArea” to make the entire background white.
At this point, I was incredibly happy with the app, but there were a few small changes I wanted to make. I removed the white around the ContentView so the introductory screen was completely Black, and I changed the color of the back buttons from the standard blue to my dark brown. I also embedded a book SF image below the title.
Finally, I added a Settings feature by implimenting a modal view. I added a picker to allow users to order their bookshelf by author or by title, genre, topic, and age. I added a "Favorites" feature for even more personalization using a toggle feature. My final step was styling the settings pop-up to match the rest of the app.
-
Overall, I am incredibly happy with how this project turned out. I am very proud of myself for pushing past any challenges and learning new skills.
While creating this project, I learned how to style back buttons, I got a firm grasp on changing the colors of backgrounds, I learned how to style the toolbar and hide the navigation title, and so much more. I am most proud of learning modal view and coding personalization features (filters based on order, author, topic, & age).
Above all of that, I was able to create something that combined my passion for Black women and books.