Aside from thisportfolio website(built using Next.js, TypeScript, and Tailwind CSS), my recent work has all been forLiifertechnologies to develop and maintain their apps. Here I will discuss some of the interesting features I added and some of the libraries/tech used in development.
The Liifer app is a food delivery app that allows users to create meals and save them to allow for quick ordering. A great user experience requires the data to be fetched and displayed in a reliable and performant manner.
To accomplish this I createdcustom hooksusingreact-query. These custom hooks also allowed for some of the more complicated API requirements such as in-game notifications.
Through theOverwolf API, Liifer is also available as a desktop app and in-game overlay that allows users to order food while gaming.
An interesting feature of this extension is the game-tracking function, which allows the app to track when users are gaming, and rewards them with points for time spent gaming. The in-game notifications is another, which allows the back-end to send notifications to users while they are gaming, which are then shown as a non-intrusive overlay.
This app is available in theOverwolf Storeand currently has around 5k downloads and maintains a 4.5/5 rating.
As Liifer is geared towards all of North America including Quebec, I usedreact-i18nextto allow localization and language selection.
The back-end of the Liifer app leverages a third party aggregator system to access over 800,000 restaurants all over North America. The results for nearby restaurants are based off of the users location, as set using thegoogle places API. This information is then rendered and then made searchable usingreact-table.
Through leveragingCapacitorI was able to create performant mobile ports for Liifer that run natively on iOS and Android.
These ports were both reviewed by Google and Apple and accepted into theGoogle Play StoreandApple App Store.
For authorization, Liifer uses0Auth 2.0. Google and Discord buttons are also available for easy log in/sign up.
Forms and client-side validation are implemented usingreact-hook-form.
