Myn-Social (Fashion-Social Media) 🛍️

This project aims to enhance the Myntra website by introducing new features to boost user engagement, encourage user-generated content, and incorporate a reward system. These improvements are designed to make the shopping experience more interactive and social, especially for younger users.

Table of contents is generated by github! 🔴

Problem Statement ❓

• Low User Engagement: Shopping platforms aren't exciting enough for young users who prefer interactive and social features.
• Lack of User-Generated Content: Current platforms don't encourage users to share their fashion experiences, resulting in fewer reviews, photos, and videos.
• Absence of Rewards System: There's no system to reward users for their engagement, making them less likely to participate actively.
• Few Social Features: Existing platforms don't have enough social media functions for sharing and interacting.

Solution 📝

Personal Social Fashion Page

• User Profiles: Let users share their fashion experiences directly on their personal profile pages.
• Shoppable Posts: Allow users and influencers to create posts with shoppable links.
• Product Tagging: Every product within the profile will be interconnected to existing products on Myntra, or users can tag manually while posting a product snapshot.
• User-Generated Content (UGC): Provides social proof and allows users to see how items look on real people.

Myntra Coins 👛

• Virtual Currency: Coins are a virtual currency within our platform.
• Reward System: Incentivize users to actively participate and contribute to the platform.
• Redeemable Rewards: Users can redeem coins for discounts on their purchases, making their shopping experience more cost-effective.
• Earning Coins: Users earn coins via posting reviews, creating content, etc.

Screenshots 📸

Register

Login

Posts

MynCoin & Trends

Add Previous Orders

Posting

Demo Video 📽️

FINAL.VOICE.online-video-cutter.mp4

FINAL.VOICE.2.mp4

Tech Stack 👩🏻‍💻

Frontend

• React: For building the user interface.
• Reducers: For managing complex state logic.

Backend

• Node.js: For server-side runtime environment.
• Express: For building RESTful APIs.

Database

• MongoDB: For storing various types of data (User Data, Post Data, Coins Data, Trends Data).

Architecture Diagram

Frontend: React + Context API
Backend: Node.js + Express
Database: MongoDB

Setup and Installation 🚀

1. Clone the repository:

   git clone https://github.com/your-repo/myntra-enhancement-project.git
   cd myntra-enhancement-project

2. Install dependencies:

   # For backend
   cd backend
   npm install
   
   # For frontend
   cd ../frontend
   npm install

3. Run the development servers:

   # For backend
   cd backend
   npm start
   
   # For frontend
   cd ../frontend
   npm start

4. Add Envioronment Variables: Add a .env file in both Client and Server folder

   # For backend
   PORT=5000
   MONGODB_CONNECTION=mongodb+srv://BLAH..BLAH..BLAH
   JWTKEY=ANY_RANDOM_KEY
   
   # For frontend 
   REACT_APP_BASE_URL = http://localhost:5000
   REACT_APP_PUBLIC_FOLDER = http://localhost:5000/images/
   REACT_APP_URL = http://localhost:3000

Usage 📜

• User Profiles: Navigate to your profile page to start sharing your fashion experiences.
• Shoppable Posts: Create posts with links to products available on Myntra.
• Earning Coins: Engage with the platform by posting reviews and content to earn Myntra Coins.
• Redeem Coins: Use earned coins to get discounts on your purchases.