This case study is a part of a learning journey for full-stack software development using MERN Stack, and this case study is divided into 4 phases:
- Phase 1 – Designing UML diagrams to properly map out the system and define goals.
- Phase 2 – Development of the frontend using only HTML, CSS, and JavaScript. without using any third-party libraries or frameworks.
- Phase 3 – Development of the backend using Node.js, Express.js, and MongoDB, with secure integration into the frontend, along with implementing dummy Razorpay integration and using Twilio for sending OTP SMS.
- Phase 4 – Development of an admin panel using React (Vite), TailwindCSS, ShadCN, TypeScript and securely connecting it with the backend.
Problem Statement
Vanilla Junction (dummy shop) is a famous vanilla ice cream shop in Vadodara and now wants to start delivery within selected pin-codes only. For this, they need a website where customers can see the ice cream items, place their orders, pay online, and choose a delivery address only from the selected pincodes.
Note – In this entire project, AI is only allowed for writing this case study or for non-primary tasks such as generating images of ice cream items, fixing english, etc.
Requirements
- A website to display ice cream items, allow customers to place orders and make online payments. The website should also support optional user authentication using mobile number and otp so customers can log in to view past orders and track delivery status.
- Dummy razorpay integration for simulated secure online payments.
- Send OTP SMS using Twilio.
- Secure backend with REST APIs and database integration.
- Admin panel to manage the online store, including admin users, ice cream items, customer orders, and delivery status.
Github Repo
GitHub - yash-ag-online/Vanilla-Junction: This case study is a part of a learning journey for full-stack software development using MERN Stack.
Phase 1 - UML Diagrams
Goal