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.
To run the application locally, follow these steps:
-
Clone the repository:
git clone https://github.com/Rutu-11/Marble-AI.git
-
Navigate to the project directory:
cd Marble-AI
-
Install dependencies using npm:
npm install
-
Start the development server:
npm run dev
-
Open your browser and visit
http://127.0.0.1:5173/
to view the application.
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
The project relies on the following npm packages:
tailwindcss
typescript
vite
daisyui
postcss
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.
The application is deployed and accessible at the following link: Deployed App
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.