BookCritiq is a web app for reviewing books. Built with React, Redux, JavaScript, and Bootstrap with a custom Rails API backend.
You can find the Rails API repo here: BookCritiq-BE
This project is currently in development. Users can anonymously submit reviews for existing books, or add new books to the database. Functionality for user profiles and comments planned for the future.
As of 10-21-21
Clone down this repository, as well as the backend repository linked at the top of this Readme. You will need node
and npm
installed on your machine.
Run npm install
to get the necessary packages.
Run npm start
Visit http://localhost:3000/
in your browser.
This project is my final project for the Software Engineering bootcamp at the Flatiron School. The purpose of this project was to use React/Redux to build out an open-ended project. I set out to build a web app for reviewing books, as I felt that this incorporates several patterns I will need to be familiar with out in the world. As the project is now, it meets the requirements for assessment, but I plan to come back to it post-graduation and add functionality for logging in, creating an account, and keeping a profile of books that you personally have reviewed. I also would like to add the ability to make comments on reviews.
The biggest obstacle for this project was using the fast-jsonapi serializer on the back end. It nested the JSON data in a strange way that made the data more difficult to work with on the front end.
Other obstacles I encountered was attempting to use the newest version of Bootstrap for styling. I didn't know anything about Bootstrap before building this project, so I still have a lot to learn. Using Bootstrap to apply classNames to elements to implement styling probably saved me a lot of time, but customizing the colors or fonts in any way was difficult for me, since I didn't quite understand where to place those rules.
I started this app using create-react-app
to minimize initial setup, then applied additional libraries like redux
, react-redux
, redux-thunk
, bootstrap
, react-bootstrap
as needed to provide the functionality the app needed.