Skip to content

This repository contains a full-stack application designed to explore data from ElasticSearch🧐indices and visualize it using charts and graphs. The backend is built using Node.js and the frontend is powered🚀 by React.

Notifications You must be signed in to change notification settings

Jagoda11/Elastic-Vision

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

95 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🚀 Motherbrain Full Stack Challenge

Open Issues Last Commit Build Status Build Status

📝 Project Overview

This repository contains a full-stack application designed to explore data from ElasticSearch indices and visualize it using charts and graphs. The backend is built using Node.js and the frontend is powered by React.

🛠️ Getting Started

Prerequisites

  • 🐳 Docker installed (recommended)
  • Alternatively, ensure 🌍 Node.js and 📦 Yarn are installed locally.

Running the Project

Using Docker (Recommended)

  1. 📂 Clone or fork this repository.

  2. Navigate to the root folder.

  3. Run the following command to start the project:

    docker compose up
  4. 🖥️ Open your browser and navigate to http://localhost:3000 to view the application.

Using Node.js and Yarn (Alternative)

  1. 📂 Clone or fork this repository.

  2. Navigate to the backend folder and run:

    yarn start
  3. In a separate terminal, navigate to the frontend folder and run:

    yarn start
  4. 🖥️ Open your browser and navigate to http://localhost:3000 to view the application.

📊 Project Details

Backend

  • 🛠️ Node.js backend with a connection to an ElasticSearch node.
  • 🗃️ Two pre-populated indices:
  • Endpoint implementations located in backend/src/index.js.
  • Use yarn start to start the backend in development mode.
  • Additional scripts:
    • yarn test - Run tests using Jest.
    • yarn format - Automatically format the codebase using Prettier.

Frontend

  • 🎨 React-based frontend using various charting libraries:
    • @mui/x-charts for interactive charts.
    • react-chartjs-2 for advanced chart customization.
  • Displays two interactive tables:
    • OrgTable for organizations data, with built-in filters and menus for easy data manipulation.
    • FundingTable for funding data, with similar built-in features for filtering and sorting.
  • Includes two interactive charts:
    • A pie chart (FundingChart) for funding data, allowing you to toggle company visibility by clicking on the legend.
    • A pillar chart (CompanySizeChart) for organizations data.
  • Predefined npm scripts to streamline development.
  • Use yarn start to start the production server.
  • Additional scripts:
    • yarn build - Build the production version of the application.
    • yarn test - Run tests using Jest.
    • yarn format - Automatically format the codebase using Prettier.

Dashboard Screenshots

Table View: Shows data tables with interactive filters and menus.

Dashboard Table

Pie Chart View: Demonstrates how company visibility can be toggled on and off.

Funding Pie Chart

✅ Continuous Integration

The project has a CI pipeline using GitHub Actions. The workflow includes:

  1. 📂 Checking out the code.
  2. 📦 Installing dependencies and running tests for both frontend and backend.
  3. 🎨 Running Prettier for code formatting checks.
  4. 🐳 Building and running Docker services.

Dependency Update Workflow

To keep dependencies up to date and secure, the project includes a separate workflow named npm-update.yml that runs automatically:

  • Scheduled Updates: This workflow runs daily at 2 AM UTC to check for the latest updates of npm dependencies in both the frontend and backend projects.

  • Manual Trigger: You can also manually trigger the workflow if needed.

  • Dependency Management:

    • 🗑️ Removes existing yarn.lock files to ensure a fresh start.
    • ⬆️ Updates package.json files with the latest versions using npm-check-updates.
    • 📦 Re-generates yarn.lock files by reinstalling dependencies with the updated versions.
  • Vulnerability Scanning: Integrates with Debricked for automated vulnerability scanning of updated dependencies.

  • Automated Commit and Push: If updates are found, the workflow commits the changes and pushes them to the main branch automatically.

The workflow ensures that your project dependencies are always up to date and secure, reducing the manual overhead of managing updates.

🤝 Contribution Guidelines

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/your-feature).
  3. Commit your changes (git commit -am 'Add new feature').
  4. Push to the branch (git push origin feature/your-feature).
  5. Create a Pull Request.

📜 License

This project is licensed under the MIT License.

About

This repository contains a full-stack application designed to explore data from ElasticSearch🧐indices and visualize it using charts and graphs. The backend is built using Node.js and the frontend is powered🚀 by React.

Topics

Resources

Stars

Watchers

Forks

Sponsor this project