Project Progress Tracker

A comprehensive web application for tracking, managing, and sharing project progress. This application enables users to create and manage projects, update progress percentages, and share project status with external stakeholders through secure links.

Features

• User Authentication: Secure login system with role-based access control
• Dashboard: Visual representation of all projects with progress bars
• Project Management: Create, edit, and delete projects with detailed information
• Role-Based Access Control: Different permissions for Super Admin, Admin, and Guest users
• Share Projects: Generate secure links with password protection to share with external stakeholders
• Responsive Design: Works well on desktop and mobile devices

User Roles

1. Super Admin:

   • Manage all projects, users, and activities
   • Define user roles and permissions

2. Admin:

   • Create, edit, and delete projects
   • Update completion percentages
   • Generate private links and passwords for guests

3. Guest:

   • View projects via a private link and password
   • Cannot make any modifications

Tech Stack

Frontend

• React.js
• React Router for navigation
• React Bootstrap for UI components
• Formik and Yup for form management and validation
• Axios for API calls

Backend

• Node.js with Express.js
• PostgreSQL for database
• JWT for authentication
• Bcrypt for password encryption

Deployment

• Docker for containerization
• Nginx for server management
• Linode for hosting

Prerequisites

Before running the application, make sure you have the following installed:

• Node.js (v14 or higher)
• npm or yarn
• PostgreSQL (v12 or higher)

Installation and Setup

Clone the repository

git clone <your-repo-url>
cd ProjectProgressTracker

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Install dependencies:

npm install

3. Create a PostgreSQL database:

createdb project_tracker

4. Configure environment variables:

   • Rename .env.example to .env (or create a new .env file)
   • Update the database connection details and JWT secret

5. Initialize the database:

psql -d project_tracker -f src/config/init.sql

6. Start the backend server:

npm run dev

Frontend Setup

1. Open a new terminal and navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Start the frontend development server:

npm start

Default Admin Account

The application comes with a default super admin account for initial setup:

• Email: admin@projecttracker.com
• Password: password123

Important: Change the default password immediately after the first login for security reasons.

Docker Deployment (Production)

For production deployment using Docker:

1. Build the Docker images:

docker-compose build

2. Start the containers:

docker-compose up -d

3. Access the application at http://localhost:80

API Documentation

The backend API is structured around the following endpoints:

Authentication

• POST /api/auth/register - Register a new user
• POST /api/auth/login - Authenticate a user

Projects

• GET /api/projects - Get all projects (based on user role)
• GET /api/projects/:id - Get a specific project
• POST /api/projects - Create a new project
• PUT /api/projects/:id - Update a project
• DELETE /api/projects/:id - Delete a project
• POST /api/projects/:id/share - Generate a share link
• GET /api/projects/shared/:shareId - Access a shared project
• POST /api/projects/shared/:shareId/verify - Verify share password

Users

• GET /api/users - Get all users (Super Admin only)
• GET /api/users/:id - Get a specific user
• POST /api/users - Create a new user (Super Admin only)
• PUT /api/users/:id - Update a user
• DELETE /api/users/:id - Delete a user (Super Admin only)

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

• React Bootstrap for UI components
• JWT for secure authentication
• PostgreSQL for reliable data storage