Jason-nzd / supermarket-prices-nextjs

This website tracks the cost of food from the major New Zealand supermarkets.

NZ Supermarket Price History Website

This is a static next.js website that pulls product data from Azure CosmosDB and displays them in a responsive grid.

• Long-term price history for each product is displayed using chart.js line charts.
• Built with react and next.js using fully static html export.
• Client-side data fetching from an API is used for search functionality.
• Styling is handled with tailwind css.

Quick Setup

With node.js is installed, clone this repo, and then run npm install to install dependencies.

The website comes with some sample data built-in and can be launched as-is with npm run dev.

Database Mode Setup with .env

For use with Azure CosmosDB, a read-only or read-write connection string must be set as an environment variable COSMOS_CONSTRING. Database and container names are also set here.

Create a .env file with the following variables set:

COSMOS_CONSTRING=<your-cosmosdb-connection-string>
COSMOS_DBNAME=<your-database-name>
COSMOS_CONTAINER=<your-container-name>

Example database document with dates in UTC format:

{
    id: '12345678',
    name: "Sample Milk Chocolate Bucket",
    currentPrice: 15,
    size: '640g',
    sourceSite: 'supermarket.co.nz',
    priceHistory: [
        { 
            date: '2023-03-02T00:00:00Z',
            price: 13 
        },
        { 
            date: '2023-03-13T00:00:00Z', 
            price: 15 
        },
    ],
    category: ['chocolate', 'chocolate-packs'],
    lastUpdated: '2023-03-13T00:00:00Z',
    lastChecked: '2023-04-22T00:00:00Z',
    unitPrice: 23.44,
    unitName: 'kg',
    originalUnitQuantity: 640,
}

Usage

• npm run dev - for testing as a dynamic website
• npm run build - to build a fully static site into the /out directory
• npm run start - to host the built static site from /out
• npx cypress run - run cypress headless testing

Static Website Demo

https://kiwiprice.xyz