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
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Roadmap
• Contributing
• License
• Contact
• 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
• ExpressJS
• 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, Facebook Login, Cloudinary account. Make sure you have the API key and secret.
2. Clone the repo

   git clone https://github.com/dthung1602/MangaBookmark
   cd MangaBookmark

3. Install NPM packages

   yarn install

4. In backend directory, copy file .env.example to .env and add your API keys

   cp backend/.env.example backend/.env

Start the development server

Fist we need to build assets:

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:

# 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 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.

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.

yarn run build

Everything now runs at 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 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 - dthung1602@gmail.com

Project Link: https://github.com/dthung1602/MangaBookmark

Acknowledgements

• Best README template
• Img Shields
• Looka
• Iconmonstr