mitchiemt11 / multideli-mobile

A user-friendly mobile app for easy food order management, utilizing Redux, TypeScript, and React Navigation for seamless navigation and efficient state management.

This is a new React Native project, bootstrapped using @react-native-community/cli.

Multi Deli Mobile App

Multi Deli - Dev Challenge

About The App

Multi Deli is your go-to mobile app for managing food orders effortlessly. With a clean and intuitive interface, it allows users to view their list of orders seamlessly. Easily add new orders with just a few taps and watch as your main screen updates in real-time. Simplified features ensure a smooth user experience, making order management a breeze. Whether you're a busy professional or a casual shopper, Multi Deli has got you covered!

Preview

Technologies

• React Native
• Redux
• Typescript
• React Navigation (Third party library)
• Bottom sheet (Third party library)

Setup

• Download or clone the repository git clone https://github.com/mitchiemt11/multideli-mobile.git

• To install all dependencies, run yarn install

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

# using npm
npm start

# OR using Yarn
yarn start

Step 2: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

# using npm
npm run android

# OR using Yarn
yarn android

For iOS

# using npm
npm run ios

# OR using Yarn
yarn ios

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

This is one way to run the app — you can also run it directly from within Android Studio and Xcode respectively.

Approach

• I used Redux for centralized state management, ensuring that all order data is stored in a single global state accessible from any component.
• TypeScript was integrated to enhance the development experience with static typing, catching potential errors and providing better code documentation.
• React Navigation was employed for easy navigation between screens, offering a straightforward API and support for various navigation patterns with the route and navigation props playing a bigger part in moving betweenn screens at the same time passing the correct data to the components.
• The useSelector hook provided by Redux was utilized to selectively extract data from the global state, improving performance by avoiding unnecessary re-renders.
• Additionally, I integrated a bottom sheet local library to enhance user experience, providing a smooth and intuitive way to interact with certain features without obstructing the main content.

📄 License

This app is MIT licensed.

---