Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dthung1602/mangabookmark
A web app that allows users to bookmark mangas from scanlation sites.
https://github.com/dthung1602/mangabookmark
ant-design bookmark express gcp manga mongodb node react
Last synced: 5 days ago
JSON representation
A web app that allows users to bookmark mangas from scanlation sites.
- Host: GitHub
- URL: https://github.com/dthung1602/mangabookmark
- Owner: dthung1602
- License: mit
- Created: 2019-04-30T15:50:50.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-02-25T10:59:41.000Z (9 months ago)
- Last Synced: 2024-02-26T08:37:21.395Z (9 months ago)
- Topics: ant-design, bookmark, express, gcp, manga, mongodb, node, react
- Language: JavaScript
- Homepage: https://manga--bookmark.appspot.com
- Size: 45.9 MB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
Manga Bookmark
A web app that allow users to bookmark mangas from scanlation sites.
Visit the website »
Report Bug
·
Request Feature
## Table of Contents
* [About the Project](#about-the-project)
* [Built With](#built-with)
* [Getting Started](#getting-started)
* [Prerequisites](#prerequisites)
* [Installation](#installation)
* [Usage](#usage)
* [Roadmap](#roadmap)
* [Contributing](#contributing)
* [License](#license)
* [Contact](#contact)
* [Acknowledgements](#acknowledgements)
## About The Project
Let's face it. We all read ~~illegal~~ mangas from scanlation sites.
How many mangas are you currently reading? 1? 2? 10? 50? 100?
If that number is greater than a dozen, how do you keep track of them?
Take note in Excel? Write down to a paper? Or even remember them all?
`MangaBookmark` will take care of that for you!
Demo video:
With this web app, you can add a manga to your collection by
clicking the `+` button and paste the link of the manga detail page.
`MangaBookmark` features include:
- Organizing mangas by shelves (to read, reading, waiting, dropped, reread, finished)
- Search, filter mangas by name, shelf, status, created date, etc.
- Mark each chapter as read / unread
- Receive web push notifications when a new chapter is released
- Mobile friendly!
- Progressive web app (can be installed just like a native app)
### Built With
* [MongoDB](https://www.mongodb.com/)
* [ExpressJS](https://expressjs.com/)
* [Ant Design](https://ant.design/)
## Getting Started
### Prerequisites
Make sure you have the following installed on your system:
* `yarn` ^1.22.5
* `node` ^18.12.1
* `docker` ^23
### Installation
1. Setup [Google Login](https://developers.google.com/identity/protocols/oauth2),
[Facebook Login](https://developers.facebook.com/docs/facebook-login/),
[Cloudinary account](https://cloudinary.com/).
Make sure you have the API key and secret.
2. Clone the repo
```sh
git clone https://github.com/dthung1602/MangaBookmark
cd MangaBookmark
```
3. Install NPM packages
```sh
yarn install
```
4. In `backend` directory, copy file `.env.example` to `.env` and add your API keys
```sh
cp backend/.env.example backend/.env
```
### Start the development server
Fist we need to build assets:
```sh
cd frontend && yarn run build-assets
```
If you make changes to images that are in a sprite, you need to re-run this command.
`yarn run watch-assets` can be used instead for convenience.
To start dev mode for both backend & front end:
```sh
# run backend on port 3000
yarn run dev-be &
# run frontend on port 3001
yarn run dev-fe &
```
> **Note**
>
> The run backend command will spin up redis, mongodb & rabbitmq with docker
>
> Redis commander is available at localhost:8081
>
> Rabbitmq dashboard is at localhost:15672 (credential: guest/guest)
>
> To shut down the containers: `cd backend && yarn run down`
Now you can go to [http://localhost:3001](http://localhost:3001) to see the page.
APIs are served both at `localhost:3000` and `localhost:3001` (which forwards to port 3000).
API documentation can be found at [http://localhost:3001/api/docs](http://localhost:3001/api/docs).
This website uses `Service Worker` to cache files and display push notifications so make sure you clear service worker
after making changes to the FE.
If you only wish to make changes only to the backend, you can build the frontend and let the BE serve it.
```sh
yarn run build
```
Everything now runs at [http://localhost:3000](http://localhost:3000)
If you make changes to the Swagger js doc, run `yarn run gendoc` to update the API doc.
To lint BE `yarn lint-be`, to lint FE: `yarn lint-fe`, and to lint both just run `yarn lint`.
There's no test for FE (yet). `yarn test-be` would obviously run test for BE.
## Deployment
1. Set up you hosting service
2. Clone this git repo to your machine
3. Prepare environment
- Copy `.env.development` to `.env`
- Replace mock keys by your real API keys
- Set `NOVE_ENV=production`
- Set `PORT` to your app's desired working port
4. Run `build.sh`
5. [Optional] Remove frontend folder and packages
6. Start the server: `yarn run start`
## Roadmap
See the file `TODO.md` and [open issues](https://github.com/dthung1602/MangaBookmark/issues) for a list of proposed features (and known issues).
## Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Duong Thanh Hung - [[email protected]](mailto:[email protected])
Project Link: [https://github.com/dthung1602/MangaBookmark](https://github.com/dthung1602/MangaBookmark)
## Acknowledgements
* [Best README template](https://github.com/othneildrew/Best-README-Template)
* [Img Shields](https://shields.io)
* [Looka](https://looka.com/)
* [Iconmonstr](https://iconmonstr.com/)
[contributors-shield]: https://img.shields.io/github/contributors/dthung1602/MangaBookmark.svg?style=flat-square
[contributors-url]: https://github.com/dthung1602/MangaBookmark/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/dthung1602/MangaBookmark.svg?style=flat-square
[forks-url]: https://github.com/dthung1602/MangaBookmark/network/members
[stars-shield]: https://img.shields.io/github/stars/dthung1602/MangaBookmark.svg?style=flat-square
[stars-url]: https://github.com/dthung1602/MangaBookmark/stargazers
[issues-shield]: https://img.shields.io/github/issues/dthung1602/MangaBookmark.svg?style=flat-square
[issues-url]: https://github.com/dthung1602/MangaBookmark/issues
[license-shield]: https://img.shields.io/github/license/dthung1602/MangaBookmark.svg?style=flat-square
[license-url]: https://github.com/dthung1602/MangaBookmark/blob/master/LICENSE