This is a new React Native project, bootstrapped using @react-native-community/cli
.
Multi Deli - Dev Challenge
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!
- React Native
- Redux
- Typescript
- React Navigation (Third party library)
- Bottom sheet (Third party library)
-
Download or clone the repository
git clone https://github.com/mitchiemt11/multideli-mobile.git
-
To install all dependencies, run
yarn install
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
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:
# using npm
npm run android
# OR using Yarn
yarn android
# 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.
- 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
andnavigation
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.
This app is MIT licensed.