Online Project Management Application

This project was developed as part of an assignment for Techprimelab, aiming to demonstrate my full-stack development skills. The purpose was to create a comprehensive mini project that showcases my ability to build a fully functional web application with both frontend and backend components. The project includes critical features such as user authentication, project management, real-time status updates, and a dynamic dashboard, all of which are essential in a professional development environment.

Built with :

Get Started

1. Clone the Repository

   git clone https://github.com/sammy429b/TeachPrimeLab.git
   cd TeachPrimeLab

2. Install Dependencies

   Frontend

   cd client
   npm install

   Backend

   cd ../server
   npm install

3. Set Up Environment Variables

   Create .env files in both the client and server directories with the necessary environment variables. Refer .env.example files for required variables.

4. Start the Application

   Backend

   cd server
   npm run dev

   Frontend

   cd ../client
   npm run dev

How I Did It?

1. Login Page :
   I built a secure login form using React Hook Form for validation and Axios for authentication requests. JWT was implemented to manage user sessions securely, ensuring only authenticated users can access the app.

2. Project Page:
   A form was created to capture project details, including dropdowns for options and a date-picker for dates. Data validation was enforced on both the frontend and backend to maintain data integrity, with Axios handling form submission.

3. Project Listing Page:
   I developed a dynamic table to display project records with features like search, sorting, and pagination. React's state management was used for handling these interactions, while Axios fetched data from the backend.

4. Status Updates:
   Buttons for status updates (Running, Closed, Cancelled) were added to the project listing. These trigger API calls to update the status in the database, and changes are reflected immediately in the UI without a page reload.

5. Dashboard Page:
   The dashboard was created using HighchartsReact to display department-wise project success rates and counters for different project statuses. A single API call was used to fetch this data, optimizing performance and minimizing network requests.

Future Enhancements

1. Role-Based Access Control (RBAC):
   Implementing RBAC to allow different levels of access and permissions based on user roles (e.g., Admin, Manager, Viewer).

2. Real-Time Notifications:
   Adding real-time notifications using WebSockets to inform users about project status updates or deadlines.

3. Improved Error Handling:
   Enhancing the application with more robust error handling and user-friendly messages for a better user experience.

4. UI/UX Improvements:
   Refining the UI/UX based on user feedback, possibly incorporating animations and transitions for a smoother user interface.

5. Mobile Responsiveness:
   Further optimizing the application for mobile devices, ensuring that all features are accessible and user-friendly on smaller screens.