SDC Web

A React web application for browsing grocery products, comparing prices, and viewing price trends across different stores and grocers.

Features

• Browse products by hierarchical categories.
• View detailed price history with interactive charts.
• Search products across categories.
• Compare prices from multiple stores and grocers.
• Responsive design with Material-UI components.

Tech Stack

• React 18 with TypeScript.
• Vite for fast development and optimized builds.
• Material-UI (MUI) v7 for UI components.
• Redux Toolkit Query for API state management and caching.
• React Router v7 for client-side routing.
• Recharts for price trend visualization.

Prerequisites

• Node.js (version 18 or higher recommended).
• Backend API server running at /api (or configured proxy).

Getting Started

Installation

npm install

Development

npm run dev

The dev server runs with --host flag to allow external connections.

Building for Production

npm run build

This runs TypeScript compilation followed by Vite build.

Preview Production Build

npm run preview

Available Scripts

• npm run dev - Start development server.
• npm run build - Build for production.
• npm run lint - Run ESLint.
• npm run lint:fix - Run ESLint with auto-fix.
• npm run preview - Preview production build.
• npm run docker:build - Build Docker image.

Docker

The application includes Docker support for containerized deployments. See docker-compose.yml for orchestration setup.

npm run docker:build

Project Structure

src/
├── api/          # API layer (RTK Query + direct fetch functions)
├── components/   # Reusable UI components
├── redux/        # Redux store and RTK Query API definitions
├── views/        # Page-level components
└── App.tsx       # Main application with routing

Development Guide

For detailed development information, architecture decisions, and coding standards, see CLAUDE.md.

Testing

Playwright is configured for end-to-end testing. Test files and configuration will be added as the project matures.

License

Private project.