I did not like how Holberton taught Redux. Because we learned it "backwards", by the time I was actually able to test my output, I was two weeks into the project and wasn't sure where in the enormous codebase I had gone wrong. Instead of fixing my broken code immediately, I decided to start a new project to make sure I actually learned it. I plan on going back to the Holberton project eventually!
I started out following a tutorial as described in the Credit section below, but modified so much that I consider this my own project to some extent.
This project is a simple frontend to display a list of books on my reading list. Books can be added and deleted. The list is saved to a local storage and loaded on page load.
There are two pages, the homepage and the add book page. The homepage is the main page, and the add book page contains the form to add a new book to the list.
When a book is added to the list, it is added to global state and a notification modal is displayed. When a book is deleted, it is removed from global state and a notification message is displayed. Books are searchable by title.
About halfway through, I remembered how tedious I find CSS, so it's not amazingly responsive. Neither is it amazingly accessible. While I tend to pay close attention to both, the point of this project was to make sure I understand Redux so I decided not to spend too much time on issues outside of that scope.
Form to add a new book to the list is shown here, with some validation shown:
If form is not filled out correctly, a notification is displayed, as seen on tablet:
When a book is successfully added to the list, a modal is displayed:
An example of a search result is shown here, as seen on mobile:
- React Redux for global state management
- React Router for configuring multiple routes
- React Final Form for form validation and submission
- React-Toastify for displaying notifications
- React-Modal for displaying modals
- Moment.js for parsing, formatting, and displaying dates
- Global store based on bookReducer includes add, delete, and search functions. Data stored includes individual book data and the current query.
- All variables are typed for TypeScript. I usually write JavaScript and only add interfaces and type annotations when required, but actually wrote TypeScript for this project.
- ESLint configured to enforce best practices.
- Searchbar to search book list by title.
- Validation for proper input of form fields.
- I think the book gif in the header is very cute!
- I really like the Toastify notifications. It was easy and they look nice.
- I didn't find a huge improvement in using React-Modal over a Material UI Modal component, but it took less than 2 minutes to get it looking right as copied directly from the documentation.
- The book list is not clickable via keyboard for poor accessibility.
- The genre dropdown is not clickable via keyboard for poor accessibility.
- Some CSS is not responsive, especially in the form. The project looks best on desktop.
- Inconsistent styling for inputs and searchbar.
- Searching by anything other than title was not included.
- I didn't make an effort, but a real project would include the ability to edit books and clicking on them for a detailed view.
- In my actual reading list, I include a description, a subject grouping, and availability at the local library. I also keep books on the list after they are read with a boolean to identify. Not a bug, but any actual recreation of my reading list, rather than a Redux-based learning experience, would include these features.
Animated book icon created by Freepik - Flaticon
Book shelves vector created by vectorpouch - www.freepik.com
Transparent empty bookshelf vector created by elitmuspreparation
Original project created by Overreacted aka Shuvam Kumar as found on YouTube.
TypeScript conversion, HOC update, Final Form implementation, project theme, and CSS changes by Rachel Lewis.