Mobile Development: Let's Deal
04 December 2022
Semester project for the “Cross-platform Application Development for Mobile Devices” course @ NTNU (Norwegian University of Science and Technology). Developed using React Native.
The Assignment
The semester project consisted of developing a mobile application using React Native. The requirements were the following:
- present a landing page with cards of different sizes representing products in a webshop;
- the user should be able to use a search bar to search for product names;
- the user should be able to filter by category;
- the user should be able to visualize the product details by clicking on a card;
- the user should be able to switch to a map view of the products;
- the app must include a favorites page where the user can add/remove products;
- the app must include a settings page where the user can change the language of the app
My Solution
I created a landing page with cards of different sizes that are recycled with the following pattern:
- one big card
- four small cards (2 per row)
- one medium card (half the height of the big card)
The user can use the search bar to search for product names and filter by category. The user can also visualize the product details by clicking on a card, as shown in the following figure.
Additionally, it is possible to customise the following settings:
- Language (English / Norwegian / Italian)
- Theme (Light / Dark)
- Use Face ID / Touch ID to buy (mock)
The app works both on iOS and Android devices. For Android devices, it is necessary to set up a Google Maps API key. For iOS devices, the React Native component will automatically use the Apple Maps API without additional configuration.
NOTE: for more details, visit the GitHub repository containing the full report.