React Native Animall App

This is a React Native App to show information about Animes and Mangas. The data are fetch from AnimeList API.

Project created with Expo CLI. See official docs to set up the environment.

🛠 Used Technologies

The following tools were used to build the project:

Expo
React Native
TypeScript
Tamagui: Style and UI for React (web and native) meet an optimizing compiler
Reanimated: React Native Reanimated is a powerful animation library built by Software Mansion.
React Navigation: Routes and navigation
Axios: Promise based HTTP client
React Query: Fetching, caching, synchronizing and updating server state
Legend-state: Control all application states instead of using react native's useState
AsyncStorage: A library that provides an asynchronous, unencrypted, persistent, key-value storage API.
React Content Loader: A SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
Jest: Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
MSW: Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.
Maestro: Maestro is the simplest and most effective mobile UI testing framework.

First you need to install the native packages and dependencies.

yarn rebuild

Run on IOS

yarn ios

Run on Android

yarn android

Run on Web

First you need run:

yarn cors

The api I used didn't have CORS, so I needed to use a workaround to work on the web.

After, you can run:

yarn web

Run automatized tests with Maestro

First you need to install the maestro CLI: Maestro

Second you need to run the application.

yarn ios OR yarn android

Finally, you can run the tests:

maestro test ./test/e2e/main.yml

Run on Tests with Jest

yarn test

Run on Lint to identify problems

yarn lint

Run on Lint to identify and fix the problems

yarn lint:fix

Run TypeScript validator to identify invalid types

yarn typecheck

To run this project, you will need to add the following environment variables to your .env

EXPO_PUBLIC_API_TOKEN

You can easily get your key for free on the website AnimeList API Just register, click on your profile -> account settings -> API menu