Kyoto Manga - Free website to read comics, built with React

Kyoto Manga – Free website to read comics!

The official website is Kyotomanga.live

Tech stack

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

Inspiration

Name

Kyoto comes from the name of an old Japanese place. I was impressed by the beauty of Kyoto so I used this name

Inspired UI

Refer other project nextjs

Screenshots

Home page:

Browse page:

  • Multiple layout:

  • Details layout:

  • Column layout:

Details page

Read page

  • Desktop vertical:

  • Desktop horizontal:

  • Mobile vertical:

  • Mobile horizontal:

Login page

Follow page

Search

Project setup

  • Enviroment Variables

# Node service (See: https://github.com/leephan2k1/manga-scraper, but i plan to move to vercel and maybe change the end point in the future)
NEXT_PUBLIC_BASE_URL=your-node-service
HOST_NAME=vercel-host-name

# 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

Plans:

  • save chapter
  • automatically switch chapters
  • notify
  • comments
  • add more source
  • import follow list from user anilist (public)
  • recommended from users

GitHub

View Github