Introduction
Back in a day we have created a food delivery app for Arabic countries — FoodTrucks. FoodTrucks users can order food from local restaurants through a simple mobile app or web admin panel.
The app is the first Fulcrum case to use the right-to-left interface due to language peculiarities.
- Frontend stack: React Native, React, Redux, Typescript, Jest/Enzyme
- Backend Tech Stack: Node.js, Nest.js
- Industry: Food Delivery
- Platforms: iOS, Android, Web
The FoodTrucks app design was provided by the client beforehand. Although working with ready-made design is uncommon for our practice, those terms are negotiable.
Main Goals of The Project
- Create a new promo channel for trucks and restaurants;
- Develop food ordering & table reservation systems for B2C customers;
- Simplify interaction with B2B and B2C clients;
- Ensure a simple registration form for vendors;
- Create an easy communication channel between customers and vendors (e.g., allow viewing the order status).
Here Is What We Did:
We developed software for all types of platforms (iOS, Android, and web), which brings value to both B2B customers and B2C customers:
- In the B2B model, truck owners get a new promotion channel to receive and manage orders from restaurants, catering companies, etc.
- In the B2C model, customers can order food, book a table in the restaurant, or even book a truck to the party. The app provides extensive food menu options and a view map with the current locations of trucks.
Each object placed for order (truck, meals, or venues) comes with a detailed description and includes many images. To facilitate user experience, the app offers an imposing admin panel.
Fulcrum helped our client with the project documentation and wrote down descriptions of all functions. After the development phase was over, we supported our client with the app release.
Product Features
- Right-To-Left (RTL) Layout – created for the needs of the Arabian language.
- Admin Panel – for managing orders of B2B clients & end-users.
How to Develop a Right-To-Left App
At first sight, the right-to-left interface seems like a total reflection of the RTL script. Later on, you realize that mirroring layouts has a lot more pitfalls. The task becomes a more significant challenge if developers are non-native Arabic speakers. Or any other right-to-left language.
The FoodTrucks experience gave us specific knowledge on how to build RTL screen layouts.
Key Things of RTL App Development We’ve Learned from FoodTrucks Case
Flipping The Interface
Oh well, your first step is to flip the interface from right to left. As obvious as it sounds, this step is the most essential in the overall workflow.
Formatted Text
Try to use no Italics and less Bold styles. The latter impairs the text readability in most RTL languages (especially Arabic), while italics are rarely used. Besides, there are no capital letters in RTL languages.
If you need to highlight a specific part of the text in Arabic, you should:
- use overline instead of underline;
- increase the spacing between characters.
Most importantly, make sure you align the text to the right and have the correct font and font size. Arabic typefaces tend to render text smaller. To level up fonts, choose a large size up to 3 points. Do not use Latin fonts for the Arabic text. You don’t need to mirror characters or words from LTR languages, but they should be localized.
It’s highly recommended to negotiate the choice of a font with your client (provided they are native speakers). Arabic or similar languages can be tricky: they have multiply spoken and written variations. You should know for sure which of them to use in an app.
Even if your client does not speak the language of the product and is unable to help, you’ve got a solution. You can use the Google Noto fonts or 10 Arabic fonts recommended by Arabnet. The Noto Sans typeface is clean, legible and takes into consideration the unique needs of Arabic text.
Finally, keep in mind that words in RTL languages are often shorter than English ones. Try to keep this balance on the page and not shift the layout because of the difference in word length.
Icons
Icons can be a real challenge in RTL design. Some of them can be offensive to people of certain nationalities. Always check which icons you use and what they mean. For instance, a wine glass used as an icon in a restaurant menu can negatively interpret Islamic countries.
You don’t need to rotate symmetrical icons. Yet, you should mirror icons that indicate a specific direction (e.g., the “go back” button).
Numbers
First of all, do not confuse Eastern Arabic numerals (the “English” numbers) with the Western ones. If you work on projects for the Middle East market, most likely, you will use the special Western numerals.
Otherwise, you will need to adjust traditional “English” numbers to the RTL design. Keep in mind you do not change the order of digits in numbers. Mirroring English numerals is also incorrect. Numbers and digits look the same in both LTR and RTL design, so do the phone numbers.
Even numbers are mixed with letters or characters, they are displayed left to right (e.g., A58B265 would be identical for both LTR and RTL scripts).
Roadmap of the FoodTrucks Delivery App
At first, we developed the app’s MVP (minimum valuable product). In other words, MVP is a raw version of the app enough to estimate the product idea and get first feedback from customers. In the case of FoodTrucks, we had a full-fledged app for the user and its limited version for a business user.
After, we developed the app’s documentation and went straight to development. Overall, the team spent 2.5 months developing an app of such kind.
Learn more about Creating a Product Development Roadmap down the link.
Team Structure & Contract type
For the Foodtruck project, we’ve used Time and material (T&M) type of contract. It presupposes billing clients for actual work scope based on hourly rates of labor. Depending on the type of project, Fulcrum can work on multiple terms (as a dedicated team or fixed price). The Time & Material format is preferable for projects with:
- small duration (1-2 months);
- uncertain functionality;
- dynamic requirements (highly to be changed in the process);
- flexible budget.
This model offers many benefits for both developers and clients. For example, we may always add new functionality to the project, modify its scope, or make changes at any stage of development.
Tech Part
The Fulcrum devs used the latest technologies (similar to Airbnb) to write the FoodTrucks app. Knowledgeable users know how fast and flexible those technologies are:
- Client – React Native
- Server – Node.js & Next.js
- Admin – React
- Hosting – AWS
- Backend – PostgreSQL
Backend Tech Stack
| Technologies | Usage | Description |
|---|---|---|
| Node.js | Runtime environment | JavaScript runtime built on Chrome's V8 JavaScript engine. |
| TypeScript | Language | Typed superset of JavaScript that compiles to plain JavaScript. |
| Nest.js | Framework | A progressive Node.js framework for building efficient, reliable and scalable server-side applications. |
| Amazon EC2 | Deployment | Web service that provides secure, resizable compute capacity in the cloud. It is designed to make web-scale cloud computing easier for developers. |
| Amazon S3 | Image storage, frontend hosting | An object storage service that offers industry-leading scalability, data availability, security, and performance. |
| AWS Lambda | Resizing images | Give an ability to run code without provisioning or managing servers. |
| AWS RDS | DB | Amazon RDS makes it easy to set up, operate, and scale a relational database in the cloud. It provides cost-efficient and resizable capacity while automating administration tasks such as hardware provisioning, database setup, patching and backups. |
| Firebase CMS | Notifications | Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably deliver messages at no cost. |
| Twilio | SMS | Send and receive text messages globally with the API that over a million developers depend on. |
| Places API | Location autocomplete | Send and receive text messages globally with the API that over a million developers depend on. |
Fontend Tech Stack
| Technologies | Usage | Description |
|---|---|---|
| TypeScript | Language | Typed superset of JavaScript that compiles to plain JavaScript |
| React Native | JavaScript Framework | A framework for building native apps using React |
| React | UI library | A JavaScript library for building user interfaces |
| Redux.js | State Management Library | A predictable state container for JavaScript apps. |
| Jest | Testing framework | JavaScript testing framework |
| AWS | Deployment | Dev/staging environment for frontend testing |
| Firebase | Push notifications | Send messages and notifications to users across platforms - Android, iOS |
What Are the Results
In the end, we have a full-fledged RTL delivery app aimed to simplify communication between businesses and customers. Currently, FoodTrucks serves two significant purposes:
- The app is a powerful promo channel for truck owners and vendors (restaurants).
- The platform lets customers place food orders or reserve a table in a restaurant.
Why Developing Apps With Fulcrum
Fulcrum Rocks is a full-cycle app development agency based in Ukraine. The winning location allows us to keep our services & expenses low while involving skillful specialists. So far, we have released 15+ successful apps with the worldwide geography – from Singapore to Boston. These were projects of all complexity levels and budgets, among which:
- Buff – an app for a popular loyalty program for gamers;
- Hyfa – a social app for discovering, curating & sharing products and experiences;
- Sync.ai – a toolkit of apps for scheduling meetings, organizing events, and arranging business calls.
