Git Product home page Git Product logo

jagoda11 / motherbrain Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 1.42 MB

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.

JavaScript 98.87% HTML 1.13%
chartjs docker javascript monorepo mui-x node react fullstack backend frontend data-visualization material-ui pie-chart tables elasticsearch dashboard-development data-analysis restful-api

motherbrain's Introduction

🚀 Motherbrain Full Stack Challenge

Open Issues Last Commit 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.

🤝 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.

motherbrain's People

Contributors

dependabot[bot] avatar dnjstrom-eqt avatar elinbacklund avatar emilbroman-eqt avatar jagoda11 avatar jakubjas-eqt avatar joar avatar jompa avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.