Skip to content
rishanmenezes
ecofinds
Public

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository
BranchesTags

Repository files navigation

EcoFinds

EcoFinds is a sustainable second-hand marketplace that connects eco-conscious buyers and sellers. Our mission is to reduce waste and carbon emissions by giving pre-loved items a second life. Every purchase on EcoFinds contributes to a more sustainable future.

🌱 Features

Core Functionality

  • User Authentication: Secure sign-up and login powered by Supabase Auth with email verification
  • Product Marketplace: Browse and discover a wide range of second-hand products across multiple categories
  • Product Listings: Create and manage your own product listings with image uploads
  • Shopping Cart: Add items to cart and manage your shopping experience
  • Purchase History: Track your purchases and their environmental impact
  • User Profiles: Personalize your profile and view your eco-impact statistics
  • Seller Reviews: Rate and review sellers to build a trusted community
  • CO₂ Impact Tracking: See the environmental impact of your second-hand purchases

User Experience

  • Responsive Design: Seamless experience across desktop, tablet, and mobile devices
  • Real-time Updates: Live cart count and instant product updates
  • Search & Filter: Advanced search functionality with category filtering
  • Eco Badges: Earn eco-champion badges based on your seller ratings and sales
  • Beautiful UI: Modern, eco-themed design with smooth animations

🛠 Technologies Used

Frontend

  • React 18.3.1 - UI library with TypeScript support
  • TypeScript 5.8.3 - Type-safe JavaScript
  • Vite 5.4.19 - Fast build tool and dev server
  • Tailwind CSS 3.4.17 - Utility-first CSS framework
  • Shadcn UI - Beautiful, accessible component library built on Radix UI
  • Radix UI - Unstyled, accessible UI primitives
  • React Router DOM 6.30.1 - Client-side routing
  • React Hook Form 7.61.1 - Form management with validation
  • TanStack Query 5.83.0 - Data fetching and state management
  • Lucide React 0.462.0 - Beautiful icon library
  • Sonner 1.7.4 - Toast notifications

Backend & Database

  • Supabase - Backend-as-a-Service providing:
    • PostgreSQL database
    • Authentication system
    • File storage for product images
    • Real-time subscriptions
    • Row Level Security (RLS)

Development Tools

  • ESLint 9.32.0 - Code linting and formatting
  • PostCSS 8.5.6 - CSS processing
  • Autoprefixer 10.4.21 - CSS vendor prefixing
  • TypeScript ESLint 8.38.0 - TypeScript linting

📦 Installation

Prerequisites

  • Node.js 18+
  • npm or bun package manager
  • A Supabase project (free tier works)

Step-by-Step Setup

  1. Clone the repository:

    git clone https://github.com/rishanmenezes/ecofinds.git
cd EcoFinds

  2. Install dependencies:

    npm install
# or
bun install

  3. Set up Supabase:

    • Create a new project at supabase.com
    • Run the SQL migration from supabase/migrations/20250906060706_fdcb8fa7-ee32-4159-a3e3-3c84952e37f7.sql
    • Create a storage bucket named product-images with public access
    • Enable Row Level Security (RLS) policies as defined in the migration

  4. Configure environment variables:

    Create a .env file in the root directory:

    VITE_SUPABASE_URL="YOUR_SUPABASE_URL"
VITE_SUPABASE_ANON_KEY="YOUR_SUPABASE_ANON_KEY"

    Get these credentials from your Supabase project settings → API.

  5. Update Supabase client configuration:

    Edit src/integrations/supabase/client.ts with your credentials:

    const SUPABASE_URL = "YOUR_SUPABASE_URL";
const SUPABASE_PUBLISHABLE_KEY = "YOUR_SUPABASE_ANON_KEY";

  6. Run the development server:

    npm run dev
# or
bun run dev

    The application will be accessible at http://localhost:8080

🚀 Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run build:dev - Build for development mode
  • npm run lint - Run ESLint
  • npm run preview - Preview production build

📁 Project Structure

EcoFinds/
├── public/                          # Static assets
│   ├── favicon.ico
│   ├── placeholder.svg
│   └── robots.txt
├── src/
│   ├── components/                  # Reusable components
│   │   ├── Layout/
│   │   │   └── Navbar.tsx          # Main navigation bar
│   │   ├── Product/
│   │   │   └── ProductCard.tsx     # Product display card
│   │   └── ui/                     # Shadcn UI components (40+ components)
│   │       ├── button.tsx
│   │       ├── card.tsx
│   │       ├── input.tsx
│   │       └── ... (many more)
│   ├── hooks/                      # Custom React hooks
│   │   ├── useAuth.tsx             # Authentication state management
│   │   ├── use-mobile.tsx          # Mobile detection
│   │   └── use-toast.ts            # Toast notifications
│   ├── integrations/               # Third-party integrations
│   │   └── supabase/
│   │       ├── client.ts           # Supabase client configuration
│   │       └── types.ts            # TypeScript type definitions
│   ├── lib/                        # Utility functions
│   │   └── utils.ts                # Helper functions
│   ├── pages/                      # Application pages
│   │   ├── Index.tsx               # Landing page
│   │   ├── Auth.tsx                # Login/Signup page
│   │   ├── Feed.tsx                # Product marketplace
│   │   ├── AddProduct.tsx          # Product listing form
│   │   ├── MyListings.tsx          # User's product management
│   │   ├── Cart.tsx                # Shopping cart
│   │   ├── Purchases.tsx           # Purchase history
│   │   ├── Profile.tsx             # User profile
│   │   └── NotFound.tsx            # 404 page
│   ├── App.tsx                     # Main app component with routing
│   ├── main.tsx                    # Application entry point
│   ├── index.css                   # Global styles and Tailwind directives
│   └── App.css                     # Additional app styles
├── supabase/                       # Supabase configuration
│   ├── config.toml                 # Supabase CLI config
│   └── migrations/
│       └── 20250906060706_*.sql    # Database schema migration
├── .env                            # Environment variables (not in git)
├── .gitignore                      # Git ignore rules
├── components.json                 # Shadcn UI configuration
├── eslint.config.js               # ESLint configuration
├── package.json                    # Dependencies and scripts
├── postcss.config.js              # PostCSS configuration
├── tailwind.config.ts             # Tailwind CSS configuration
├── tsconfig.json                  # TypeScript configuration
├── tsconfig.app.json              # App TypeScript config
├── tsconfig.node.json             # Node TypeScript config
├── vite.config.ts                 # Vite build configuration
└── README.md                      # This file

🗄 Database Schema

Tables

profiles

Extends Supabase auth.users with additional user information

  • id (UUID, Primary Key) - References auth.users
  • username (TEXT, Unique) - Display username
  • email (TEXT) - User email
  • created_at (TIMESTAMP) - Account creation date
  • updated_at (TIMESTAMP) - Last update date

products

Product listings in the marketplace

  • id (UUID, Primary Key) - Unique product identifier
  • title (TEXT) - Product title
  • description (TEXT) - Detailed product description
  • category (TEXT) - Product category
  • price (DECIMAL) - Product price
  • image_url (TEXT) - Product image URL
  • user_id (UUID, Foreign Key) - Seller's user ID
  • created_at (TIMESTAMP) - Listing creation date
  • updated_at (TIMESTAMP) - Last update date

cart

User shopping cart items

  • id (UUID, Primary Key) - Unique cart item identifier
  • user_id (UUID, Foreign Key) - Cart owner
  • product_id (UUID, Foreign Key) - Product reference
  • created_at (TIMESTAMP) - Addition date
  • Unique constraint on (user_id, product_id)

purchases

Purchase history records

  • id (UUID, Primary Key) - Unique purchase identifier
  • user_id (UUID, Foreign Key) - Buyer's user ID
  • product_id (UUID, Foreign Key) - Purchased product
  • purchased_at (TIMESTAMP) - Purchase date

reviews

Seller reviews and ratings

  • id (UUID, Primary Key) - Unique review identifier
  • buyer_id (UUID, Foreign Key) - Reviewer's user ID
  • seller_id (UUID, Foreign Key) - Seller being reviewed
  • product_id (UUID, Foreign Key) - Related product
  • rating (INTEGER) - Rating from 1-5
  • review_text (TEXT) - Optional review text
  • created_at (TIMESTAMP) - Review date
  • Unique constraint on (buyer_id, product_id)

Storage

product-images bucket

Stores product images with the following policies:

  • Public read access for all users
  • Authenticated users can upload
  • Users can manage their own images (organized by user_id)

Security

All tables have Row Level Security (RLS) enabled with policies ensuring:

  • Users can only access their own data (cart, purchases, profile)
  • Public read access for products and reviews
  • Users can only modify their own products and listings
  • Automatic profile creation on user signup via database trigger

🎨 Design System

Color Palette

The application uses an eco-friendly green theme:

  • Primary: Forest green (#2d5a3d)
  • Secondary: Sage green (#9acd8a)
  • Tertiary: Earthy olive (#8b9a6b)
  • Earth: Warm brown (#8b7355)
  • Forest: Deep green (#1a4d2e)

Custom Components

  • Shadows: Eco-themed soft shadows
  • Gradients: Eco and earth gradient combinations
  • Animations: Custom fade-in, scale-in, and bounce animations
  • Dark Mode: Full dark theme support with eco-friendly colors

🔑 Key Features Explained

Authentication Flow

  1. User signs up with email, password, and username
  2. Supabase Auth handles email verification
  3. Database trigger automatically creates profile record
  4. Auth state persists via localStorage
  5. Protected routes redirect unauthenticated users

Product Listing Process

  1. User fills product details (title, description, category, price)
  2. Image is uploaded to Supabase Storage
  3. Product record is created in database
  4. Image URL is stored with product
  5. Product appears in marketplace feed

Shopping Flow

  1. Users browse products with search and category filters
  2. Add products to cart (prevents adding own products)
  3. Cart shows total and CO₂ savings estimate
  4. Checkout moves items to purchases table
  5. Cart is cleared and purchase history is updated

CO₂ Impact Calculation

The application estimates environmental impact using a simple formula:

CO₂ Savings = (Product Price × 0.1) + Random Factor (0-2kg)

This is a simplified calculation for demonstration purposes.

👥 Contributors

  • Rishan Menezes - Project Lead
  • Rakesh G - Frontend Development
  • Nagaraju HL - Backend Integration
  • Prithvi HN - UI/UX Design

🎥 Demo

Watch a demo of EcoFinds:

https://youtu.be/u-iIejnpoww?si=P4MFfKKwY8Rhqp

🤝 Contributing

We welcome contributions to EcoFinds! Here's how you can help:

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

Development Guidelines

  • Follow the existing code style and conventions
  • Use TypeScript for type safety
  • Write clean, readable code with comments
  • Test your changes thoroughly
  • Ensure responsive design for all components

Areas for Improvement

  • Implement real payment gateway integration
  • Add real-time chat between buyers and sellers
  • Implement advanced search with filters
  • Add product comparison feature
  • Create seller dashboard with analytics
  • Implement push notifications
  • Add more accurate CO₂ impact calculations
  • Create mobile app (React Native)
  • Add internationalization (i18n)
  • Implement advanced reporting system

📄 License

This project is open source and available under the MIT License.

🌍 Environmental Impact

EcoFinds is more than just a marketplace—it's a movement towards sustainable consumption. By choosing second-hand items, our users help:

  • Reduce Landfill Waste: Give pre-loved items a new life
  • Lower Carbon Emissions: Reduce manufacturing demand
  • Save Natural Resources: Conserve water, energy, and raw materials
  • Build Community: Connect eco-conscious individuals

Together, we're making a difference, one purchase at a time! 🌱

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages