Skip to content

Latest commit

 

History

History
208 lines (143 loc) · 8.35 KB

README.md

File metadata and controls

208 lines (143 loc) · 8.35 KB
Raw

YUKI MANGA

License React Tailwind CSS Node.js Express.js MongoDB

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


Alt Text

Alt Text

Alt Text

Alt Text

Table of Contents

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

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.

  1. 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

    • YUKI MANGA (React Frontend):

      npm install
npm start

  2. 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.