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.
- 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)
- 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
- Favorites/wishlist system
- Shopping cart functionality
- Order history tracking
- Comments and reviews on products
- Support for 3 languages: Azerbaijani (AZ), English (EN), Russian (RU)
- Dynamic language switching
- Internationalization with
data-i18nattributes
- Responsive design for all devices
- Dark mode support
- Category-based product browsing
- Advanced search with filters
- Location-based filtering
- Modal-based interactions
- Local storage (default): Store data in browser's localStorage
- Cloud storage (optional): Store data in Firebase for cross-device access
- Dynamic language switching between AZ, EN, RU
- All text elements support internationalization
- Persistent language preference
- Electronics, Books, Clothing, Home & Gardenrden
- Services, Transport, Sports, Personal Items
- Animals, Medical Products
- Responsive design for mobile and desktop
- Dark mode toggle
- Advanced search and filtering
- Modal-based interactions
- 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
- 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
- Hybrid authentication system (localStorage or Firebase)
- User profile management
- Session persistence across page reloads
- User role management
- Full CRUD operations
- Image upload support
- Product variants (size, color)
- Inventory tracking
- Category organization
- Text-based search
- Category filtering
- Price range filtering
- Location-based filtering
- Sort by date, price, popularity
To enable cloud storage functionality with Firebase:
- Create a Firebase project at firebase.google.com
- Enable Authentication (email/password) in the Firebase console
- Set up Firestore Database with appropriate security rules
- Create a Storage bucket for images
- Register a web app in your Firebase project
- Copy your Firebase configuration
- Edit
config.jsand 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"
}
};This application is a static website that can be served with any HTTP server. Here are a few options:
# Navigate to the project directory
cd path/to/marketplace
# Start the server on port 8000
python -m http.server 80000# 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 80000Then open your browser and go to: http://localhost:8000
- Push your repository to GitHub
- Go to Settings > Pagesges
- Select the branch to deploy (usually main or master)
- Click Save
Your site will be available at https://your-username.github.io/marketplace/
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Image uploads are limited to 5MB
- Real-time features require stable internet connection
- Some features require JavaScript enabled
- Payment gateway integration (Stripe/PayPal)
- Email notifications
- Advanced analytics dashboard
- Mobile app development
- Shipping integration
- Multi-vendor support
- Advanced product filtering
- Order tracking system
- Built with modern web technologies
- Inspired by popular marketplace platforms like Avito
- Thanks to all contributors and the open-source community