Skip to content

aliffazfar/rn-AnimeJikan

Repository files navigation


React Native Anime Catalog

Implements the Anime Catalog using [Jikan API](https://docs.api.jikan.moe/)

Features

This project mainly focuses on the latest libraries and performance optimization by using MMKV storage for Redux persist store, React Query v5 + Ky for data fetching and caching, utilizing useInfiniteQuery (v5) for pagination (infinite scroll), React Navigation (stack, drawer, bottom tabs), Flashlist for Fast & Performant React Native List and FastImage for image caching.

  • Browse Anime Catalog: View anime catalog for airing, complete, and upcoming series.
  • View Anime Details: Access detailed information about each anime and mark favorites.
  • Favorites Management: Organize your favorite anime, view details, and remove favorites.

Download Apk: AnimeCatalog.apk

Examples

Home screens:

Home.mp4

Favorites screens:

Fav.mp4

Prerequisites

Before running the project, make sure you have the following:

  • Node.js installed on your machine
  • React Native CLI installed globally

Getting Started

To get started with the project, follow these steps:

Clone the repository: git clone https://github.com/aliffazfar/rn-AnimeJikan.git

  1. Install dependencies:

    • cd rn-AnimeJikan
    • yarn
  2. yarn ios | yarn android

  3. (*) Debug JS Remotely by react-native-devsettings

Generate APK: yarn build:android:apkRelease
Output apk location: rn-AnimeJikan/android/app/build/outputs/apk/release/app-release.apk

Folder Structure

The project follows the following folder structure:

  • src/components: Contains reusable components used in the project.
  • src/hooks: Contains custom hooks.
  • src/navigators: Contains navigation utilities.
  • src/redux: Contains Redux slices for fetching and managing data.
  • src/screens: Contains the main screens of the application.
  • src/services: Contains the API service config and endpoints.
  • src/types: Contains TypeScript type declarations for the project.

Contact

For any inquiries or questions, please contact aliffazfararis@gmail.com.