This is an Expo project created with create-expo-app.
npm installnvm usenpx expo startnpx expo run:iosOr press i in the terminal after starting Expo.
npx expo run:androidOr press a in the terminal after starting Expo.
This project is configured to use:
Node 22.18.0Make sure you are using the correct version:
nvm useIf you don’t have it installed:
nvm install 22.18.0
nvm useWhile Node 22.18.0 should work, some native dependencies (especially iOS builds) may not fully support the latest Node versions.
If you run into build issues, switch to Node 18:
nvm install 18
nvm use 18If you change Node version after installing dependencies, you should reset your environment:
rm -rf node_modules
rm -rf ios
rm -f package-lock.json
npm install
npx expo prebuild --clean
npx expo run:iosBefore starting the challenge:
git checkout main
git pull
git checkout -b your-name-code-challenge👉 All your work should be done on this branch.
You will build a small app using data from a public API.
Fetch data from an api
- When navigating to "explore" tab, fetch collection of products from
https://fakestoreapi.com/products
- Display the items in a grid list (2 items per row)
- Each item should show:
- Product image
- Product title
- Apply some basic styling to make the UI clean and readable
- When tapping on an item from the list: Navigate to the Details screen There is already a screen called details.tsx, you may update that one.
- Show more information about the selected item
You can either:
- Pass the item from the list, OR
- Fetch it again using:
https://fakestoreapi.com/products/<id>
- Display:
- Product image
- Additional details from the response.
- Apply some basic styling
- Making a navigation header in the detail screen where it has a back button and title as the title of the product.
- You may consider making a zustand store. And use it for storing/fetching from products endpoint.
- Basic error/loading handling when fetching from an api.