Before arriving to Japan, I had a technical test to achieve for the Cookpad company.
This is a photo viewer app which fetches photos from Flickr photo-sharing service.
This demo project shows my skills in term of code, UI, UX.
I studied computer science so I don't have any design/UX basics I think, so it's possible that time to time I design an experience or UI that is not that relevant for the context.
Sorry for that 🤣.
Some interesting things to explore in the app :
The design : usually, I use the Sketch app for designing all kind of stuff for my side projects. I didn’t use it for this project because of the time constraint, so I designed the app on the go, changing the UI over time and every time I got an idea, it was a bit time consuming but the results is here.
I wanted to put UX in the forefront, that’s why I used the GlidingCollection github library that allows me to have this cool experience on the home screen, giving you the ability to switch easily between categories such as Starters, Main Courses and Dessert.
The use of animations for improving the UX : I used a few animations in this app. The first one is the one you see when launching the screen. A lot of vegetable are emitted, like a confetti style animation.
It’s called Particle Animations and usually they are used for effects like fire, rain, snow..
I used them in the first screen so I can distract the user while the data are fetching and being prepared for the next screen. Then, I discovered an amazing library for screen transition, called Hero. It’s the animation I use from the Explore view to the photo detail screen.
See my example demo there if you’re curious : https://github.com/Aymenworks/particle-animations.
The combo MVVM/RxSwift where all the logics is done on the view model and we don't have a Massive View Controller anymore ( even if it can happen! )
Dependency injection with Swinject because it allows me to switch easily between Stubs and Networks services ( by using Xcode schemes )
Responsiveness thanks to the Haneke github library that handle image caching.
This is the things I wish I would have implemented but didn’t have the time for:
- Fetching new photos just before reaching the end of the list.
- Handling the errors : Actually there is an
errorobservable property in the view model. We can for example observe it and display a small notification saying that something’s wrong or a view with the error and a refresh/retry button..
- Pinch gesture on the photo detail screen
- A custom and cool scroll to refresh animation like this one : https://github.com/Yalantis/PullToMakeSoup