Skip to content

Latest commit

 

History

History
101 lines (71 loc) · 2.86 KB

README.MD

File metadata and controls

101 lines (71 loc) · 2.86 KB
Raw

Marble-AI Assignment

Description

This project is a web application created using React and Refine, and various other npm packages to implement a pixel-perfect UI design based on a provided Figma template. The application utilizes several npm packages for UI components, data visualization, and state management. It includes features such as loading skeletons for displaying loading states, line charts for visualizing data, custom date-picker integration with LineChart, mouse-over events for displaying pop-ups, and accordions for toggling the visibility of components.

User Interface

Loading Skeleton

home-page

Dashboard

home-page

Installation

To run the application locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/Rutu-11/Marble-AI.git

  2. Navigate to the project directory:

    cd Marble-AI

  3. Install dependencies using npm:

    npm install

  4. Start the development server:

    npm run dev

  5. Open your browser and visit http://127.0.0.1:5173/ to view the application.

Dependencies

The project relies on the following npm packages:

  • @heroicons/react
  • @material-tailwind/react
  • @refinedev/cli
  • @refinedev/core
  • @refinedev/inferencer
  • @refinedev/kbar
  • @refinedev/react-hook-form
  • @refinedev/react-router-v6
  • @refinedev/react-table
  • @refinedev/simple-rest
  • @types/react-modal
  • react
  • react-dom
  • react-icons
  • react-loading-skeleton
  • react-modal
  • react-router-dom
  • recharts

DevDependencies

The project relies on the following npm packages:

  • tailwindcss
  • typescript
  • vite
  • daisyui
  • postcss

Usage

Once the application is running locally, you can interact with it in the following ways:

  • Navigate through different sections/pages using the provided links or navigation menus.
  • View loading skeletons while data is being fetched or processed.
  • Interact with line charts to view data trends for different time periods.
  • Hover over elements to see pop-ups or tooltips displaying additional information.
  • Toggle the visibility of components using accordions or other UI controls.

Deployment

The application is deployed and accessible at the following link: Deployed App

Contributing

Contributions to the project are welcome. If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the GitHub repository.