Book Swap
Project
This came out of a 'take home' assignment suggested by a site called Free Code Camp. For those who are interested in anything having to do with coding, whether it be front or back end, I highly recommend checking out freecodecamp.org.
The problem to solve was to design and develop an app that would allow users to swap books back and forth. I approached this problem setting out to indentify flows and screens based on the minimal viable product.
MVP
The minimal viable product (MVP) is the minimal amount of features needed to make this app marketable.
The assignment outlined several user stories that needed to be fulfilled.
- User can view all books posted by every user.
- User can add a new book.
- User can update their setting to store their full name, city and state.
- User can propose a trade and wait for the other user to accept the trade.
HiFi Figma Screens
Challenges
One interaction that I found a bit challenging, was the many to one problem. In this scenario, it is possible that several users may want the same book that I own and I might want one or more of their's.
To solve the problem, once I've decide to trade one of my books for another user's book, my book is taken out of the list since I can only swap that book with one other user.
Duplicate Books in the List
List Updates Upon Selection
Customized Hero Images
My bookshelf has all sorts of stuff on it. I think that's true with a lot of people's bookshelves. So, I decided I'd work in Illustrator a bit to come up with some fun hero images having to do with bookshelves and what you might see on them.
I've consolidated most of the hero images, shown here, into one bookshelf.
Prototype
Lastly, the project wouldn't be complete if I didn't make if functional. For that, I built out the app using React and used Redux to keep track of state. This gave the app the feel that choices were being persisted from one screen to the next without having to use a database.
I uploaded the source code to my GitHub repo and used Netlify to deploy it. If interested in checking it out, the app can seen at: https://clinquant-yeot-7f0ee4.netlify.app/. Also, the source code can be viewed in my GitHub repo.
