social_sense

Deployed link - https://social-sense-pi.vercel.app/

Description

This project is a React-based dashboard application using Next.js, styled-components, Tailwind CSS, and Chart.js. It provides a modular structure with components for data visualization, theme customization, and navigation.

Technologies Used

1. React
2. Next.js
3. Tailwind CSS
4. Chart.js
5. ShadCN

Features

1. Dynamic Data Visualization: Utilizes Chart.js for displaying charts like line charts and doughnut charts.

2. Theme Customization: Allows users to choose from solid colors and gradient backgrounds to customize the dashboard's appearance.

3. Responsive Layout: Built with Tailwind CSS for responsive and mobile-first design.

4. Modular Components: Includes reusable components such as headers, sidebar navigation, and content sections.

   Usage

Navigation

1. Home Page:

• Upon starting the application, you will land on the Home Page (/ route).
• The Home Page displays a list of navigation links to different frames or sections of the dashboard.

2. Frames Navigation:

• Click on the "Frame 1" button to navigate to Frame 1 (/frame1 route).
• Click on the "Frame 2" button to navigate to Frame 2 (/frame2 route). #Theme Customization

1. Theme Selector:

• On each frame, locate the theme selector component.
• Solid Colors: Click on a solid color box to apply it as the background theme.
• Gradient Backgrounds: Click on a gradient box to apply it as the background theme.

  Dashboard Components

1. Frame 1:

• Frame 1 (/frame1) showcases specific components or data relevant to that frame's purpose. Example components could include cards, data tables, or specific visualizations.
• Frame 2: Frame 2 (/frame2) displays a different set of components or data. It may include charts (like line charts and doughnut charts), transaction sections, and other dashboard elements.

  Responsive Design

• The dashboard is designed with responsiveness in mind, adapting to various screen sizes and devices.
• Ensure to test the application on different screen resolutions and mobile devices to experience the responsive behavior.

  Interaction

• Interact with charts and components to explore data visualizations and insights provided by the dashboard.
• Use navigation elements such as the sidebar and header components to move between different sections of the dashboard.

  overView