Kyoto Manga - Free website to read comics!

The official website is Kyotomanga.live

Table content
Tech stack
Inspiration
Screenshots
Project setup
Plans
Sponsor

Tech stack

• NextJS + ReactJS
• Recoil -> Jotai
• Mongodb
• Next-auth
• TailwindCSS + HeadlessUI

Inspiration

Name

Kyoto comes from the name of the old capital of Japan. I was impressed by the beauty of Kyoto so I used this name

Go to table of contents 🔼

Inspired UI

• Kaguya.live (Also a manga website. But they have full anime and manga and more amazing)
• Zoro.to
• Mangareader.to
• Mangadex.org
• Project on Behance

Go to table of contents 🔼

Refer other NextJS project

• Special thanks: Kaguya

Go to table of contents 🔼

Screenshots

Home page:

Go to table of contents 🔼

Browse page:

• Multiple layout:

Go to table of contents 🔼

• Detail layout:

Go to table of contents 🔼

• Column layout:

Go to table of contents 🔼

Details page

Go to table of contents 🔼

Go to table of contents 🔼

Go to table of contents 🔼

Go to table of contents 🔼

Read page

• Desktop vertical:

Go to table of contents 🔼

• Desktop horizontal:

Go to table of contents 🔼

• Mobile vertical:

Go to table of contents 🔼

• Mobile horizontal:

Go to table of contents 🔼

Login page

Go to table of contents 🔼

Follow page

Go to table of contents 🔼

Search

Go to table of contents 🔼

Project setup

• Environment Variables

# New environment for code base v2:
# Two Options hosting https://scalegrid.io (No credit card is required for the first month) or https://railway.app (Free 5Gb forever for starter plan)
# setup the database follow this instruction: https://github.com/leephan2k1/manga-app/blob/main/Database.Vi.md (English will come later)

MONGODB_DATA_URI=mongodb://<your-uri>
MONGODB_DATA_DB=<your-db-name>


# Node service (See: https://github.com/leephan2k1/manga-scraper)
NEXT_PUBLIC_BASE_URL=your-node-service

# Mongodb: (See: https://www.mongodb.com/atlas/database)
MONGODB_URI=mongodb+srv://<username>:<password>@cluster....
MONGODB_DB=your-db-name

# Note: Because i use next-auth You must provide callback uri for facebook and google has the following form: your-domain.com/api/auth/callback/<provider> .Otherwise the authentication won't work!

# Google Oauth2 (See: https://console.cloud.google.com/)
GOOGLE_ID=your-google-client-id
GOOGLE_SECRET=your-google-secret

# Facebook Oauth (See: https://developers.facebook.com/apps)
FACEBOOK_CLIENT_ID=your-facebook-client-id
FACEBOOK_CLIENT_SECRET=your-facebook-secret

# Random Secret (Easy generate: https://generate-secret.vercel.app/32)
JWT_SECRET=your-jwt-secret

Go to table of contents 🔼

Plans:

• save chapter
• automatically switch chapters
• notify (new chapter of comic)
• comment
• english version
• add more source (+1 LHM, +1 OTK)
• import follow list from user anilist (public)
• recommended from users

Go to table of contents

Sponsor

Kyoto manga is an open source project. It means is free and always free. I am pleased if you intend to sponsor this project.

• You can donate via my ERC20 Wallet (ETH, BNB, USDT coin,...)

0xA9E95FBcaB1D52706623d8e0b12d6b044c474bCC

• Or you can donate via bank (Vietnam)

1. Sacombank: 070109823242 (PHAN THANH TRIẾT LÝ)

2. MOMO:

   

Happy coding!

Go to table of contents 🔼