zero-to-mastery / book-tracker

"Tracks the amount of books that you've read, the ones you want to read and the progress on the ones you're reading."

UPDATE: This repository is archived. We are no longer accepting contributions.

If you'd like to contribute to other Zero to Mastery projects, please take a look at our other open-source projects.

Book Tracker

Description

The Amazing Book Tracker is a web-based application created by students from the Zero To Mastery Academy.

The goal of the app is to provide users with a means to manage their book collections.

End users can record the books they've previously read, books they want to read; as well as the books they're currently reading.

Functionality

Users should be able to sign up as new members by filling out a registration form.

After joining, they should be able to log in as an existing user.

Users should be able to add a book to the system.

Users should be able to place books on 3 separate lists:

1. Books they've already read
2. Books they want to read
3. Books they are currently reading.

Finally, users should be able to easily navigate through these separate lists.

Getting Started

Prerequisites

NodeJS and NPM should be installed.

Clone the repository

git clone https://github.com/zero-to-mastery/book-tracker.git

Install dependencies

cd book-tracker
npm install

Start development

There are 2 versions of the app, one made with vanilla JavaScript, one made with React.

React Version

To start the development server for the React version:

npm start

The frontend app will be running on localhost:3000.

JavaScript Version

All the files are located in vanilla_js_site.

Open index.html in the browser or if using VS Code the Live Server extension is recommended.

Contributing

Contributions are very welcome, please view the Code of Conduct.

Add yourself to the List of Contributors and submit a pull request if you've contributed.

Working on your first Pull Request? Learn how from this in-depth series: How to Contribute to an Open Source Project on GitHub.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgements

Favicons

React App Favicon: Icon by Freepik on flaticon.com, and made with realfavicongenerator.net.

book-tracker's Issues

GH-Pages Link Doesn't Load Page

The website link in the description of this repo loads a blank page when clicked.

Console output:
Loading failed for the <script> with source “https://zero-to-mastery.github.io/static/js/main.5314b61a.js”.

textarea issue

When typing a book's name, then delete it, which can not delete the first letter. have to reload the page to clean it.

Converting class components to functional components

With the introduction to hooks, there is no need of any class-based components. They should be converted to functional components and hooks should be used!

Move HTML to React components

Break out hard-coded HTML in index.html into React components to make things more modular and reusable.

Unsuccessful Sign Up

When attempting to sign up, the server responds with a status 404

login page is look very basic i want make some changes in that.

The input field is looking very basic.please assign the role to me

Getting errors on SignUp

Getting this error in the console when tried to register.

CONTRIBUTING.md needs review

The file named CONTRIBUTING.md has some information that should rather be placed in the readme.md file, and other information that should be opened as issues. To solve this I suggest that:

1. The first 2 sentences, which are concerned with guidelines, be moved to the readme.md file under a heading called: Guidelines, perhaps consider subheadings as well.
2. The following 3 paragraphs which all relate to issues, should be reviewed and, where relevant and necessary, new issues for each problem should be opened. Perhaps follow these steps:
   2.1 Read paragraph and split up into individual issues.
   2.2 Check each issue to make sure it is indeed a problem
   2.4 Open new issue with relevant info and a suggested path to solve the problem.

Registration form is not mobile friendly

Registration form is not adjusting it's dimension according to screen

React App needs a favicon

Grab a nice book icon from any free icon site, i.e., fontawesome or flaticon, and create a favicon using a site such as realfavicongenerator.net

Add the favicon to public/index.html and public/manifest.json by swapping out with the original react favicon.

Sizes should be 512, 256, 192, 32, and 16px.

Not possible to make login and register. Was it supposed to be demo-only?

I am currently learning Reactjs. And looking forward to learn back-end stack technologies and in the near future I can make some pull requests to make this project better. I just taking a stroll around all these interesting projects.

Page structure & functionality

Hey,

I'd like to contribute more to this project, but I'd like to know if there is a particular direction the owners would like the project to go? At the moment it's not very clear what kind of functionality the page should have, i.e., what should appear on the wish list, reading list, homepage, where do the books added go, etc.

Thanks!

Dependency Security Issues

According to Dependabot there has been a few security alerts regarding dependancies in yarn.lock

The following are:

• minimist
• acorn
• kind-of
• lodash

Sorted by severity level.

many index pages and none matches the github page!

hi all ,
I have just started my first contribution and i want to contribute to this book tracker project ,
but I can't find the index.html file that shared on the github page in the project file
I mean this link : https://zero-to-mastery.github.io/book-tracker/
instead I have other index pages ,
could anyone help clarify this to me .

Thanks in advance

Registration form is not mobile Friendly

Registration page works very fine in pc or laptop but not in case of mobile

The 'const' modifier can only be used in TypeScript files

Steps to reproduce:

1. npm i
2. npm update
3. npm audit fix
4. npm audit fix --force
5. npm start