Data Analyser

Project Overview

Data Analyser is a comprehensive project designed to analyze product transaction data. It fetches transaction data from an external API, processes it, and provides various statistics, visualizations, and search functionalities. The project includes features such as listing transactions, filtering by month and search query, pagination, and generating charts (bar and pie) for visual representation of data.

Tech Stack

Frontend

• React.js
• Chart.js
• HTML
• CSS

Backend

• Node.js
• Express.js
• Node-fetch

File Structure

.
├── backend
│   ├── server.js
│   └── ...
├── frontend
│   ├── public
│   │   └── index.html
│   ├── src
│   │   ├── components
│   │   │   ├── Header.js
│   │   │   ├── SearchBox.js
│   │   │   ├── TransactionsTable.js
│   │   │   ├── StatsTable.js
│   │   │   ├── BarGraph.js
│   │   │   └── PieChart.js
│   │   ├── App.js
│   │   ├── index.js
│   │   └── ...
│   └── package.json
├── README.md
└── package.json

Getting Started

Prerequisites

• Node.js installed on your local machine
• npm or yarn package manager

Installation

git clone https://github.com/your-username/data-analyser.git
cd data-analyser

Running the Backend

cd backend
npm install
node server.js

Running the Frontend

cd frontend
npm install
npm start

Demo and Screenshots

Below are some screenshots and a brief demo of the Data Analyser application:

Recording.2024-07-28.145124.mp4

How It Works

Backend

The backend is built using Node.js and Express.js. It fetches transaction data from an external API, processes it, and provides several endpoints:

• /api/transactions: Lists transactions with search and pagination functionality.
• /api/transactions/stats: Provides transaction statistics for a specific month.
• /api/transactions/price-range: Provides price range statistics for transactions in a specific month.
• /api/pie-chart: Provides category-wise transaction counts for a specific month.

Frontend

The frontend is built using React.js. It provides an interactive user interface to visualize transaction data. The main components are:

• Header.js: Displays the header of the application.
• SearchBox.js: Provides a search box for filtering transactions.
• TransactionsTable.js: Displays the list of transactions with pagination.
• StatsTable.js: Displays statistics for transactions in a specific month.
• BarGraph.js: Displays a bar graph of price ranges.
• PieChart.js: Displays a pie chart of category-wise transaction counts.