React Native App - Marvel Heroes and Comics

Consuming api by Marvel Developer and showing Heroes(Characters) and Comics by Characters.

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
3. Usage
4. License
5. Contact

About The Project

It was built a application using React Native as framework and consuming the api from Developer Marvel Portal. Also used libraries how Storybook, React Query, Plops Js, React Native Animatable and among others.

Built With

• Typescript
• React
• React Native
• React Navigation V5
• Storybook
• Styled System
• Styled Components
• Redux-toolkit
• PlopJS
• React Query
• React Native Flipper
• Axios
• React Native Vector Icons
• React Native Animatable

Getting Started

You need to have installed NodeJs and configured on machine and on your OS to run on emulator to Android or simulator in iOS

Installation

1. Clone the repo

   git clone https://gitlab.com/hmarques98/oowlish-challenge

2. Install NPM packages

   npm install or yarn add

3. To iOS install pods with command`

   npx pod install

4. To run on device or emulator

   yarn android #to android

   yarn ios #to iOS

Usage

In project directory src is all of file to screens and components

The folder plop-templates has all templates to generate templates to create a Component or a Screen.

To create a Component with script run:

Will to prompt what is name component

yarn generate component

or

npm run generate component

To create a Screen with script run:

Will to prompt what is name screen

yarn generate screen

or

npm run generate screen

To run the tests, execute

yarn test

or

npm run test

The folder storybook has all configuration working storybook library

To see working go to index.js in root directory and change to true the variable: Ex:

const showStorybook = true;

Now go to your application and you will see the library working and components Button, Typography and Box created.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Henrique Marques - @hmarques98_ - [email protected]

Project Link: https://gitlab.com/hmarques98/oowlish-challenge