This is an expo React-Native project able to fetch users data, create or update existing data.
The requirement were to use https://jsonplaceholder.typicode.com/ fake api to fetch, send, or update a user object data.
As the jsonplaceholder.typicode.com doesn't provide a free storage api, the response we receive will be faked returning the same object we send to it. It provides a solucion with Mockend but it needs to register a credit card to be able to use it, so i created a custom fake api server with custom data (still using the jsonplaceholder.typicode.com api) to be fetched the first time the app starts. It can be found in repository in my account https://github.com/Pixel-Reactor/jsondb . For this reason , the app will make a call and wait for a successful response, thefore, the new, deleted or updated data will be handled by a global state that handle the list in the context.
The App is written in TypeScript and uses TailWind (Native/Wind) to styles the components.
The App has a context that wraps all the components to be able to pass and receive global states used by components
The App has a Navigation container that contains 3 screens bottom tab:
It will first render 3 fake users data, and will update the global state of the list whenever the list has an update like a deleted or updated item.
The card showed has a details buttom that will open a Modal that shows the full info about the selected user.
As soon as we get in the details we will see the full data and 2 more buttons that will allow us to delete the item or edit.
This screen will allow us to search an element by id, and it will return a card like the home screen if it finds something or No user Found text if it doesn't
This screen allows us to create a new user object, that must contain all the fields requested (id,name,surname,phone,address,email)
Both this form and edit form will check the input provided and if the id is already in use before submitting the form.
- ID (must be a number, required)
- name (must be a string, required)
- surname (must be a string, required)
- phone (must be a number, required)
- address (must be a number, required)
- email (must be a string, required)
- Clone this repository
- Open a terminal in the main folder
- Install dependencies
npm install - run the project with expo server with :
npm run start Test are built with testing-library/react-native and jest to run them in the terminal:
npx jest- Matteo Stella @pixel-reactor