Skip to content

License

Notifications You must be signed in to change notification settings

Ceyhun2056/Marketplace

Repository files navigation

Marketplace Application

📋 Overview

This marketplace application provides a complete e-commerce experience with user authentication, product listings, shopping cart, multi-language support, and hybrid storage options. Built with vanilla JavaScript, HTML, and CSS, this application works directly in the browser without requiring a backend server.

✨ Features

🔐 Authentication & User Managementment

  • Local or cloud-based authentication system
  • User registration and login system
  • User profiles with avatar uploads
  • Profile management with personal information editing
  • User statistics (listings count, reviews, member since)

🛍️ Product Management

  • Complete CRUD operations for products
  • Product categories with visual tiles
  • Image upload and management
  • Product search and filtering
  • Stock management
  • Product variants (size, color, etc.)
  • Product reviews and ratings

💬 Social Features

  • Favorites/wishlist system
  • Shopping cart functionality
  • Order history tracking
  • Comments and reviews on products

🌍 Multi-language Support

  • Support for 3 languages: Azerbaijani (AZ), English (EN), Russian (RU)
  • Dynamic language switching
  • Internationalization with data-i18n attributes

📱 UI/UX Features

  • Responsive design for all devices
  • Dark mode support
  • Category-based product browsing
  • Advanced search with filters
  • Location-based filtering
  • Modal-based interactions

💾 Data Storage Options

  • Local storage (default): Store data in browser's localStorage
  • Cloud storage (optional): Store data in Firebase for cross-device access

📱 Frontend Features

Language Support

  • Dynamic language switching between AZ, EN, RU
  • All text elements support internationalization
  • Persistent language preference

Product Categories

  • Electronics, Books, Clothing, Home & Gardenrden
  • Services, Transport, Sports, Personal Items
  • Animals, Medical Products

User Interface

  • Responsive design for mobile and desktop
  • Dark mode toggle
  • Advanced search and filtering
  • Modal-based interactions

💾 Storage Options

Local Storage (Default)

  • Data is stored in the browser's localStorage
  • Works offline and without any additional setup
  • Data is limited to the current browser
  • Clearing browser data will erase all information

Cloud Storage (Optional via Firebase)

  • Cross-device data synchronization
  • User authentication with Firebase Auth
  • Data persistence even if browser data is cleared
  • Profile and product data stored in Firestore
  • Avatar images stored in Firebase Storage

📊 Features in Detail

Authentication System

  • Hybrid authentication system (localStorage or Firebase)
  • User profile management
  • Session persistence across page reloads
  • User role management

Product Management

  • Full CRUD operations
  • Image upload support
  • Product variants (size, color)
  • Inventory tracking
  • Category organization

Search & Filteringring

  • Text-based search
  • Category filtering
  • Price range filtering
  • Location-based filtering
  • Sort by date, price, popularity

🚀 Setting Up Cloud Storage

To enable cloud storage functionality with Firebase:

  1. Create a Firebase project at firebase.google.com
  2. Enable Authentication (email/password) in the Firebase console
  3. Set up Firestore Database with appropriate security rules
  4. Create a Storage bucket for images
  5. Register a web app in your Firebase project
  6. Copy your Firebase configuration
  7. Edit config.js and update the Firebase configuration:
// Application Configuration

const appConfig = {
     // Set to true to enable cloud storage, false to use localStorage only
     useCloudStorage: true,
    
      // Firebase configuration
     firebase: {
         apiKey: "YOUR_API_KEY",
         authDomain: "your-project.firebaseapp.com",
         projectId: "your-project-id",
         storageBucket: "your-project.appspot.com",
         messagingSenderId: "your-sender-id",
         appId: "your-app-id"
     }

};

�‍💻 Running the Application

Local Development

This application is a static website that can be served with any HTTP server. Here are a few options:

Using Python's built-in HTTP server:

# Navigate to the project directory

cd path/to/marketplace


# Start the server on port 8000
python -m http.server 80000

Using Node.js with http-server:

# Install http-server if not already installed
npm install -g http-server



# Navigate to the project directory

cd path/to/marketplace


# Start the server
http-server -p 80000

Then open your browser and go to: http://localhost:8000

Deploying to GitHub Pages

  1. Push your repository to GitHub
  2. Go to Settings > Pagesges
  3. Select the branch to deploy (usually main or master)
  4. Click Save

Your site will be available at https://your-username.github.io/marketplace/

�🤝 Contributing

  1. Fork the repository
  2. Create your 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 licensed under the MIT License - see the LICENSE file for details.

🐛 Known Issues

  • Image uploads are limited to 5MB
  • Real-time features require stable internet connection
  • Some features require JavaScript enabled

🔮 Future Enhancements

  • Payment gateway integration (Stripe/PayPal)
  • Email notifications
  • Advanced analytics dashboard
  • Mobile app development
  • Shipping integration
  • Multi-vendor support
  • Advanced product filtering
  • Order tracking system

🙏 Acknowledgments

  • Built with modern web technologies
  • Inspired by popular marketplace platforms like Avito
  • Thanks to all contributors and the open-source community

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published