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