ËLOOK Store

I'll help you create a PWA store for ËLOOK with all the requested features. Let's structure this as a comprehensive project with separate modules for better organization. { "name": "elook-pwa-store", "version": "1.0.0", "description": "ËLOOK PWA Store", "main": "server.js", "scripts": { "start": "node server.js", "dev": "nodemon server.js" }, "dependencies": { "bcryptjs": "^2.4.3", "body-parser": "^1.20.2", "cors": "^2.8.5", "express": "^4.18.2", "jsonwebtoken": "^9.0.2", "mongoose": "^8.0.3", "multer": "^1.4.5-lts.1", "sw-precache": "^5.2.1" }, "devDependencies": { "nodemon": "^3.0.2" } } const express = require('express'); const mongoose = require('mongoose'); const bodyParser = require('body-parser'); const cors = require('cors'); const jwt = require('jsonwebtoken'); const bcrypt = require('bcryptjs'); const multer = require('multer'); const path = require('path'); const app = express(); app.use(cors()); app.use(bodyParser.json()); app.use(express.static('public')); // MongoDB connection mongoose.connect('mongodb://localhost:27017/elook', { useNewUrlParser: true, useUnifiedTopology: true }); // Models const User = mongoose.model('User', { email: String, phone: String, password: String, role: { type: String, default: 'user' } }); const Product = mongoose.model('Product', { name: String, description: String, price: Number, category: String, image: String, createdAt: { type: Date, default: Date.now } }); // Image upload const storage = multer.diskStorage({ destination: './public/uploads/', filename: function(req, file, cb) { cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname)); } }); const upload = multer({ storage }); // Auth middleware function authenticateToken(req, res, next) { const authHeader = req.headers['authorization']; const token = authHeader && authHeader.split(' ')[1]; if (!token) return res.sendStatus(401); jwt.verify(token, process.env.ACCESS_TOKEN_SECRET || 'secret', (err, user) => { if (err) return res.sendStatus(403); req.user = user; next(); }); } function isAdmin(req, res, next) { if (req.user.role !== 'admin') return res.sendStatus(403); next(); } // Routes app.post('/api/register', async (req, res) => { try { const { email, phone, password } = req.body; const hashedPassword = await bcrypt.hash(password, 10); const user = new User({ email, phone, password: hashedPassword }); await user.save(); res.status(201).send('User created'); } catch (err) { res.status(500).send(err.message); } }); app.post('/api/login', async (req, res) => { const { email, password } = req.body; const user = await User.findOne({ email }); if (!user) return res.status(400).send('User not found'); const validPass = await bcrypt.compare(password, user.password); if (!validPass) return res.status(400).send('Invalid password'); const token = jwt.sign( { id: user._id, role: user.role }, process.env.ACCESS_TOKEN_SECRET || 'secret', { expiresIn: '1h' } ); res.json({ token }); }); // Product routes app.get('/api/products', async (req, res) => { const { category, minPrice, maxPrice } = req.query; let query = {}; if (category) query.category = category; if (minPrice || maxPrice) { query.price = {}; if (minPrice) query.price.$gte = Number(minPrice); if (maxPrice) query.price.$lte = Number(maxPrice); } const products = await Product.find(query); res.json(products); }); // Admin routes app.post('/api/products', authenticateToken, isAdmin, upload.single('image'), async (req, res) => { try { const { name, description, price, category } = req.body; const product = new Product({ name, description, price, category, image: req.file ? `/uploads/${req.file.filename}` : null }); await product.save(); res.status(201).json(product); } catch (err) { res.status(500).send(err.message); } }); app.put('/api/products/:id', authenticateToken, isAdmin, upload.single('image'), async (req, res) => { try { const { name, description, price, category } = req.body; const update = { name, description, price, category }; if (req.file) update.image = `/uploads/${req.file.filename}`; const product = await Product.findByIdAndUpdate(req.params.id, update, { new: true }); res.json(product); } catch (err) { res.status(500).send(err.message); } }); app.delete('/api/products/:id', authenticateToken, isAdmin, async (req, res) => { try { await Product.findByIdAndDelete(req.params.id); res.sendStatus(204); } catch (err) { res.status(500).send(err.message); } }); // PWA Service Worker app.get('/service-worker.js', (req, res) => { res.sendFile(path.join(__dirname, 'public', 'service-worker.js')); }); const PORT = process.env.PORT || 3000; app.listen(PORT, () => console.log(`Server running on port ${PORT}`)); ËLOOK Store

:root { --primary-color: #4a148c; --secondary-color: #7b1fa2; --accent-color: #e91e63; --light-color: #f5f5f5; --dark-color: #212121; --success-color: #4caf50; --warning-color: #ff9800; --error-color: #f44336; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light-color); color: var(--dark-color); line-height: 1.6; } .app-container { display: flex; flex-direction: column; min-height: 100vh; } .app-header { background-color: var(--primary-color); color: white; padding: 1rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .auth-nav { display: flex; gap: 1rem; } button { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; background-color: var(--secondary-color); color: white; transition: background-color 0.3s; } button:hover { background-color: var(--accent-color); } .hidden { display: none !important; } .form-container { max-width: 500px; margin: 2rem auto; padding: 2rem; background: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } form { display: flex; flex-direction: column; gap: 1rem; } input, textarea, select { padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; } .filters { padding: 1rem; background: white; margin: 1rem; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .price-range { display: flex; gap: 0.5rem; align-items: center; } .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; padding: 1rem; } .product-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.3s; } .product-card:hover { transform: translateY(-5px); } .product-image { width: 100%; height: 200px; object-fit: cover; } .product-info { padding: 1rem; } .product-price { color: var(--primary-color); font-weight: bold; margin-top: 0.5rem; } @media (max-width: 768px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .filters { flex-direction: column; align-items: stretch; } .price-range { flex-direction: column; align-items: stretch; } } document.addEventListener('DOMContentLoaded', () => { // DOM Elements const loginBtn = document.getElementById('login-btn'); const registerBtn = document.getElementById('register-btn'); const adminBtn = document.getElementById('admin-btn'); const logoutBtn = document.getElementById('logout-btn'); const authForms = document.getElementById('auth-forms'); const adminPanel = document.getElementById('admin-panel'); const catalog = document.getElementById('catalog'); const loginForm = document.getElementById('login-form'); const registerForm = document.getElementById('register-form'); const productForm = document.getElementById('product-form'); const productsContainer = document.getElementById('products-container'); const categoryFilter = document.getElementById('category-filter'); const minPrice = document.getElementById('min-price'); const maxPrice = document.getElementById('max-price'); const applyFilters = document.getElementById('apply-filters'); let currentUser = null; let products = []; let categories = []; // Event Listeners loginBtn.addEventListener('click', () => toggleAuthForms('login')); registerBtn.addEventListener('click', () => toggleAuthForms('register')); logoutBtn.addEventListener('click', logout); adminBtn.addEventListener('click', () => { adminPanel.classList.toggle('hidden'); catalog.classList.toggle('hidden'); }); loginForm.addEventListener('submit', handleLogin); registerForm.addEventListener('submit', handleRegister); productForm.addEventListener('submit', handleProductSubmit); applyFilters.addEventListener('click', applyProductFilters); // Initialize checkAuthStatus(); fetchProducts(); fetchCategories(); // Functions function toggleAuthForms(form) { authForms.classList.remove('hidden'); loginForm.classList.toggle('hidden', form !== 'login'); registerForm.classList.toggle('hidden', form !== 'register'); } async function handleLogin(e) { e.preventDefault(); const email = document.getElementById('login-email').value; const password = document.getElementById('login-password').value; try { const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, password }) }); if (!response.ok) throw new Error('Login failed'); const { token } = await response.json(); localStorage.setItem('token', token); currentUser = parseJwt(token); updateUI(); authForms.classList.add('hidden'); fetchProducts(); } catch (err) { alert(err.message); } } async function handleRegister(e) { e.preventDefault(); const email = document.getElementById('register-email').value; const phone = document.getElementById('register-phone').value; const password = document.getElementById('register-password').value; try { const response = await fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, phone, password }) }); if (!response.ok) throw new Error('Registration failed'); alert('Registration successful! Please login.'); toggleAuthForms('login'); } catch (err) { alert(err.message); } } function parseJwt(token) { const base64Url = token.split('.')[1]; const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); return JSON.parse(atob(base64)); } function checkAuthStatus() { const token = localStorage.getItem('token'); if (token) { try { currentUser = parseJwt(token); updateUI(); } catch { localStorage.removeItem('token'); } } } function updateUI() { const isLoggedIn = !!currentUser; const isAdmin = isLoggedIn && currentUser.role === 'admin'; loginBtn.classList.toggle('hidden', isLoggedIn); registerBtn.classList.toggle('hidden', isLoggedIn); logoutBtn.classList.toggle('hidden', !isLoggedIn); adminBtn.classList.toggle('hidden', !isAdmin); authForms.classList.add('hidden'); adminPanel.classList.add('hidden'); catalog.classList.remove('hidden'); } function logout() { localStorage.removeItem('token'); currentUser = null; updateUI(); } async function fetchProducts() { try { const response = await fetch('/api/products'); products = await response.json(); renderProducts(products); } catch (err) { console.error('Failed to fetch products:', err); } } async function fetchCategories() { try { const response = await fetch('/api/products'); const products = await response.json(); categories = [...new Set(products.map(p => p.category))]; renderCategories(); } catch (err) { console.error('Failed to fetch categories:', err); } } function renderCategories() { categoryFilter.innerHTML = ''; categories.forEach(category => { const option = document.createElement('option'); option.value = category; option.textContent = category; categoryFilter.appendChild(option); }); } function renderProducts(productsToRender) { productsContainer.innerHTML = ''; productsToRender.forEach(product => { const productCard = document.createElement('div'); productCard.className = 'product-card'; productCard.innerHTML = `

${product.name}

${product.description || ''}

$${product.price.toFixed(2)}

`; productsContainer.appendChild(productCard); }); } function applyProductFilters() { const category = categoryFilter.value; const min = minPrice.value ? Number(minPrice.value) : null; const max = maxPrice.value ? Number(maxPrice.value) : null; let filteredProducts = [...products]; if (category) { filteredProducts = filteredProducts.filter(p => p.category === category); } if (min !== null) { filteredProducts = filteredProducts.filter(p => p.price >= min); } if (max !== null) { filteredProducts = filteredProducts.filter(p => p.price <= max); } renderProducts(filteredProducts); } async function handleProductSubmit(e) { e.preventDefault(); if (!currentUser || currentUser.role !== 'admin') return; const formData = new FormData(); formData.append('name', document.getElementById('product-name').value); formData.append('description', document.getElementById('product-description').value); formData.append('price', document.getElementById('product-price').value); formData.append('category', document.getElementById('product-category').value); const imageInput = document.getElementById('product-image'); if (imageInput.files[0]) { formData.append('image', imageInput.files[0]); } try { const response = await fetch('/api/products', { method: 'POST', headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }, body: formData }); if (!response.ok) throw new Error('Failed to add product'); const product = await response.json(); products.push(product); renderProducts(products); productForm.reset(); fetchCategories(); } catch (err) { alert(err.message); } } }); { "name": "ËLOOK Store", "short_name": "ËLOOK", "start_url": "/", "display": "standalone", "background_color": "#4a148c", "theme_color": "#4a148c", "description": "PWA Store for ËLOOK products", "icons": [ { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] } const CACHE_NAME = 'elook-store-v1'; const urlsToCache = [ '/', '/index.html', '/styles.css', '/app.js', '/manifest.json', '/icons/icon-192x192.png', '/icons/icon-512x512.png' ]; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request)) ); }); To get started: 1. Install dependencies with `npm install` 2. Start the development server with `npm run dev` 3. The application will be available at http://localhost:3000 Key features implemented: - User authentication (email/phone + JWT) - Admin panel for product management - Product catalog with category and price filters - Responsive design using CSS Grid and Flexbox - PWA capabilities with service worker and manifest - Clean, modular code structure Note: For a production environment, you'll need to: 1. Set up a real MongoDB database 2. Configure proper environment variables (ACCESS_TOKEN_SECRET) 3. Add proper error handling and input validation 4. Implement proper security measures (CORS, rate limiting, etc.)

Login

Register

Admin Panel

${product.name}