Skip to content

Kyoto manga is a website to read comics for free in Vietnamese.

Notifications You must be signed in to change notification settings

leonguyen52/manga-app

ย 
ย 

Repository files navigation

Kyoto Manga - Free website to read comics!

logo

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

Go to table of contents ๐Ÿ”ผ

Refer other NextJS project

Go to table of contents ๐Ÿ”ผ

Screenshots

Home page:

home-page-kyoto-manga

Go to table of contents ๐Ÿ”ผ

Browse page:

  • Multiple layout:

browse-page-mutilple-layout

Go to table of contents ๐Ÿ”ผ

  • Detail layout:

details-layout

Go to table of contents ๐Ÿ”ผ

  • Column layout:

Column layout

Go to table of contents ๐Ÿ”ผ

Details page

details page

Go to table of contents ๐Ÿ”ผ

details page

Go to table of contents ๐Ÿ”ผ

details page

Go to table of contents ๐Ÿ”ผ

details page

Go to table of contents ๐Ÿ”ผ

Read page

  • Desktop vertical:

read-page-desktop-vertical

Go to table of contents ๐Ÿ”ผ

  • Desktop horizontal:

read-page-desktop-hr

Go to table of contents ๐Ÿ”ผ

  • Mobile vertical:

Mobile-vertical-read

Go to table of contents ๐Ÿ”ผ

  • Mobile horizontal:

mobile-horizontal-reading

Go to table of contents ๐Ÿ”ผ

Login page

login-page

Go to table of contents ๐Ÿ”ผ

Follow page

follow-page

Go to table of contents ๐Ÿ”ผ

Search

search ui

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:https://<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:https://<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:

    momo

Happy coding!

fun-doge

Go to table of contents ๐Ÿ”ผ

About

Kyoto manga is a website to read comics for free in Vietnamese.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.6%
  • SCSS 1.1%
  • Other 0.3%