OnTrack is a web application designed to streamline enterprise project management across various industries. This application addresses the need for reliable digital tools to replace traditional paper-based or verbal project planning methods, often leading to conflicts and miscommunications. OnTrack aims to provide tools that facilitate project management and synchronize the efforts of all team members.
- Intuitive User Interface: designed to be user-friendly and visually appealing, ensuring ease of use.
- Project Management: tools to plan, manage and monitor projects effectively.
- Responsive Design: utilizes the React framework to create responsive user interfaces that adapt to different screen sizes and devices.
-
Login Page: secure login for users.
-
Registration Page: user registration with necessary details.
The "My Tasks" page is a dedicated section within the application where users can view all the tasks assigned to them across all projects they are a part of.
-
Editing: modify tasks as needed.
-
Gantt Chart: visualize task schedules and dependencies.
-
Drag and Drop: organize tasks by status.
-
Three Dots Menu: access additional options.
- Edit: modify task details.
- Delete: remove tasks.
-
Edit Projects: modify existing projects.
- Project Name: change the project name.
- Members: manage project members.
-
Add Project: create new projects.
- Project Name: set a project title.
- Members: add team members.
-
Gantt Chart: track project timelines and progress.
-
Progress Status: monitor the current status of projects.
-
Three Dots Menu: access additional options.
- Edit: modify project details.
- Delete: remove projects.
When a user clicks on a specific project from the project list or any other navigation element, the application navigates to a project-specific task dashboard.
-
Change First Name: update your first name.
-
Change Last Name: update your last name.
-
Change Password: update your password.
| Technology | Application in the Project |
|---|---|
| axios | Used to send HTTP requests to external APIs, enabling communication with the server. |
| dayjs | Used for date and time manipulation. |
| DevExtreme React | Used to create Gantt charts, enabling visualization of schedules and task dependencies. |
| formik | Manages forms, handles state, validation, and submission in the application. |
| js-cookie | Allows managing user sessions and storing data in browser cookies. |
| mui | Provides a set of UI components, allowing the creation of responsive and modern user interfaces. |
| react | Used to create user interfaces for the OnTrack application as the main JavaScript library. |
| react-beautiful-dnd | Implements the "drag and drop" function, used for task management and reordering elements. |
| react-router-dom | Manages navigation and renders different components based on the URL path in the application. |
| yup | Used for form and data validation in combination with Formik, ensuring the correctness of input information. |
| zustand | Manages global state in the OnTrack application, offering a simple and scalable way to store and manage state. |
To run the application locally, follow these steps:
-
Clone the repository:
git clone https://github.com/yourusername/OnTrack.Frontend.React.git cd OnTrack.Frontend.React -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:3000.
You can also access the application via the following link: OnTrack Web Application
Create your own account or use the following login credentials:
- Email: test@test.com
- Password: Test1234.
This thesis project explores software engineering topics such as developing user-friendly, efficient, and easy-to-use web applications. It aims to provide theoretical and practical knowledge in creating project management software, contributing to the academic and professional growth of the authors.
This project is licensed under the MIT License.