57 | }
58 |
59 | )
60 | }
61 |
62 | export default List
--------------------------------------------------------------------------------
/docs/src/content/docs/installation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Installation
3 | description: Effortlessly set up Manga Hook API and Next.js client on your local machine with our step-by-step guide. Clone the repository, install dependencies, and start the Express server for Manga Hook. Move to the Next.js client directory, install dependencies, and run the development server. For production, build the Next.js app and start the server. Explore Manga Hook API and Next.js client to access manga data and enhance your applications. Happy coding!
4 | ---
5 | Follow these detailed steps to set up the Manga Hook API and Next.js client application on your local machine. This guide assumes you have Git, Node.js, and npm installed.
6 |
7 | ## 1. Clone the Repository:
8 |
9 | Open your terminal and run the following command to clone the Manga Hook repository:
10 |
11 | ```bash
12 | git clone https://github.com/kiraaziz/mangahook-api
13 | ```
14 |
15 | ## 2. Set Up the Server:
16 |
17 | Navigate to the server directory and install dependencies:
18 |
19 | ```bash
20 | cd server
21 | npm install
22 | ```
23 |
24 | #### Start the Express Server:
25 |
26 | Launch the Manga Hook server by running:
27 |
28 | ```bash
29 | npm run start
30 | ```
31 |
32 | This will start the server on port 3000.
33 |
34 | ## 3. Set Up the Client (Next.js App):
35 |
36 | Navigate to the client directory and install dependencies:
37 |
38 | ```bash
39 | cd client
40 | npm install
41 | ```
42 |
43 | #### Run the Development Server:
44 |
45 | Start the Next.js development server with Tailwind CSS:
46 |
47 | ```bash
48 | npm run dev
49 | ```
50 |
51 | This will open the client application on [http://localhost:3001](http://localhost:3001) by default.
52 |
53 | ## 4. Production Deployment for Next.js App:
54 |
55 | For production deployment, follow these additional steps:
56 |
57 | #### Build the Next.js App:
58 |
59 | Generate a production build of the Next.js app:
60 |
61 | ```bash
62 | npm run build
63 | ```
64 |
65 | #### Start the Production Server:
66 |
67 | Run the built app in production mode:
68 |
69 | ```bash
70 | npm start
71 | ```
72 |
73 | Now, your Next.js app is running in production mode.
74 |
75 | ## Summary:
76 |
77 | - Manga Hook server is running on [http://localhost:3000](http://localhost:3000).
78 | - Next.js client app is running on [http://localhost:3001](http://localhost:3001) during development.
79 | - In production, the Next.js app is built using `npm run build` and started with `npm start`.
80 |
81 | Feel free to explore the Manga Hook API and Next.js client app to access manga data and enhance your manga-related applications. Happy coding!
--------------------------------------------------------------------------------
/next exemple/components/Navbar.jsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { GiHook } from "react-icons/gi"
3 | import { BiSearch } from "react-icons/bi"
4 | import { Navbar, NavbarContent, NavbarItem, Link, Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure, Input } from "@nextui-org/react";
5 | import { useState } from "react";
6 | import { useRouter } from "next/navigation";
7 |
8 | const NavbarComponent = ({ children }) => {
9 | return (
10 |
11 |
50 |
51 |
52 | )}
53 |
54 |
55 |
56 | );
57 | }
58 |
59 |
60 |
61 | export default NavbarComponent
--------------------------------------------------------------------------------
/docs/src/content/docs/example.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: MangaHook Website Example
3 | description: Experience the MangaHook website example, a dynamic platform crafted with Next.js, Tailwind CSS, and Next UI components. Seamlessly interacting with the MangaHook API, the website offers users a captivating manga reading experience. Explore key features, including the Home Screen with a curated list of manga titles, Manga Details Page showcasing detailed information, Chapter Details Page for immersive reading, and a powerful Search Functionality. Check out the example website at https://lmangahook.vercel.app to navigate the home screen, delve into manga details, read chapters, and effortlessly search for favorite titles. Witness how MangaHook combines technologies to create a user-friendly and engaging manga reading platform.
4 | ---
5 |
6 | MangaHook has created a user-friendly website using Next.js, Tailwind CSS, and Next UI components. The website interacts with the MangaHook API to provide users with a seamless manga reading experience. Let's explore the main features:
7 |
8 | ## 1. Home Screen
9 |
10 | - The home screen displays a list of manga titles obtained from the `/api/mangaList` endpoint.
11 | - Each manga entry on the home screen includes the manga's cover image, title, and other relevant information.
12 | - Users can click on a manga title to navigate to the manga details page.
13 |
14 | 
15 | ## 2. Manga Details Page
16 |
17 | - When a user clicks on a manga title, it opens the manga details page, utilizing the `/api/manga/:id` endpoint.
18 | - The manga details page showcases the cover image, title, author, status, genres, view count, and a list of chapters.
19 | - Users can click on a specific chapter to navigate to the chapter details page.
20 |
21 | 
22 | ## 3. Chapter Details Page
23 |
24 | - Upon selecting a chapter, the website uses the `/api/manga/:id/:ch` endpoint to fetch details about the selected chapter.
25 | - The chapter details page presents the chapter title, a list of other chapter titles, and individual images for each page of the chapter.
26 | - Users can navigate through the pages and enjoy reading the manga.
27 |
28 | 
29 | ## 4. Search Functionality
30 |
31 | - The website features a search button that allows users to search for manga titles using the `/api/search/:query` endpoint.
32 | - Users can enter a search query, and the website displays a list of manga titles related to the search term.
33 | - Clicking on a search result takes users to the manga details page.
34 |
35 | 
36 | ## Example Website
37 |
38 | - The MangaHook website is hosted at [https://lmangahook.vercel.app](https://lmangahook.vercel.app).
39 | - Users can explore the home screen, view manga details, read chapters, and search for their favorite manga titles.
40 |
41 | This example demonstrates how MangaHook combines the power of Next.js, Tailwind CSS, and the MangaHook API to create a dynamic and engaging manga reading platform.
42 |
--------------------------------------------------------------------------------
/docs/src/content/docs/introduction.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Introduction
3 | description: Welcome to Manga Hook, your go-to API for accessing a vast repository of manga data freely. Manga Hook is designed to streamline the process of retrieving manga information, offering features such as search, fetching all manga, fetching a single manga, retrieving manga chapters, and obtaining images from a specific chapter. Powered by Node.js, Express, WebScraping with Cheerio, and handling asynchronous requests with Request-Promise, Manga Hook provides a robust and efficient solution for developers and enthusiasts alike.
4 | ---
5 | Welcome to Manga Hook, your go-to API for accessing a vast repository of manga data freely. Manga Hook is designed to streamline the process of retrieving manga information, offering features such as search, fetching all manga, fetching a single manga, retrieving manga chapters, and obtaining images from a specific chapter. Powered by Node.js, Express, WebScraping with Cheerio, and handling asynchronous requests with Request-Promise, Manga Hook provides a robust and efficient solution for developers and enthusiasts alike.
6 |
7 | ## Technology Stack
8 |
9 | Manga Hook leverages a cutting-edge technology stack to ensure seamless functionality and performance. The key technologies used in this API include:
10 |
11 | 1. **Node.js:** The server-side JavaScript runtime that powers Manga Hook, ensuring high-speed and efficient execution of code.
12 |
13 | 2. **Express:** A minimal and flexible Node.js web application framework that facilitates the development of robust APIs with ease.
14 |
15 | 3. **WebScraping with Cheerio:** A fast, flexible, and lightweight jQuery-like library for parsing HTML. Cheerio is employed to scrape data efficiently from the manga source.
16 |
17 | 4. **Request-Promise:** A simplified HTTP request client for Node.js that simplifies handling asynchronous requests, contributing to Manga Hook's responsiveness.
18 |
19 | ## Source
20 |
21 | Manga Hook fetches its manga data from the popular manga website, [https://ww6.mangakakalot.tv/](https://ww6.mangakakalot.tv/). This source is chosen for its extensive collection of manga, providing users with access to a wide variety of titles. However, it's essential to note that the source website contains advertisements. Manga Hook optimizes the data retrieval process while taking into account the presence of ads, ensuring a smooth experience for API users.
22 |
23 | ## Philosophy
24 |
25 | Manga Hook operates on the philosophy of empowering users to access manga data freely and conveniently. The API employs web scraping techniques to extract relevant information from [https://ww6.mangakakalot.tv/](https://ww6.mangakakalot.tv/) and reconstructs it into a self-hosted API. This approach enables users to host the API independently, reducing reliance on external sources and providing more control over the data retrieval process.
26 |
27 | In summary, Manga Hook is a powerful and versatile API designed for manga enthusiasts and developers seeking a seamless solution to access manga data. With a robust technology stack, a comprehensive set of features, and a self-hosting philosophy, Manga Hook is your gateway to a world of manga information.
28 |
--------------------------------------------------------------------------------
/docs/src/content/docs/singlemanga.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Get Manga Detail
3 | description: Unlock detailed insights into specific manga and chapters with the Manga Detail API endpoints. Utilize /api/manga/:id to retrieve comprehensive details about a particular manga using its unique identifier. Access chapter-specific information through /api/manga/:id/:ch, providing details on chapter titles, associated images, and more. Seamlessly integrate these endpoints into your applications to elevate the manga reading experience for your users. Dive into the world of manga effortlessly by exploring and utilizing these powerful API features.
4 | ---
5 |
6 | #### Endpoint: `/api/manga/:id`
7 |
8 | The `/api/manga/:id` endpoint provides detailed information about a specific manga. Use the manga ID obtained from the Manga List endpoint to access manga details.
9 |
10 | #### Example
11 |
12 | ```http
13 | GET http://localhost:3000/api/manga/manga-oa952283
14 | ```
15 |
16 | #### Response
17 |
18 | ```json
19 | {
20 | "imageUrl": "https://ww6.mangakakalot.tv//mangaimage/manga-oa952283.jpg",
21 | "name": "Attack On Titan",
22 | "author": "Isayama Hajime",
23 | "status": "Ongoing",
24 | "updated": "Apr 22,2022 - 19",
25 | "view": "105.8M",
26 | "genres": [
27 | "Action",
28 | "Adventure",
29 | // ... other genres
30 | ],
31 | "chapterList": [
32 | {
33 | "id": "chapter-139",
34 | "path": "/chapter/manga-oa952283/chapter-139",
35 | "name": "Vol.34 Chapter 139: Moving Toward That Tree On The Hill",
36 | "view": "353.2K",
37 | "createdAt": "Apr 22,22"
38 | }
39 | // ... other chapters
40 | ]
41 | }
42 | ```
43 |
44 | ## Get Chapter Details
45 |
46 | #### Endpoint: `/api/manga/:id/:ch`
47 |
48 | The `/api/manga/:id/:ch` endpoint provides details about a specific chapter of a manga. Use the manga ID and chapter ID obtained from the Manga Details endpoint to access chapter details.
49 |
50 | #### Example
51 |
52 | ```http
53 | GET http://localhost:3000/api/manga/manga-oa952283/chapter-136
54 | ```
55 |
56 | #### Response
57 |
58 | ```json
59 | {
60 | "title": "Attack On Titan",
61 | "currentChapter": "Vol.34 Chapter 136: Offer Your Hearts",
62 | "chapterListIds": [
63 | {
64 | "id": "chapter-139",
65 | "name": "Vol.34 Chapter 139: Moving Toward That Tree On The Hill"
66 | },
67 | // ... other chapter IDs
68 | ],
69 | "images": [
70 | {
71 | "title": "Attack On Titan Vol.34 Chapter 136: Offer Your Hearts page 1 - Mangakakalot",
72 | "image": "https://cm.blazefast.co/7d/9b/7d9b48e08f2f3d39d96ef17ada153901.jpg"
73 | }
74 | // ... other images
75 | ]
76 | }
77 | ```
78 |
79 | ## Notes
80 |
81 | - The `:id` parameter in the endpoint represents the unique identifier for a specific manga, and `:ch` represents the unique identifier for a specific chapter.
82 | - Use the manga ID and chapter ID obtained from the Manga List and Manga Details endpoints to access specific manga and chapter information.
83 | - The response provides detailed information about the manga, including its status, genres, view count, and a list of chapters.
84 | - Chapter details include the chapter title, list of chapter IDs, and links to individual chapter images.
85 |
86 | Feel free to explore and integrate these endpoints into your applications to enhance the manga reading experience for your users.
87 |
--------------------------------------------------------------------------------
/docs/src/content/docs/hooks.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Web Hooks For Next
3 | description: Effortlessly integrate MangaHook API into your Next.js applications with a set of custom hooks. Simplify data retrieval with useMangaList for fetching a list of manga titles, useManga for detailed manga information, useMangaChapter for specific chapter details, and useMangaSearch for searching manga titles. Customize parameters as needed, seamlessly incorporating these hooks to enhance your components. Dive into the world of manga effortlessly, managing and displaying data according to your application's unique requirements.
4 | ---
5 | MangaHook provides a set of custom hooks to simplify the integration of the MangaHook API into Next.js applications. These hooks facilitate the retrieval of manga data for various purposes. Here's a detailed documentation for each hook:
6 |
7 | ## 1. `useMangaList`
8 |
9 | ### Purpose
10 |
11 | This hook is designed to fetch a list of manga titles with associated metadata using the `/api/mangalist` endpoint.
12 |
13 | ### Parameters
14 |
15 | - `params` (optional): Additional parameters to customize the manga list request.
16 |
17 | ### Usage
18 |
19 | ```jsx
20 | import useMangaList from 'path/to/useMangaList';
21 |
22 | const ExampleComponent = async () => {
23 | const params = "?page=1&type=newest"; // Customize parameters as needed
24 | const mangaListData = await useMangaList(params);
25 |
26 | // Use mangaListData in your component
27 | };
28 | ```
29 |
30 | ## 2. `useManga`
31 |
32 | ### Purpose
33 |
34 | This hook fetches detailed information about a specific manga using the `/api/manga/:id` endpoint.
35 |
36 | ### Parameters
37 |
38 | - `id`: Unique identifier for the desired manga.
39 |
40 | ### Usage
41 |
42 | ```jsx
43 | import useManga from 'path/to/useManga';
44 |
45 | const ExampleComponent = async () => {
46 | const mangaId = "manga-oa952283"; // Replace with the desired manga ID
47 | const mangaData = await useManga(mangaId);
48 |
49 | // Use mangaData in your component
50 | };
51 | ```
52 |
53 | ## 3. `useMangaChapter`
54 |
55 | ### Purpose
56 |
57 | This hook fetches details about a specific chapter of a manga using the `/api/manga/:id/:ch` endpoint.
58 |
59 | ### Parameters
60 |
61 | - `id`: Unique identifier for the manga.
62 | - `ch`: Unique identifier for the desired chapter.
63 |
64 | ### Usage
65 |
66 | ```jsx
67 | import useMangaChapter from 'path/to/useMangaChapter';
68 |
69 | const ExampleComponent = async () => {
70 | const mangaId = "manga-oa952283"; // Replace with the desired manga ID
71 | const chapterId = "chapter-139"; // Replace with the desired chapter ID
72 | const chapterData = await useMangaChapter(mangaId, chapterId);
73 |
74 | // Use chapterData in your component
75 | };
76 | ```
77 |
78 | ## 4. `useMangaSearch`
79 |
80 | ### Purpose
81 |
82 | This hook allows users to search for manga titles using the `/api/search/:query` endpoint.
83 |
84 | ### Parameters
85 |
86 | - `params`: The search query string.
87 |
88 | ### Usage
89 |
90 | ```jsx
91 | import useMangaSearch from 'path/to/useMangaSearch';
92 |
93 | const ExampleComponent = async () => {
94 | const searchQuery = "attack on titan"; // Replace with the desired search query
95 | const searchResults = await useMangaSearch(searchQuery);
96 |
97 | // Use searchResults in your component
98 | };
99 | ```
100 |
101 | These custom hooks can be seamlessly integrated into Next.js applications, making it easy to retrieve and manage manga data within your components. Customize parameters and handle the returned data according to your application's needs.
102 |
--------------------------------------------------------------------------------
/next exemple/components/MangaList/Category.jsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { useEffect, useState } from "react"
3 | import { useSearchParams, useRouter } from "next/navigation"
4 | import { redirectUrlGenerator } from "@/hooks/utils/redirectUrlGenerator"
5 | import { NavbarItem, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, Tabs, Tab } from "@nextui-org/react";
6 | import useMangaList from "@/hooks/manga/useMangaList";
7 |
8 | const Category = () => {
9 |
10 | const searchParams = useSearchParams()
11 | const router = useRouter()
12 |
13 | const [searchParamsStates, setSearchParamsState] = useState({
14 | category: searchParams.get("category"),
15 | type: searchParams.get("type"),
16 | state: searchParams.get("state"),
17 | })
18 | const [metaData, setMetaData] = useState()
19 |
20 | const handleRedirect = (f, e) => {
21 |
22 | setSearchParamsState((pre) => {
23 | return {
24 | ...pre,
25 | [f]: e
26 | }
27 | })
28 | router.push(redirectUrlGenerator(searchParams, metaData, f, e))
29 | }
30 |
31 | const loadData = async () => {
32 | const mangaDataReq = await useMangaList("")
33 | setMetaData(mangaDataReq.metaData)
34 | console.log(mangaDataReq.metaData)
35 |
36 | }
37 |
38 | useEffect(() => {
39 | loadData()
40 | }, [])
41 |
42 | return (
43 | metaData &&
44 |
56 |
57 |
58 |
63 |
64 | handleRedirect("type", e)}
66 | >
67 | {metaData.type.map((val, index) => (
68 | {val.name}
69 | ))}
70 |
71 |
72 |
73 |
74 |
79 |
80 | handleRedirect("state", e)}
82 | >
83 | {metaData.state.map((val, index) => (
84 | {val.name}
85 | ))}
86 |
87 |
88 |
89 | )
90 | }
91 |
92 | export default Category
--------------------------------------------------------------------------------
/docs/src/content/docs/quick-start.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Getting Started
3 | description: Get started with Manga Hook API in just a few simple steps. Clone the repository, navigate to the server directory, install dependencies, and start the Express server. Once set up, explore and integrate Manga Hook seamlessly into your projects, accessing a vast repository of manga data through provided API endpoints. Enhance your manga-related applications effortlessly with Manga Hook.
4 | ---
5 |
6 | Follow these simple steps to get Manga Hook up and running on your local machine:
7 |
8 | ### 1. **Clone the Repository:**
9 |
10 | Open your terminal and run the following command to clone the Manga Hook repository:
11 |
12 | ```bash
13 | git clone https://github.com/kiraaziz/mangahook-api
14 | ```
15 |
16 | ### 2. **Navigate to the Server Directory:**
17 |
18 | Change your working directory to the server folder:
19 |
20 | ```bash
21 | cd server
22 | ```
23 |
24 | ### 3. **Install Dependencies:**
25 |
26 | Install the required dependencies using npm:
27 |
28 | ```bash
29 | npm install
30 | ```
31 |
32 | ### 4. **Start the Express Server:**
33 |
34 | Launch the Manga Hook server by running the following command:
35 |
36 | ```bash
37 | npm run start
38 | ```
39 |
40 | This will start the server on port 3000.
41 |
42 | Now that Manga Hook is running, let's explore how to retrieve manga data.
43 |
44 | ## List Manga
45 |
46 | To list available manga, make a GET request to the following endpoint using a tool like Postman or Insomnia:
47 |
48 | - **Endpoint:**
49 |
50 | ```http
51 | GET http://localhost:3000/api/mangaList
52 | ```
53 | - **Example Response:**
54 |
55 | ```json
56 | {
57 | "mangaList": [
58 | {
59 | "id": "1manga-oa952283",
60 | "image": "https://ww6.mangakakalot.tv//mangaimage/manga-oa952283.jpg",
61 | "title": "Attack On Titan",
62 | "chapter": "chapter-139",
63 | "view": "105.8M",
64 | "description": "..."
65 |
66 | }
67 | // ... other manga entries
68 | ],
69 | "metaData": {
70 | "totalStories": 10,
71 | "totalPages": 100,
72 | "type": [
73 | {
74 | "id": "newest",
75 | "type": "Newest"
76 | }
77 | // ... other types
78 | ],
79 | "state": [
80 | {
81 | "id": "Completed",
82 | "type": "Completed"
83 | }
84 | // ... other states
85 | ],
86 | "category": [
87 | {
88 | "id": "all",
89 | "type": "ALL"
90 | }
91 | // ... 40 other categories
92 | ]
93 | }
94 | }
95 | ```
96 |
97 | Now you're ready to explore and integrate Manga Hook into your projects. Feel free to use the provided API endpoints to access manga data and enhance your manga-related applications!
98 |
99 | - **Response Format:**
100 | The API will respond with data structured as follows:
101 |
102 | ```typescript
103 | interface MangaList {
104 | mangaList: [
105 | {
106 | id: String,
107 | image: String,
108 | title: String,
109 | chapter: String,
110 | view: String,
111 | description: String
112 | }
113 | ],
114 | metaData: {
115 | totalStories: Number,
116 | totalPages: Number,
117 | type: [
118 | {
119 | id: String,
120 | type: String
121 | }
122 | ],
123 | state: [
124 | {
125 | id: String,
126 | type: String
127 | }
128 | ],
129 | category: [
130 | {
131 | id: String,
132 | type: String
133 | }
134 | ],
135 | }
136 | }
137 | ```
138 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Welcome to Manga Hook, your own manga API.
5 |
6 |
7 | Welcome to Manga Hook, your go-to API for accessing a vast repository of manga data freely. Manga Hook is designed to streamline the process of retrieving manga information, offering features such as search, fetching all manga, fetching a single manga, retrieving manga chapters, and obtaining images from a specific chapter.
8 |
6 | 
20 |