[New Feature] Addition of a Merchandise Section

[AnjaliRayyy]

Description

I propose adding a Merchandise Section to the Samarth TMSL website to offer branded items like t-shirts, mugs, notebooks, and more. This section can enhance community engagement and promote our club’s identity among students.

Features to Implement

1. Product Categories:

   • Apparel (T-shirts, Hoodies)
   • Accessories (Mugs, Keychains)
   • Stationery (Notebooks, Pens)

2. Product Details Page:

   • Images of the product from multiple angles.
   • Description, sizes, and available stock.
   • Price and any applicable discounts.

3. Search and Filter Options:

   • Filter by category, price range, or popularity.
   • Search bar with auto-suggestions.

4. User Login for Purchases:

   • Enable users to log in using their college credentials for a seamless experience.
   • Maintain order history for logged-in users.

5. Shopping Cart:

   • Add/remove items.
   • Display subtotal and total prices.
   • Proceed to checkout.

6. Payment Integration:

   • Add support for multiple payment methods (UPI, cards, net banking).

7. Admin Panel:

   • Manage inventory.
   • Add/update/delete products.
   • View and manage orders.

---

[ritaban06]

1. Planning and Requirements Gathering

Steps:

• Define goals: Increase engagement, revenue, or branding?
• Determine the product lineup.
• Choose a development approach: Integrate into the existing website or build as a standalone section.

Hurdles:

• Gathering accurate data on user preferences for merchandise.
• Aligning the merchandise selection with budget constraints.

---

2. UI/UX Design

Steps:

• Design Wireframes: Mockup the layout of pages like Product Listings, Product Details, Cart, and Admin Panel.
• Ensure a mobile-responsive design.

Hurdles:

• Balancing aesthetics with functionality.
• Ensuring consistency with the existing website theme.

---

3. Frontend Development

Steps:

• Add product categories and search/filter functionality.
• Implement a Product Details Page with image carousels, size options, and stock availability.
• Develop Shopping Cart UI.

Hurdles:

• Making filters intuitive and fast.
• Ensuring the UI works seamlessly across devices.

---

4. Backend Development

Steps:

• Set up models for Products, Orders, Users, and Cart Items in your MongoDB Atlas database.
• Implement API endpoints for:
  • Fetching products.
  • Managing cart items.
  • Processing orders and payments.
  • Admin inventory operations.

Hurdles:

• Handling edge cases like concurrency issues (e.g., two users ordering the last item simultaneously).
• Ensuring secure endpoints to prevent unauthorized access.

---

5. Authentication and User Accounts

Steps:

• Integrate Firebase Auth for login using college credentials.
• Enable session management for maintaining user login status.
• Add functionality for order history.

Hurdles:

• Handling password resets and account security.
• Ensuring a seamless experience between login and purchase flow.

---

6. Payment Gateway Integration

Steps:

• Use Stripe for cards and net banking.
• Integrate UPI payments via a service like Razorpay or Paytm.
• Develop a secure checkout process.

Hurdles:

• Ensuring compliance with payment regulations.
• Handling failed or incomplete transactions gracefully.

---

7. Admin Panel Development

Steps:

• Add features to:
  • Manage product inventory.
  • Track and update order statuses.
  • View sales analytics.
• Use an admin-protected route for access.

Hurdles:

• Securing admin routes against unauthorized access.
• Designing a user-friendly admin interface.

---

8. Testing

Steps:

• Conduct unit tests for all backend APIs.
• Perform integration testing for frontend-backend communication.
• Simulate transactions to test payment and cart flows.
• Gather feedback via beta testing with club members.

Hurdles:

• Identifying edge cases during testing.
• Fixing compatibility issues across devices and browsers.

---

9. Deployment

Steps:

• Deploy frontend on platforms like Vercel or Netlify.
• Host backend on platforms like Heroku or AWS.
• Ensure proper DNS routing to integrate the new section with the existing site.

Hurdles:

• Managing downtime during deployment.
• Scaling to handle increased traffic after launch.

---

Technologies to Leverage

• Frontend: React.js, Tailwind CSS
• Backend: Node.js with Express
• Database: MongoDB Atlas
• Auth: Firebase Auth
• Payments: Stripe + UPI Integration
• Admin Panel: Use React or a library like Ant Design for rapid development.

---

Potential Risks

1. Inventory Management Issues: Overpromising stock could lead to dissatisfaction.
2. Data Security: Securing user and payment data is critical.
3. Unforeseen Costs: Merchandise production, payment gateway fees, and hosting.