Code Monkey home page Code Monkey logo

book_track's Introduction

Book Track

Book track UI image

A book progress tracking react app to help me monitor my reading without giving my data over to other services. Basically a CRUD app with nice UI and some little extra features.

Features

  • Adding and deleting with sweet fade-in animations.
  • Confetti when you finish a book.
  • Project Gutenberg automatic linking when available.
  • Reactive progress bars and slick UI.
  • Responsive design, works well on mobile as well.

How to run:

Locally you can run both this project and the backend. To do this you will have to install MongoDB, you don't have to create any databases but you have to launch the daemon.

mongod

Then if you want any of the operations like adding, deleting, and finishing to work you will have to also clone book_track_backend, here.

git clone [email protected]:TheCynosure/book_track_backend.git
cd book_track_backend
PORT=8080 npm start

Now in a new terminal window make sure to modify the URL for the backend at the top of src/views/Main.js to be the port (8080) and your IP address. Then launch the frontend:

npm start

Combining frontend and backend

To combine the frontend and backend you will have to build the frontend and then drag the build folder over into the book_track_backend folder. Then you can use express to serve the build/index.html at the root URL. This is not needed most of the time though and for casual use you should just use the above method.

Issues

If you run into issues please feel free to open an issue or pull request.

Code Layout Notes

Code is all inside the src folder and is mainly inside two folders. The components folder holds all the React components that make up each page. The views folder holds each individual page. This is a bit of a misnomer as the header bar where the book appears is actually its own page. But, this was designed so that in the future it can act as a navbar when I eventually want to add a stats screen.

book_track's People

Contributors

thecynosure avatar dependabot[bot] avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.