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
- 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
Refer other project nextjs
- Special thanks: Kaguya
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