/olio-app-challenge

Olio challenge

Primary LanguageTypeScript

Challenge - Olio App 🌱

Evaluate general front end development skills and capabilities.

Screen Shot 2022-01-05 at 23 14 01 Screen Shot 2022-01-05 at 23 14 26 Screen Shot 2022-01-05 at 23 15 46
Screen Shot 2022-01-05 at 23 14 01 Screen Shot 2022-01-05 at 23 14 26 Screen Shot 2022-01-05 at 23 15 46

Summary

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

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
Untitled

6 - Click on play icon (circled in red) to run the project as the image below: Untitled-2

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

Linkedin Badge Whatsapp Badge Gmail Badge

💡 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!