Bookshelf

The Bookshelf application was built to have the functionality of a 'library' application where you can store information about all types of books and their authors.

My goal of this application was not so much the content, but rather a focus on a smooth and gentle UI. I wanted to learn more about CSS transitions and animations, so I took this simple project idea and dressed it up with some cool transitions between web pages as well as fade-in/fade-out notifications.

All styles were created with raw CSS, except for the Notifications, which use the react-transition-group library to control the fade-in/fade-out events.

The client is built with React and the server is built with Apollo Server. Communication between the client and server uses a GraphQL API and a websocket connection to keep the books and authors pages updated whenever a new book is added.

Responsive:

The Navigation changes from a Navbar to a Hamburger menu once the screen size reached 1185 pixels.

Transitions remain the same, but still look smooth and gentle as the views switch.

This application is not currently live, but the code can be found on my GitHub for the client and for the server