Skip to content

CodeWebMobile-AI/project-analytics-dashboard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

92 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

# Project Analytics Dashboard

A Laravel-React dashboard designed to visualize key project metrics and provide actionable insights for data-driven decision-making. Leverage powerful data visualization techniques to monitor project progress, identify potential bottlenecks, and optimize performance.

## Key Features

*   **Real-time Data Visualization:**  Displays key project metrics through interactive charts and graphs, providing up-to-date insights.
*   **Customizable Dashboards:** Allows users to create personalized dashboards tailored to their specific project needs and priorities.
*   **Key Performance Indicator (KPI) Tracking:**  Monitors and tracks critical KPIs, enabling users to identify areas for improvement.
*   **Progress Monitoring:** Visualizes project progress against planned timelines and milestones.
*   **Data Filtering and Sorting:** Enables users to filter and sort data based on various criteria to drill down into specific areas of interest.
*   **Alerting and Notifications:**  Provides alerts and notifications for critical events or deviations from expected performance.
*   **User Authentication and Authorization:** Securely manages user access and permissions.
*   **Reporting and Exporting:**  Generates reports and exports data in various formats for sharing and analysis.

## Tech Stack

*   **Backend:** Laravel (PHP Framework)
*   **Frontend:** React (JavaScript Library)
*   **Language:** TypeScript
*   **Styling:** Tailwind CSS

## Prerequisites

Before you begin, ensure you have the following installed:

*   **PHP:**  Version 8.1 or higher
*   **Composer:**  Latest version
*   **Node.js:** Version 16 or higher
*   **npm:** Latest version (Comes with Node.js)
*   **MySQL:** Version 5.7 or higher (or equivalent database system configured for Laravel)

## Installation

1.  **Clone the repository:**

    ```bash
    git clone <repository_url>
    cd project-analytics-dashboard
    ```

2.  **Install Laravel dependencies:**

    ```bash
    cd backend
    composer install
    ```

3.  **Configure the database:**

    *   Copy the `.env.example` file to `.env`:

        ```bash
        cp .env.example .env
        ```

    *   Edit the `.env` file and configure your database connection settings:

        ```env
        DB_CONNECTION=mysql
        DB_HOST=127.0.0.1
        DB_PORT=3306
        DB_DATABASE=project_analytics
        DB_USERNAME=your_username
        DB_PASSWORD=your_password
        ```

4.  **Generate application key:**

    ```bash
    php artisan key:generate
    ```

5.  **Run database migrations and seeders:**

    ```bash
    php artisan migrate --seed
    ```

6.  **Install React dependencies:**

    ```bash
    cd ../frontend
    npm install
    ```

## Development Setup

1.  **Start the Laravel development server:**

    ```bash
    cd backend
    php artisan serve
    ```

    This will typically start the server at `http://127.0.0.1:8000`.

2.  **Start the React development server:**

    ```bash
    cd frontend
    npm start
    ```

    This will typically start the server at `http://localhost:3000`.

3.  **Configure API URL in React:**

    In your `frontend` directory, edit the `.env` file (create one if it doesn't exist) and set the API URL:

    ```env
    REACT_APP_API_URL=http://127.0.0.1:8000/api
    ```

## Usage Examples

1.  **Access the dashboard:**

    Open your browser and navigate to `http://localhost:3000` (or the address where your React development server is running).

2.  **Login:**

    Use the credentials provided in the seeders or create a new user.

3.  **Explore the dashboards:**

    Navigate through the different dashboards to view project analytics data.  Customize the dashboards to display specific KPIs.

4.  **Interact with charts and graphs:**

    Use the interactive features of the charts and graphs to drill down into specific data points.

## API Documentation Structure

The backend API is designed using RESTful principles and follows a standard structure.

*   **Base URL:**  `http://127.0.0.1:8000/api` (or as configured in your `.env` file)
*   **Authentication:**  API routes are protected using Laravel Sanctum. You'll need to obtain an API token after logging in to access protected endpoints.

**Example Endpoints:**

*   `GET /api/projects`:  Retrieve a list of projects.
*   `GET /api/projects/{project}`: Retrieve a specific project.
*   `GET /api/projects/{project}/metrics`: Retrieve metrics for a specific project.
*   `POST /api/projects`: Create a new project.
*   `PUT /api/projects/{project}`: Update an existing project.
*   `DELETE /api/projects/{project}`: Delete a project.

**Data Format:**

The API accepts and returns data in JSON format.  Request bodies should be properly formatted JSON objects. Response bodies will contain JSON objects representing the requested data, along with appropriate HTTP status codes. Detailed API documentation can be generated using tools like OpenAPI (Swagger) which will be implemented in the future.

## Contributing Guidelines

We welcome contributions to the Project Analytics Dashboard!  Please follow these guidelines:

1.  **Fork the repository:** Create your own fork of the repository.
2.  **Create a branch:** Create a new branch for your feature or bug fix.
3.  **Make your changes:** Implement your changes, ensuring they are well-documented and tested.
4.  **Write tests:**  Include unit tests or integration tests for your changes.
5.  **Submit a pull request:**  Submit a pull request to the `main` branch.  Clearly describe the changes you have made and the reason for the changes.

Code style should adhere to PSR-12 standards for PHP and standard practices for React/TypeScript.  Pull requests will be reviewed by the maintainers.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

About

Laravel-React dashboard for project analytics. Visualize key metrics and gain insights for data-driven decisions.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors