junioroga/animall

React Native App with Expo to list and show some details about Animes/Mangas.

React Native Animall App

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

• Dark and Light theme
• EN-US and PT-BR language

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.

🚀 Open and run the project

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

Environment variables

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

EXPO_PUBLIC_API_TOKEN

Getting api key

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

Web

Dark

Light

IOS

Dark

Light

Android

Dark

Light