Challenge - Olio App 🌱

Evaluate general front end development skills and capabilities.

Summary

• Architecture
• Built With
• Installation
• Points of Improvement and Comments
• Author

Architecture

.
├── ...
├── 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
└── ...

Built With

• 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

Installation

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:

Points of Improvement and Comments

• 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.

Author

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.

😃 Thank you Olio!