Evaluate general front end development skills and capabilities.
![]() |
![]() |
![]() |
---|---|---|
![]() |
![]() |
![]() |
.
βββ ...
βββ src
β βββ components # Page components
β βββ routes # React navigation
β β βββ BottomTabs # Bottom menu router
β β βββ Stack # Stack router
β βββ screens # Project screens
β β βββ Home
β β βββ LocationMap
β β βββ ProductDetails
β βββ store # Redux, store, hooks
β β βββ articles
β β βββ hooks
β β βββ visited
β βββ utils # Utility functions
β βββ App.js # App Loader
βββ ...
- React Native
- React Navigation
- React Native Testing Library
- React Native Vector Icons
- React Native Maps
- Node.js 19.8.1
- Styled Components
- TypeScript
- Date-fns
- Redux
1 - First of all clone this repo to your local machine using:
git clone https://github.com/anaarezo/olio-app-challenge.git
2 - Run npm to install the required packages:
npm install
3 - First access the folder /ios
and run the pod installation.
pod install
4 - To open the project use xCode
5 - Open the project workspace using xCode ios/OlioApp.xcworkspace
6 - Click on play icon (circled in red) to run the project as the image below:
- As there was no recent information, I decided to leave the date exposed instead of labelling it as "just added."
- I am having trouble getting Android Studio to run on my MacBook, so I ended up doing tests only using Xcode.
- To avoid taking too long to develop, I chose to focus on the development of the app on iOS.
- The "Request" button does not take you to another screen, as I preferred to focus on developing the main screens based on API data.
- I would improve the map information by getting the grouped item numbers and also the icon.
- I should have started the unit tests as TDD, but I left them until the end, which made it more complex to resolve the failures.
- If this were the project, I could make an accessible layout focused on WCAG.
- I isolated environment variables, such as API URL, using env.
- I separated the tests only into components to make testing the rendering simpler than testing large screens. It also contributes to maintainability and discovering possible failures.
- As I tried to make the app work fast, I did not focus so much on the layout colours, which should be gray and not white. I chose to focus on the functionalities working as correctly as possible, according to the limited time.
- The "allergy" link does not redirect to a WebView or external link. I just put it as a layout item.
- The folder structure of screen components could be modified according to the domain(screen). In this case, I chose to build reusable components.
- At the last minute, I decided to make a reusable component with ProductCard to make it easier instead of using the "Rule of Three" (code duplication).
- Some items on the page could be better styled. Due to the time limit, I did not focus on this part, such as BottomTabs, for example.
- The colour codes could have been part of a theme file instead of being scattered throughout the code and hardcoded.
- The pink flags over the product photos represent a visited product.
Ana Laura Arezo
π‘ Feel free to contact me if you have difficulties running the project or to clarify informations about architecture and functionalities in general.