# 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.CodeWebMobile-AI/project-analytics-dashboard
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|