Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/georgi-kalkovski/mybookcase
Site about reading books online
https://github.com/georgi-kalkovski/mybookcase
css3 google-drive html5 javascript mongodb nodejs reactjs
Last synced: 29 days ago
JSON representation
Site about reading books online
- Host: GitHub
- URL: https://github.com/georgi-kalkovski/mybookcase
- Owner: Georgi-Kalkovski
- License: mit
- Created: 2021-11-06T11:20:58.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-15T17:57:47.000Z (almost 2 years ago)
- Last Synced: 2023-03-05T19:17:38.288Z (almost 2 years ago)
- Topics: css3, google-drive, html5, javascript, mongodb, nodejs, reactjs
- Language: JavaScript
- Homepage:
- Size: 16.4 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📚 MyBookcase
Try the site ➜ [TheBookcase](https://thebookcase.onrender.com/ "TheBookcase")
A place where you can upload your books and share them with your friends.
The project allows you to Read books online without the need of downloading them.
Accessing books can be done by the pages `Home`, `All Books`, choosing a genre from the `Genres` dropdown menu, and if you register you'll be able to access your created books from the `My Books` page.
The project has `Register`/`Login` functionality.
Unregistered Visitors can access the pages: `Home`, `All Books`, `Genres`, `Read`.
If the Visitor registers, he'll become User. The User can access the pages: `Home`, `All Books`, `Genres`, `Read`, `Create Book`, `My Books`, `Edit`, `Delete` (`Edit` and `Delete` only if the User is the creator of the book).
The project works mainly with Cards made to be like book covers. On each book Card you'll see the book's cover image, the name of the book, the author of it, the year and the genre.
You can also access a `Search` functionality via the pages `All Books`, `Genres`, `My Books`. You can search by the name, author or the year of the book.
`Home` page gives you four random books for flavor.
`All Books`, `Genres` and `My Books` work almost the same. the differences are self-explanatory... If you are the creator of a book, you will see the `Edit` and `Delete` buttons on the card. Both Visitors and Users can see the `Summary` button which activates a summary pop-up.
Once registered, using the `Create Book` page takes you to a form where you can submit only after filling it in with the right information. There is a verification. The book name and the author are strings between 2 and 200 characters for the book and 100 for the author. The year is a number between 1 and the current year. The genre is select with options, and 'Unknown' is set as default. The cover image must be in format .jpg, .jpeg or .png. The file must be .pdf format only.
`Edit` page works as expected. It validates the data. Only the name, author, year and the genre can be changed, so be careful about those files you are uploading...
`Delete`... it deletes.
The images and pdf files are uploaded to `Google Drive`. There is a check to verify there isn't a file with the same name inside the Google Drive folder where the magic is happening.
After the files are uploaded to Google Drive, the entity is uploaded to `MongoDB`.
The site takes you to the `Error Page` if you try to access a non-existent url.
I've made cool looking `Footer` with all my platforms (please like, share and subscribe). There's an Arrow Up function as well and it takes you up to the top.
The site is also responsive to other screen sizes.
🔨 Built With
--
- IDE:
- [Visual Studio Code](https://code.visualstudio.com/ "Visual Studio Code")
- Front-End Framework:
- [ReactJS library](https://reactjs.org/ "ReactJS library")
- Database:
- [MongoDB](https://www.mongodb.com/ "MongoDB")
- Web Servers:
- [Render](https://render.com/ "Render")
- [Render App Service](https://thebookcase.onrender.com/ "Render App Service")
- [Render Api Database](https://thebookcase-api.onrender.com/ "Render Api Database")
- Back-End:
- [Node.js](https://nodejs.org/en/ "Node.js")
- Front-End:
- [ReactJS library](https://reactjs.org/ "ReactJS library")
- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript")
- Markup Languages:
- [HTML5](https://developer.mozilla.org/en-US/docs/Web/HTML "HTML5")
- [CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS "CSS3")
- NPM packages (front-end):
- [react](https://www.npmjs.com/package/react "react")
- [react-router-dom](https://www.npmjs.com/package/react-bootstrap "react-router-dom")
- [react-validation](https://www.npmjs.com/package/react-validation "react-validation")
- [react-bootstrap](https://www.npmjs.com/package/react-bootstrap "react-bootstrap")
- [node-uuid](https://www.npmjs.com/package/node-uuid "node-uuid")
- [reactjs-popup](https://www.npmjs.com/package/reactjs-popup "reactjs-popup")
- [axios](https://www.npmjs.com/package/axios "axios")
- NPM packages (back-end)
- [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken "jsonwebtoken")
- [bcryptjs](https://www.npmjs.com/package/bcryptjs "bcryptjs")
- [mongoose](https://www.npmjs.com/package/mongoose "mongoose")
- [express](https://www.npmjs.com/package/express "express")
- [body-parser](https://www.npmjs.com/package/body-parser "body-parser")
- [cors](https://www.npmjs.com/package/cors "cors")
- [express-fileupload](https://www.npmjs.com/package/express-fileupload "express-fileupload")
- [googleapis](https://www.npmjs.com/package/googleapis "googleapis")
- Node.js modules (back-end)
- fs
- path
- readline
- stream
- Additionals:
- [Google Drive](https://www.google.com/drive/ "Google Drive")
- [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG "SVG")
- [SimpleIcons](https://simpleicons.org/ "SimpleIcons")
- [Loading.io](https://loading.io/ "Loading.io")
- [Basic Skeleton by Bezkoder](https://www.bezkoder.com/react-node-mongodb-auth/ "Basic Skeleton by Bezkoder")
- [Error Page 404 by JuliaSS](https://codepen.io/JuliaSS/pen/ZMaXQV "Error Page 404")
- [Shields.io](https://shields.io/ "Shields.io")
- [Imgur.com](https://imgur.com/ "Imgur.com")
- [Books from chitanka.info](https://chitanka.info/ "Books from chitanka.info")
## 🖼️ Preview:
### Home Page
### All Books, My Books, Genres Pages
### Error Page
### Search option
### Summary Popup
### Book Viewer vs Book Owner
### Create Book Page
### Edit Book Page
### Delete Book Page
### Footer platforms links
### Unactive/Active(Hovered) ArrowUp function
## License
Distributed under the MIT License. See `LICENSE` for more information.
### 🤝🏻 Connect with Me
