This was an exercise suggested by a great site that I would recommend to anyone: Free Code-Camp (www.freecodecamp.com).

The exercise was to design/build a book-matching app that satisfied the following user stories:

• User can view all books posted by every user.

• User can add a new book.

• User can update their settings to store their full name, city, and state.

• User can propose a trade and wait for the other user to accept the trade.

The theme for the hero images was a bookshelf with different things (including books) on it.

The business model for the site is similar to a dating site. If you like a user's book and they like one or more of yours, then there's the possibility of a swap.

By checking out a filterable list, a user can mark books that they are interested in and see if they have any matches.

The biggest challenge with this experience was designing the flow of the swapping page. There was the likely edge case that there may be multiple mappings. That is, users with books that you like, but they may like one of the same books of yours.

Once a swap is selected, any of the same titles are taken out of the flow. The selected row shows a read only title with the option to cancel the decision. Cancelling puts the title back into the flow.

I designed the wireframes in Figma and built out the app using a Jamstack approach. The demo is available on Netlify to check out: https://eclectic-haupia-8a69c6.netlify.app/

Thanks!