Manga XR

The platform to read manga endlessly.
mangaxr.glacifer.com

Table of contents

• Table of contents
• Running Locally
  • Installation
  • .env
  • .env.local
• Progress list
• Contributing
• License

Running Locally

Installation

Install Docker. Docker Desktop is the easiest way to setup.

Clone the repository :

git clone https://github.com/Friedrich482/manga-xr.git

Them install all necessary dependencies :

npm install

After that generate the Prisma Client for your OS :

npx prisma generate

.env

Create a .env file in the root of the directory with the variables DATABASE_URL and SESSION_SECRET.

DATABASE_URL=...
SESSION_SECRET=...

For the DATABASE_URL, use

DATABASE_URL="mongodb://root:password@localhost:27017/database?authSource=admin&directConnection=true&replicaSet=rs0"

Then :

docker compose up -d

Docker Compose will pull the prismagraphql/mongo-single-replica:4.4.3-bionic image and use it to create a volume as a replica set for Prisma. It is needed to run Prisma transactions in local. This replica set is used as the database.

docker-compose.yml

services:
  database:
    # This image automatically creates a replica set required for transactions
    image: prismagraphql/mongo-single-replica:4.4.3-bionic
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: password
      INIT_WAIT_SEC: 3
    ports:
      - 27017:27017

For the SESSION_SECRET, you need to generate a SSH Key and get the fingerprint.

ssh-keygen -t rsa -b 4096

At the end the .env file should look to something like :

DATABASE_URL="mongodb://root:password@localhost:27017/database?authSource=admin&directConnection=true&replicaSet=rs0"
SESSION_SECRET="SHA256:..."

.env.local

Create an accout on uploadthing. Then get your keys. For the version 7.3.0, you will need UPLOADTHING_TOKEN

UPLOADTHING_TOKEN=...

Then serve locally :

npm run dev

Prisma studio to explore and manipulate the data :

npx prisma studio

Test environment:

npm run test:ui

Progress list

• Change width : responsive width images or adjust the width
• Gap between the page with a range of possible gaps
• Progress Bar (pages read / total of pages)
• One single page or multiple pages
• Next/Prev pages button
• pages drop down
• Chapters dropdown
• Next/Prev chapter Button
• Reading direction (from left to right, from right to left, ...)
• Bookmark the chapter (authentication needed !)
• Add tests with vitest and / or cypress
• Don't forget to add placeholder for lazy loaded images
• Add a type for the cursor class
• Add the manga image in the db to display it in the history
• Create a single or two /lib functions to getUser / getUserId, one with redirect and the oter without it
• create a custom 404 page
• add buttons to reload fetching (for example popular, last released manga) when it fails
• create a separate file for swr tags and revalidateTag tags
• replace "altTitle" by "mangaSlug", which is a more suitable variable name
• BIG task: add history for the mangas with seasons, and also bookmarks support
• also history and bookmark support when the chapters names is not "chapter" but for example "episode"
• add a loading state for the bookmarking
• clear out the search form
• Break the massive zustand store into slices
• use the theme to get system for the theme if it is the case
• When user reaches the end of the last chapter, the next chapter button should lead to the mangaPage instead of being grayed out
• remove all the barrels
• can we use a generic function to represent all cleanup functions ?
• finish the dockerfile and optimize its size
• deploy on google cloud vm (temporary)
• fix the cache issues
• add an open graph image
• fix all tests and add all new tests (for the function sleep and the function clean)
• update the node version in the dockerfile from node 18 to node 20 (minimum)
• update all dependencies, and fix all lint errors
• get uploadthing working in production

Contributing

If you want to contribute :

Fork the repo.

Then clone your fork to your local machine (replace <your_username> by your GitHub username) using :

git clone https://github.com/<your-username>/manga-xr.git

Create a new branch

git checkout -b <new-branch-name>

After making your changes, commit on your branch then submit a Pull Request.

License

MIT License © 2025