4

A React Native App that allows college students to order food through takeaway o...

 1 year ago
source link: https://reactnativeexample.com/a-react-native-app-that-allows-college-students-to-order-food-through-takeaway-or-delivery/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

SVNIT Canteen App

Overview

Welcome to the College Canteen App, a React Native mobile application that allows college students to order food through takeaway or delivery, provided by fellow college students. This app also rewards users with cash points for their orders, which can be redeemed on future orders, making it a convenient and cost-effective way to enjoy delicious meals from the college canteen.

Features

  • 😋 Order Food: Browse the menu and place your food orders with ease.
  • 🚚 Takeaway & Delivery: Choose between takeaway or delivery options, which are fulfilled by college students.
  • 💥 Deliver the Order: If near Canteen, deliver foods to your fellow college mates and earn cashpoints.
  • 💵 Cash Points: Earn cash points with every order and delivery made, which can be redeemed on future orders.
  • 👤 User Accounts: Create a personal account to manage your orders, favourites, and cash points.
  • Real-time Updates: Receive instant updates on order status and delivery progress.
  • 💸 Easy Payment: Make secure and convenient payments within the app.
  • Order History: View your previous orders and track your spending.

App Usage

Ordering Food 😋

  1. Log in through Institute Id to access the app’s features.
  2. Browse the menu and select your desired food items.
  3. Add the items to your cart.
254872429-7e74077e-21bd-4b35-b789-66337cfa75a3.jpg
254872440-fd7963a5-e8fc-4dec-a743-1f29bc6751d3.jpg
254872446-b2f639b3-c21f-4baf-b2cc-9e4f199fa460.jpg
254872454-88bb4962-ef34-4faa-8148-64e0dd132d84.jpg
254872461-3c84b984-e8dd-4d7f-952f-71dd202b1df9.jpg
254872465-a63288f1-ebd6-4630-a17b-33d61b12e47a.jpg
254872471-1cb0589f-5af3-49b8-9856-713975fde2b7.jpg
254872478-7f4ce91c-a1de-434b-b620-f74e24dec2ee.jpg
254872484-1fc49416-413e-4f5d-b102-ef65ef9af08d.jpg

Takeaway 🍔

  1. While Placing your order, choose the “Takeaway” option.
  2. View the Order Status from Order History.
  3. Visit the canteen when Order is ready to collect your order.
254872501-4d7a6889-5afc-4606-b7ea-041f7c2e11d7.jpg
254872559-8fe7a8da-2194-42c9-9a6f-a34a49f63bb2.jpg
254872566-9d56158b-cb51-498d-8858-5bcec0d60795.jpg
254872572-e7345f4e-0b2d-4302-a2c4-6b511ab15959.jpg
254872711-bd9ca0bc-f079-4371-bb56-98d588d55dc1.jpg
254872719-efe32c36-8bff-47aa-a811-2ed61ef4a0ea.jpg
254872650-42515f2c-882c-4e77-a6d3-f9f7c0c8a4e8.jpg
254872654-f80eb2ab-6108-489a-9c4a-86bbbacb969a.jpg
254872659-0c7f11bf-d5ae-4c78-8670-9bdbe3477386.jpg
254872663-244d3a26-8d99-4c48-beec-0d88ba5c0c14.jpg
254872667-2fe3cde5-a4d6-4400-be53-6410bfd326e5.jpg
254872679-dce1a0d4-d326-4148-afc4-2d35481c1533.jpg

Delivery 🚚

  1. While placing your order, choose the “Delivery” option.
  2. The app will ask for Delivery details, choose from addresses already used or add new address.
  3. You can change the contact no, for smooth delivery experience.
  4. Your Delivery Order (we call it Delivery Contract) will be Live, and students near the canteen can Accept the contract.
  5. Once Accepted, a Pop-up will appear in the App telling you to Pay for the Order.
  6. After Payment, Your Order will be Confirmed and wait for Canteen to Accept it.
  7. Once the Canteen Accepts your Order, Token No. will be Provided.
  8. The app will display the name and contact details of the student delivering your order.
  9. Using that Token No, Delivery Partner (your fellow College Mate) will pick the Order from the canteen and Deliver it to your provided Address.
  10. Await delivery of your order at your designated location within the college campus.
  11. Check the Quality of the Order, and Approve the Delivery.
  12. Enjoy Your Meal…🎉
254872503-50c09530-5c8c-40ae-83ea-fe9aa7ee99d4.jpg
254872509-6d65a7eb-3bde-46c7-a543-b8d94cff21c6.jpg
254872516-44108464-42c6-4da7-bb72-71f1c448af6a.jpg
254872519-cc8be4db-cc1a-435b-b289-ba6a09b3ffad.jpg
254872521-1e3221e7-7775-43ce-b6ca-f6fbb2b83c89.jpg
254872531-e0e5a4b9-4b24-4305-8020-9d3127e05e4f.jpg
254872534-c7d81385-ca61-418c-92d1-bce0e0ff962f.jpg
254872537-83191000-ad1b-4042-b4d9-fe4c19a6fa2c.jpg
254872544-f1da3cff-0f71-46d3-8d67-b5111a753e3d.jpg
254872547-c502ba81-7ad0-4fce-a1e5-ddd12d6b791c.jpg
254872550-cef73bcb-e39e-4578-9ff9-bc5f78d13dc8.jpg
254872553-663528d9-abba-48e5-80bb-81061a6a7bf0.jpg
254872614-e621a1e0-259f-4f8f-8c7f-4af6bd1a79dd.jpg
254872619-41ed6857-b0f7-4b9c-82c1-3267f548b93d.jpg
254872623-1c69da6b-a560-4da2-93ec-596226990543.jpg
254872634-7e913cb5-6ee6-4c2a-bdce-c03e634af0cf.jpg
254872639-f438b042-4cd2-423f-a846-3ac2222e5da2.jpg
254872642-250b7e64-212f-454a-9395-619124babde2.jpg
254872650-42515f2c-882c-4e77-a6d3-f9f7c0c8a4e8.jpg
254903986-cfe578d9-ac84-4106-b44e-a772bbee342f.jpg
254903976-1e344870-6017-4e79-b506-d4bfeca3d1a5.jpg

Deliver the Order 💥

  1. In Delivery Section, all the delivery contracts which are live and available to accept, will be displayed.
  2. Sort the live contracts from most to least cashpoints, Filter the Contract based on Delivery Location.
  3. Accept the Delivery Contract and now wait for Owner to Pay for the Order, you can also contact the owner and inform them to Pay.
  4. Once Paid, the Order will be shown in Your Delivery History Tab.
  5. After the Order is Accepted, Token No. will be Displayed along with the Status of the Order.
  6. When the Order is Ready, Show the Canteen Person your Token No and collect the Order.
  7. Deliver the Order to the Delivery Address shown in the App, Incase of Confusion, you can contact the Owner.
  8. Once the Order is Delivered and Passed the Check by Owner, Delivery is Complete and You Get the Promised CashPoints Added in Your Account 🎉
254872589-39378351-5565-43a0-83ce-f71617afdf2a.jpg
254872601-6a0e2317-ce85-4317-bbe3-fad251cb58d0.jpg
254872604-d6c31f19-71df-4ff7-8219-3d8a61bdee04.jpg
254872606-111f27c4-e9e0-4ce0-b199-a3b1d6680a8d.jpg
254906637-a159bcd1-d0cd-474a-b1be-2b6378af598b.jpg
254872696-e5b3e704-9192-4bff-972f-6b87287bc9a8.jpg

Cash Points 💸

  1. Earn cash points with every order you place through the app.
  2. The app will display the number of cash points you earn for each order.
  3. Accumulate cash points, and they can be redeemed on future orders, saving you money.
  4. You can Also See Ads to Get Extra Cash Points.
  5. In the CashPoints History, you will get all information regarding addition or redemption of cashpoints.
254872715-85f4c937-653a-47d9-8430-47769624830b.jpg
254872581-f9579833-98a9-4301-a8e8-f624f16ed7c8.jpg

Error & Success Feedback 💡

  1. Enhanced user experience by providing informative feedback and preventing user errors.
  2. Clear feedback and guidance through user-friendly error messages.
  3. Real-time validation of user input for data integrity and security.
254872451-824bc15e-a50c-4663-82d6-8433fc890a44.jpg
254895461-22494481-7266-4621-8945-41e07d2f9b9f.jpg
254872528-619206f6-c3ca-4bc3-a7ab-a30fe61e5f9a.jpg
254872525-a4f3bde1-9842-448e-a06c-1c07c5f11b20.jpg
254872608-5119f5fa-7149-4a17-9b8d-ef1181b723a2.jpg
254899223-0ade2636-fe9f-4a5c-8997-b93772736198.jpg
254899221-11bbe3e6-ea53-48ac-95f6-55a58e4575e9.jpg
254899217-b368d525-fb57-4970-bb16-e7331fb7d984.jpg
254899206-027702c8-1727-491b-831b-28e3c9f4abb4.jpg

Technologies Used

  • React Native: JavaScript framework for building the mobile app.
  • Firebase: Backend-as-a-Service (BaaS) platform for authentication, database, and storage.
  • Expo: Toolchain and platform for React Native app development.

Thank You 💖

GitHub

View Github


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK