Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sewlz/25-ji-manga
Simple React project using React and Mangadex Api
https://github.com/sewlz/25-ji-manga
cors-proxy css html5 javascript mangadex-api reactjs
Last synced: about 1 month ago
JSON representation
Simple React project using React and Mangadex Api
- Host: GitHub
- URL: https://github.com/sewlz/25-ji-manga
- Owner: Sewlz
- Created: 2024-08-28T11:43:05.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-10-06T09:01:15.000Z (about 1 month ago)
- Last Synced: 2024-10-11T05:41:24.793Z (about 1 month ago)
- Topics: cors-proxy, css, html5, javascript, mangadex-api, reactjs
- Language: JavaScript
- Homepage:
- Size: 16.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
25-ji-Manga
**Description:**
25-ji-Manga is a beginner-friendly React application designed to help you browse and read manga. Using the MangaDex API, this project allows users to search for manga titles, view detailed information about each manga, and explore chapters. It features a clean and intuitive interface, making it easy for manga fans to find and enjoy their favorite series.
**Key Features:**
- **Search Functionality:** Quickly find manga titles with a simple search feature.
- **Manga Details:** View information about each manga, such as titles, descriptions, and cover images.
- **Chapter Navigation:** Browse through available chapters for the selected manga.
- **Responsive Design:** Works smoothly on desktops, tablets, and smartphones.
**Prerequisites**
Ensure you have Node.js and npm installed on your machine.
**Steps**
1. **Create a new Vite project**:
```bash
npm create vite@latest
```
2. **Navigate to your project directory**:
```bash
cd your-project-name
```
3. **Install dependencies**:
```bash
npm install
```
4. **Install Axios**:
```bash
npm install axios
```
5. **Install Swiper**
```bash
npm install swiper
```
6. **Running the Project**
```bash
npm run dev
```
Open your browser and go to http://localhost:5173/ to see your project running.
**Project Tree:**
```
react-25jimanga
├─ .gitignore
├─ eslint.config.js
├─ index.html
├─ package-lock.json
├─ package.json
├─ cors-proxy-server
| └─ index.js
│ └─ package-lock.json
| └─ package.json
│ └─ readme.md
├─ public
| └─ screenshot
│ └─ vite.svg
├─ README.md
├─ src
│ ├─ App.css
│ ├─ App.jsx
│ ├─ assets
│ │ ├─ og-image.webp
│ │ ├─ react.svg
│ │ └─ shortcutIcon.png
│ ├─ dev-data
│ │ ├─ header
│ │ │ ├─ header.css
│ │ │ └─ header.jsx
│ │ ├─ home
│ │ │ ├─ home.css
│ │ │ └─ home.jsx
│ │ ├─ info
│ │ │ └─ info.jsx
│ │ ├─ latest-upload
│ │ │ ├─ latest.css
│ │ │ └─ latest.jsx
│ │ ├─ reading
│ │ │ ├─ reading.css
│ │ │ └─ reading.jsx
│ ├─ index.css
│ └─ main.jsx
└─ vite.config.js
```
**Screenshots:**
> Home Screenshot
> Info Screenshot
> Reading Screenshot
