Skip to content

Latest commit

 

History

History
130 lines (88 loc) · 3.62 KB

README.md

File metadata and controls

130 lines (88 loc) · 3.62 KB

MERN Stack Coding Challenge

Overview

This coding challenge involves creating a full-stack MERN (MongoDB, Express, React, Node.js) application that interacts with a third-party API to fetch transaction data, initializes a database, and provides several APIs for data manipulation and visualization. The frontend will use these APIs to display the data in tables and charts.

Project Structure

Backend

Data Source

  • Third Party API URL: https://s3.amazonaws.com/roxiler.com/product_transaction.json
  • Request Method: GET
  • Response Format: JSON

API Endpoints

  1. Initialize Database

    • Endpoint: /api/init
    • Method: GET
    • Description: Fetches JSON data from the third-party API and initializes the database with seed data.

  2. List Transactions

    • Endpoint: /api/transactions
    • Method: GET
    • Description: Lists all transactions with support for search and pagination.
    • Query Parameters:
      • month (required)
      • search (optional)
      • page (default: 1)
      • perPage (default: 10)

  3. Statistics

    • Endpoint: /api/statistics
    • Method: GET
    • Description: Provides statistics for the selected month.
    • Query Parameters:
      • month (required)

  4. Bar Chart Data

    • Endpoint: /api/barchart
    • Method: GET
    • Description: Provides data for a bar chart based on price ranges for the selected month.
    • Query Parameters:
      • month (required)

  5. Pie Chart Data

    • Endpoint: /api/piechart
    • Method: GET
    • Description: Provides data for a pie chart with unique categories and item counts for the selected month.
    • Query Parameters:
      • month (required)

  6. Combined Data

    • Endpoint: /api/combined
    • Method: GET
    • Description: Fetches and combines data from the statistics, bar chart, and pie chart APIs.
    • Query Parameters:
      • month (required)

Frontend

Features

  1. Transactions Table

    • Lists transactions based on the selected month.
    • Includes a search box to filter transactions by title, description, or price.
    • Supports pagination with "Next" and "Previous" buttons.

  2. Transactions Statistics

    • Displays total sale amount, total sold items, and total unsold items for the selected month.

  3. Transactions Bar Chart

    • Displays a bar chart with price ranges and the number of items in each range for the selected month.

  4. Transactions Pie Chart

    • Displays a pie chart with unique categories and item counts for the selected month.

User Interface

  • Month Dropdown: Allows users to select a month from January to December.
  • Default Selection: March is selected by default.
  • Search Box: Filters transactions based on the input text.
  • Pagination: "Next" and "Previous" buttons navigate through pages of transactions.

Setup Instructions

Prerequisites

  • Node.js and npm installed on your system
  • MongoDB installed and running

Backend Setup

  1. Clone the repository:

    git clone https://github.com/ShivanshTiwari01/Roxiler-Systems-Coding-Challenge
cd  Roxiler-Systems-Coding-Challenge/backend

  2. Install dependencies

    npm install

  3. Run the server

    npm start

Frontend Setup

  1. Clone the repository:

    git clone https://github.com/ShivanshTiwari01/Roxiler-Systems-Coding-Challenge
cd  Roxiler-Systems-Coding-Challenge/frontend

  2. Install dependencies

    npm install

  3. Run the server

    npm start

License

This project is licensed under the MIT License. See the LICENSE file for more details.