A full-stack application built with Python (Flask) and Vue.js, which scrapes product card data from the Croma Televisions & Accessories page, stores the structured data in Redis, and renders it dynamically on the frontend.
🚀 This project was developed as part of a real-world full-stack engineering challenge.
- Backend: Python, Flask, Redis, BeautifulSoup, requests
- Frontend: Vue.js, Axios, CSS Grid
- Others: Flask-CORS, Redis CLI, npm, Docker (optional)
- Scrapes
<head>and header HTML elements, along with all product cards from Croma - Stores cleaned product data as JSON in Redis (
scraped_content) - Flask API exposes two endpoints:
/scraped-content: Serves all scraped data/products: Serves product list only
- Vue.js SPA fetches and displays product cards dynamically
- Reusable Vue components and responsive layout with CSS Grid
- Python 3.8+
- Node.js 14+
- Redis server running on
localhost:6379(use Docker or local installation)
# Create and activate virtual environment
python -m venv venv
source venv/bin/activate # Linux/macOS
venv\Scripts\activate # Windows
# Navigate and install dependencies
cd backend
pip install -r requirements.txt
# Run the scraper to populate Redis
python scraper.py
# Start the Flask API
python app.py# In a new terminal
cd frontend
# Install dependencies
npm install
# Run the development server
npm run serve.
├── backend/
│ ├── app.py # Flask API
│ ├── scraper.py # BeautifulSoup scraper
│ └── requirements.txt
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ │ └── Product.vue
│ │ └── App.vue
│ └── package.json
└── README.md
- Implemented
scraper.pyto extract<head>and product details - Stored JSON data in Redis with proper serialization
- Built
/scraped-contentand/productsendpoints using Flask + CORS - Created Vue frontend with dynamic product grid
- Used Axios and reusable components for rendering
JSON stored in Redis under key
scraped_content:
{
"head": "<title>Televisions - Croma</title>",
"header": "<div class='bs-header'>...</div>",
"products": [
{
"id": "12345",
"title": "Samsung 43\" UHD Smart TV",
"link": "https://www.croma.com/...",
"price": "₹34,999",
"original_price": "₹42,000",
"discount": "16%",
"tags": ["Best Seller", "4K"]
},
...
]
}Aman Kumar Bind
📧 amanbind898@gmail.com
🔗 LinkedIn | GitHub
This project is licensed under the MIT License.