Grocers-Store 🛒

This is a full-stack grocery store web application built using Flask, MySQL, HTML, CSS, and JavaScript. It allows users to browse products, add items to their cart, and place orders seamlessly.

✨ Features

• 🛍️ View products with pricing and unit details
  
• 🛒 Add items to the cart and manage quantity
  
• ✅ Place orders, storing them in the database
  
• 📊 Backend API with proper CORS handling for smooth frontend communication
  
• 🚀 Deployed using Render (backend) and Netlify (frontend)
  

📂 Files Overview

Backend (/backend)

• server.py → Flask server handling requests and database operations
  
• sql_connector.py → Connects to the MySQL database
  
• products_dao.py → Handles product queries from the database
  
• orders_dao.py → Manages order-related database transactions
  
• requirements.txt → Dependencies for running Flask and MySQL connection
  

Frontend (/ui)

• index.html → Landing page for the store
  
• shop.html → Displays products and order functionality
  
• script.js → Handles API requests and UI updates
  

⚙️ Requirements

• Python 3.x
  
• Flask (pip install flask flask-cors)
  
• MySQL Server (Railway-hosted)
  
• mysql-connector-python (pip install mysql-connector-python)
  
• Netlify (for frontend deployment)
  

🚀 Deployment & Uptime Monitoring

• Backend: Render → https://grocers-store.onrender.com
• Frontend: Netlify → https://grocerstore.netlify.app
• Uptime Monitoring: UptimeRobot pings the backend every 5 minutes to keep it active.

🏁 How to Run Locally

Backend Setup

1️⃣ Ensure MySQL is running with correct database schema
2️⃣ Open terminal, navigate to backend folder (cd backend/)
3️⃣ Install dependencies:

pip install -r requirements.txt

4️⃣ Run Flask server:

python server.py

5️⃣ Backend should be available at http://127.0.0.1:5000/

Frontend Setup

1️⃣ Navigate to ui folder (cd ui/)
2️⃣ Use a simple local server to preview:

npx serve .  # OR python -m http.server