Analytics Dashboard

A React dashboard application built with TypeScript and Tailwind CSS, providing user authentication and interactive analytics.

Features

• User Authentication: Secure login to access the dashboard.
• Responsive Design: Optimized for devices of all sizes.
• Data Visualization: Interactive charts and graphs using Recharts.

Demo

• Live Deployment: [Rainforest Analytics Dashboard](https://rainforestanalytics.netlify.app)
• GitHub Repository: [Analytics Dashboard Repository](https://github.com/Myches/AnalyticsDashboard.git)

Run the Project Locally

Prerequisites

• Node.js (v16 or later)
• npm or yarn package manager

Steps to Run

git clone https://github.com/Myches/AnalyticsDashboard.git
cd AnalyticsDashboard
npm install
# or
yarn install
npm run dev
# or
yarn run dev

Deployment

The application is deployed on Netlify using the "Import from GitHub" feature. Follow the steps below to replicate the deployment process:

1. Log in to Netlify: Go to Netlify and log in.
2. Import Repository: Click on "Add New Site" > "Import an Existing Project" and connect your GitHub account.
3. Select Repository: Choose AnalyticsDashboard from the list of repositories.
4. Build Settings:
   • Build command: npm run build
   • Publish directory: dist (or build depending on your bundler setup)
5. Deploy: Click "Deploy Site," and Netlify will automatically build and host the application.

Project Organization

The project is structured into directories for easy navigation and scalability:

• public/: Static assets, including the app's favicon and images.
• src/: Main application code, including:
  • components/: Reusable UI elements like Sidebar, LoadingSpinner, ChartData, etc.
  • pages/: Views corresponding to app routes (e.g., Dashboard, Login).
  • hooks/: Custom React hooks for reusable fetching logic (e.g., API fetching).
  • layouts/: Shared layouts for pages (e.g., main layout).
  • api/: API calls and business logic (e.g., authentication service).
  • types/: TypeScript definitions for consistent data modeling.

Key Technologies

• React.js
• TypeScript
• Axios
• React Icons
• Recharts (for charts and graphs)
• Tailwind CSS
• React Router DOM (for routing)
• React Hook Form (for form validation)
• React Loader Spinner (for loading states)
• Jest (for unit testing)