The challenge is to create a simple application in React Native that includes the following functionalities:
- A "tasks" section, which is a simple list of tasks added by the user (only containing a description), with the option to add more tasks.
- A "list" section, which will simply make a request to a remote data list and render it on the screen.
The main screen contains 2 buttons used to navigate to the screens of each of the mentioned sections.
- Tasks:
- Create a list of tasks in a Redux context.
- Read and display data present in Redux.
- Add new tasks via a modal with a form.
- Validation to prevent adding tasks with empty descriptions.
- Persist tasks when navigating between screens.
- List:
- Display a list of items fetched from a remote data source.
- Display at least the name of each item and optionally an image in the "contact list" style.
- Show a loading state while fetching the data.
This project uses Redux Toolkit for global state management and Axios for HTTP requests.
This codebase follows the Hexa3 architecture, which is a combination of Hexagonal Architecture and Domain-Driven Design (DDD) principles. This architecture promotes a clean separation of concerns and a modular design, making the codebase more maintainable and scalable.
├── app -> (contains routes pages)
├── domain
│ ├── constants -> (contains regex constants)
│ ├── polyfills -> (contains JS polyfills)
│ └── store -> (contains application state and actions)
├── infra
│ └── services -> (contains APIs services)
└── ui
├── assets -> (contains fonts and image assets)
├── components -> (contains UI components)
└── layouts -> (contains UI Layouts)- Mock data API : https://6172cfe5110a740017222e2b.mockapi.io/elements
-
Install dependencies
npm install
-
Start the app
npx expo start
In the output, you'll find options to open the app in a
- development build
- Android emulator
- iOS simulator
- Expo Go, a limited sandbox for trying out app development with Expo
To run the tests, use the following command:
npm run test