YUKI MANGA

Welcome to YUKI MANGA, a comprehensive manga exploration platform developed with React, Tailwind CSS, MangaDex API, Node.js, Express.js, and MongoDB. This project was an exciting journey that involved overcoming challenges, implementing innovative solutions, and leveraging cutting-edge technologies.

Screenshots

Table of Contents

• Overview
• Tech Stack
• What You Can Do
• Project Structure
• Learning Along the Way
• Repository Structure
• Getting Started
• Explore API Documentation
• Explore Proxy Server
• Explore Manga Server
• Contributing
• License

Overview

YUKI MANGA is your ultimate destination for immersive manga exploration! Discover, read, and manage your favorite manga seamlessly with this cutting-edge Manga App. Developed with a tech stack that includes React for the frontend, Tailwind CSS for styling, and Node.js and Express.js for the backend, this project is designed to offer a visually captivating and feature-rich experience for manga enthusiasts.

Tech Stack

• React: Frontend framework for building user interfaces.
• Tailwind CSS: Utility-first CSS framework for styling.
• Node.js: JavaScript runtime environment for server-side development.
• Express.js: Web application framework for Node.js.
• MongoDB: NoSQL database for storing application data.
• Netlify Serverless Functions: Serverless compute service provided by Netlify for deploying APIs and other server-side functions.
• Passport: Authentication middleware for Node.js, widely used for implementing authentication strategies.
• Express-session: Middleware for Express.js to manage session data, useful for implementing user sessions in web applications.
• Sharp: High-performance image processing library for Node.js, commonly used for resizing, cropping, and other image transformations.

What You Can Do

• Discover Manga: Explore a vast collection of manga from various genres.

• Read Manga: Immerse yourself in an unparalleled reading experience with a user-friendly reader.

• Manage Reading List: Create and organize your reading list. Keep track of manga you're currently reading and those on your wishlist.

• Secure Account: User authentication ensures the security of your account and reading preferences.

Project Structure

The project is organized into different modules, each serving a specific purpose:

• Frontend: The user interface built with React and styled with Tailwind CSS.

• Backend: An efficient serverless backend for manga website, offering user authentication, data storage, and reading list functionalities.

• Proxy Server: A custom proxy server for manga websites using mangaDex API, serving images and resources efficiently using Netlify serverless functions.

Learning Along the Way

Challenges Faced

• Direct API Access: The MangaDex API has strict anti-abuse policies, including not sending CORS responses for external websites and serving incorrect responses for hotlinked images.

• Proxying API Requests: Direct access to the MangaDex API was not possible due to anti-abuse policies, necessitating the development of a custom proxy server.

• Cold Start Time: Initially, setting up the proxy server on Render resulted in significant delays due to cold start times.

• Image Processing Performance: Processing large images caused serverless functions on Netlify to exceed their execution time limit.

Solutions Implemented

• Custom Proxy Server: Built a custom proxy with Netlify's serverless function to handle user requests and image fetching from the MangaDex API while adhering to the platform's anti-abuse policies.

• Netlify Serverless Functions: Leveraged Netlify's serverless functions for efficient and scalable solutions.

• Stream Processing: Implemented stream processing to optimize image processing within the serverless function's execution time limit.

• Caching: Implemented caching mechanisms using memory-cache to improve performance and reduce response times.

Repository Structure

• YUKI MANGA: The main repository for the YUKI MANGA project.
• Netlify-Serverless-Manga-Server repository: Repository for the user authentication and data management server.
• Netlify-Serverless-Manga-Proxy repository: Repository for the custom proxy server handling requests to the MangaDex API.

Getting Started

1. Clone the repositories:

   git clone https://github.com/danielasakpa/Manga_Website.git
   git clone https://github.com/danielasakpa/Netlify-Serverless-Manga-Server
   git clone https://github.com/danielasakpa/Netlify-Serverless-Manga-Proxy

2. Set up environment variables:

• REACT_APP_MANGA_SERVER_URL: URL for the manga server.
• REACT_APP_PROXY_SERVER_URL URL for the proxy server.

3. Run the applications:

   • Manga Server:

     npm install
     npm start

     • Additional Steps:

       Set up the required environmental variables by creating a .env file in the root directory of the project and filling in the necessary values for MONGO_URI, JWT_SECRET, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, CLIENT_URL, SERVER_URL, and SESSION_SECRET.

   • Proxy Server:

     npm install

     • For Windows:

       npm i [email protected]

     • For Linux:

       npm uninstall sharp
       npm install --include=optional --arch=x64 --platform=linux [email protected]

     • Run the server:

       npm run start

   • YUKI MANGA (React Frontend):

     npm install
     npm start

4. Explore and Contribute:

   Feel free to explore the app and contribute to its development. If you encounter any issues or have suggestions, please open an issue.

Explore API Documentation

Explore the MangaDex API documentation for more details on integrating and working with the MangaDex API.

Explore Proxy Server

Explore the Netlify-Serverless-Manga-Proxy repository to understand the custom proxy server's inner workings and contribute to its development.

Explore Manga Server

Explore the Netlify-Serverless-Manga-Server repository for insights into the user authentication and data management server and contribute to its enhancement.

Contributing

If you'd like to contribute to YUKI MANGA, please follow these guidelines:

1. Fork the repository and create a new branch.
2. Make your changes and test thoroughly.
3. Ensure your code follows the project's coding standards.
4. Create a pull request with a clear description of your changes.
5. Participate in discussions and address feedback.

License

This project is licensed under the MIT License.