ReWear+ - Community Clothing Exchange Platform

Problem Statement

ReWear – Community Clothing Exchange

Develop ReWear, a web-based platform that enables users to exchange unused clothing through direct swaps or a point-based redemption system. The goal is to promote sustainable fashion and reduce textile waste by encouraging users to reuse wearable garments instead of discarding them.

Team Members

Name	Email Address
[Ketan Irale Patil]	[[email protected]]
[Sagar Waghmare]	[[email protected]]
[Atharva Wandhare]	[[email protected]]

🌟 Features

Core Functionality

• User Authentication - Email/password signup and login with NextAuth
• Landing Page - Platform introduction with featured items carousel
• User Dashboard - Profile details, points balance, and swap management
• Item Detail Page - Comprehensive item view with swap/redeem options
• Add New Item Page - Upload and list items with image support
• Admin Role - Moderation and oversight capabilities

Advanced Features

• Direct Swap System - Modal-based offer creation and management
• Point-Based Redemption - Alternative to direct swapping
• Real-time Notifications - Toast-based feedback system
• Image Upload - Cloudinary integration for image management
• Responsive Design - Mobile-first approach with Tailwind CSS
• Server-Side Rendering - Optimized performance with Next.js 15

🚀 Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI, Lucide React
• Authentication: NextAuth.js v5
• Image Storage: Cloudinary
• Database: Prisma (configured)
• Animations: Framer Motion
• State Management: React Hooks
• Notifications: Custom toast system

📦 Installation

1. Clone the repository

   git clone https://github.com/ketanip/oddo-hackathon.git
   cd oddo-hackathon

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Environment Setup Create a .env.local file in the root directory:

   # Cloudinary Configuration
   CLOUDINARY_CLOUD_NAME=your_cloud_name
   CLOUDINARY_API_KEY=your_api_key
   CLOUDINARY_API_SECRET=your_api_secret
   
   # NextAuth Configuration
   NEXTAUTH_SECRET=your_nextauth_secret
   NEXTAUTH_URL=http://localhost:3000
   
   # Database (if using)
   DATABASE_URL="your_database_url"

4. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

5. Open your browser Navigate to http://localhost:3000

🎯 Key Features Implementation

1. Landing Page

• Platform introduction and value proposition
• Call-to-action buttons: "Start Swapping", "Browse Items", "List an Item"
• Featured items carousel with auto-sliding
• Statistics section showcasing platform impact
• How it works section with step-by-step guide

2. User Authentication

• Email/password signup and login
• Session management with NextAuth.js
• Protected routes and user context

3. Item Management

• Add New Item: Upload images, enter details (title, description, category, size, condition, tags)
• Item Detail Page: Image gallery, full description, uploader info, swap/redeem options
• Item Availability: Real-time status updates

4. Swap System

• Direct Swaps: Modal-based offer creation with item selection
• Offer Management: Accept/decline offers with notifications
• Point-Based Redemption: Alternative exchange method
• Swap History: Track completed and ongoing swaps

5. User Dashboard

• Profile details and points balance
• Uploaded items overview with management options
• Ongoing and completed swaps list
• Personal statistics and achievements

6. Admin Features

• Moderate and approve/reject item listings
• Remove inappropriate or spam items
• Lightweight admin panel for platform oversight

🏗️ Project Structure

├── app/                          # Next.js App Router
│   ├── (auth)/                  # Authentication pages
│   ├── product/                 # Product-related pages
│   │   ├── [productId]/        # Dynamic product pages
│   │   ├── create/             # Add new item page
│   │   └── data/               # Data management
│   ├── user/                   # User profile pages
│   └── layout.tsx              # Root layout
├── components/                  # Reusable components
│   ├── global/                 # Global components (Header, Footer)
│   ├── landing/                # Landing page sections
│   ├── product/                # Product-related components
│   └── ui/                     # UI components (Modal, Notifications)
├── lib/                        # Utility functions
├── data/                       # Configuration and constants
└── public/                     # Static assets

🌐 API Endpoints

• /api/storage/products - Product CRUD operations
• /api/storage/offers - Offer management
• /api/storage/users - User data management
• /api/auth/* - NextAuth.js authentication routes

🎨 Design System

• Colors: Custom CSS variables for consistent theming
• Typography: Poppins font family
• Components: Consistent design language with Tailwind CSS
• Responsive: Mobile-first design approach
• Accessibility: ARIA labels and keyboard navigation support

🔧 Development Scripts

npm run dev        # Start development server with Turbopack
npm run build      # Build for production
npm run start      # Start production server
npm run lint       # Run ESLint

🚀 Deployment

The application is optimized for deployment on Vercel:

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Configure environment variables
4. Deploy automatically with each push

🌱 Sustainability Impact

ReWear+ promotes sustainable fashion by:

• Reducing textile waste through clothing reuse
• Encouraging community-based exchanges
• Providing an alternative to fast fashion
• Building awareness about sustainable consumption

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is developed for educational purposes as part of a hackathon.

---

Built with ❤️ for sustainable fashion and community exchange