Explore the key features and interface of Price Comparison Web through these interactive screenshots.
Intelligent search interface with real-time product results, advanced filtering options, and category-based browsing for easy product discovery
Side-by-side price comparison across multiple e-commerce platforms with discount calculations, savings highlights, and direct purchase links
Fully optimized mobile experience with touch-friendly interface, fast loading times, and seamless shopping experience across all devices
A modern, responsive web application that helps users compare product prices across multiple e-commerce platforms. Built with React and Node.js, this tool provides real-time price comparisons to help users find the best deals.
Clone the repository
git clone <repository-url>
cd price-comparison-web
Install Backend Dependencies
cd backend
npm install
Install Frontend Dependencies
cd ../frontend
npm install
Start the Development Servers
Backend (Terminal 1):
cd backend
npm run dev
# Server runs on http://localhost:10000
Frontend (Terminal 2):
cd frontend
npm start
# App runs on http://localhost:3000
Open your browser and navigate to http://localhost:3000
price-comparison-web/
āāā backend/ # Node.js/Express API server
ā āāā index.js # Main server file
ā āāā package.json # Backend dependencies
ā āāā vercel.json # Deployment configuration
ā āāā flipkartDemo.html # Demo file
āāā frontend/ # React application
ā āāā public/ # Static files
ā āāā src/
ā ā āāā component/ # Reusable React components
ā ā ā āāā navbar/ # Navigation component
ā ā ā āāā itemContainer/ # Product display
ā ā ā āāā searchBox/ # Search functionality
ā ā ā āāā loader/ # Loading indicators
ā ā ā āāā paginationBox/ # Page navigation
ā ā ā āāā footer/ # Footer component
ā ā ā āāā ... # Other components
ā ā āāā assets/ # Images and static assets
ā ā āāā style/ # CSS stylesheets
ā ā āāā App.js # Main React component
ā ā āāā index.js # React entry point
ā āāā package.json # Frontend dependencies
ā āāā README.md # React-specific documentation
āāā README.md # Project documentation
https://api-comparison.bhemu.me/http://localhost:10000/GET /?search={query}&page={page}
Parameters:
search (required): Search query stringpage (optional): Page number for pagination (default: 1)Response:
{
"data": [
{
"id": "product_id",
"title": "Product Name",
"source_price": "999",
"source_mrp": "1299",
"discount": "23",
"image": "image_url",
"offers": ["offer1", "offer2"],
"source_icon": "retailer_logo_url",
"source_name": "Retailer Name"
}
]
}
GET /product/{productId}
Parameters:
productId (required): Unique product identifierResponse:
{
"status": 200,
"productUrl": "https://retailer.com/product-url"
}
Navbar - Navigation bar with search functionalityItemContainer - Individual product card displaySearchBox - Main search interface for homepagePaginationBox - Navigation between result pagesLoader - Loading animation during API callsLoadingDialog - Modal loading indicatorEmptyCart - No results found stateShowMsg - Toast notifications and messagesFootBar - Application footercd frontend
npm run build
# Deploy to Vercel or your preferred platform
The backend is configured for Vercel deployment with the included vercel.json file.
Update the API base URL in frontend/src/App.js:
const apiBaseUrl = "your-api-endpoint/";
Update the allowlist in backend/index.js for your domains:
const allowlist = ["https://your-domain.com/", "http://localhost:3000/"];
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)Adarsh Suman
ā If you found this project helpful, please give it a star!