A bookshelf management app written in React with Material-UI & styled-components
This is my submission for Project 1 of the Udacity React Nanodegree. Flybrary is a LibraryThing-esque library management app that keeps track of what books you're reading. The app uses React & react-router to build an SPA front-end for a RESTful books API. It can search for books, add books to shelves, rate them, and move them between shelves. It has a responsive, mobile-first style built with Material-UI and styled-components that should look equally great on mobile, tablet, or desktop. It uses react-loadable for code splitting and react-snapshot for static prerendering.
A live demo is available here.
Installation should be a breeze, as this was built with create-react-app & requires nothing more than
npm install
npm start
The app has a full test suite written in Jest & Enzyme that can be run
with npm run test. A coverage report can be generated with npm run test -- --coverage.
The repo has CI set up with CircleCI & Codeclimate that will
automagically run the test suite & generate a coverage report on each git push.
The app has continuous deployment to Heroku on each successful (CI-passing) build of the master branch. The latest passing build is at my-reads-vivshaw.herokuapp.com.
For manual deployment, you can npm run build, and then deploy the built app on
any webserver of your choice.
Flybrary is fully documented with JSDoc, and some documentation.js-generated docs are hosted from the docs directory and are available here. Unfortunately, the auto-generated docs aren't very good due to the lack of a good ESNext-compatible docs library. It was impossible to use JSDoc or ESDoc due to compatibility problems with certain ES6/ES7 features, and even documentation.js required a Babel transpilation step to get it working & does some weird things with my output. Regardless, the JSDoc in the source itself should be unambiguous.
To regenerate docs, use npm run docs.
- Eventually, I'd like to migrate to a Redux architecture.
- I also have a couple Webpack bugs that I don't think I can fully resolve without ejecting and manually reconfiguring.
- There are a number of performance optimizations that I could tend to.
- Visual style could be spruced up
- The test suites are messy & incomplete, in large part due to a) many difficulties working with Material-UI in Jest and b) some trouble injecting mocks. Solving either of these could increase coverage & tidy things up.