An Arabic-first, open-source Tasks Management System created for Damascus University’s third year project, Faculty of Information Technology.
- Arabic support
- Projects and tasks management
- Send email notifications to users on user creation, being added to a project, being assigned to a task, and when an assigned task’s deadline is approaching
- A client application for managing tasks and an admin panel for projects and users
- Light/Dark modes
- Simple and easy to use interfaces
Projects consist of lists, each of which contains a number of tasks. In the admin panel, you can do CRUD operations on projects and lists, and you can also manage user accounts.
There are four roles for users of Labeeb:
- Project Manager
- Organization Manager
- System Owner (only one user with this role)
On the client, normal users (employees) can view and manage their tasks.
The frontend is split into two parts:
- A client application for employees to view and manage their tasks
- An admin panel for managers to organize projects and tasks
You can view the rest of the screenshots from the
Since the project has not been released yet, you have to install it from the source code. And for now instructions will be only provided for development purposes.
Installation for Development
Download the source-code into your machine.
- Either by downloading it as a .zip and extracting it.
- Or by cloning the repository using git.
Install Node.js 16.x or later versions on your machine.
# Use an elevated shell (Administrator shell on Windows, sudo on Unix). corepack enable
Install all the workspace dependencies
# Use a shell open at the root of the source-code. yarn
Starting the development servers
You can also use the vs-code tasks.
# Start frontend (client) development server and watch for changes. yarn frontend # Start backend server for development and watch for changes. # Make sure to set up the database before doing this. yarn backend # You can also run this to check types on the frontend, since Vite emits # the browser bundle even if there are TS errors/warnings. yarn workspace client check-types
Setting up the database
Before starting the backend server, make sure that your MariaDB instance is running.
On Windows, the easiest way is to use XAMPP. Here are the details steps:
- Download XAMPP from the website provided above.
- Install it on your machine.
- Open the
xampp-control.exefile and start the MySQL and Apache services.
- Navigate to
localhost/phpmyadminin any browser.
- Log in (username: root, password: ”)
- Create a new Database called ‘Labeeb’
- Spin up the backend server using
Note: It isn’t necessary to start the Apache service unless you want to access phpmyadmin.
Although XAMPP calls it MySQL, it actualy uses MariaDB.
Developing with Visual Studio Code
Open the workspace using the
labeeb.code-workspace file from the root of the repository.
So vs-code can recognize the workspaces configuration properly.
Focusing on a workspace
Collapse all the other workspaces you don’t care about in the files panel, and only expand the one you want.
Some tasks have been setup for basic operations.
They run commands properly at the right working directories so you can take advantage of them.
Working with terminals
When starting a terminal, vs-code either opens it at the root of the workspace of the currently open file, or asks which workspace to use.
Pay attention to the working directory:
- It could be the project root
- It could be the root of the backend
- It could be the root of the frontend
- It could be the root of any other package
Yarn commands work properly here:
- It will look for the command first at the closest package.json.
- Then will look for it at the project-level package.json.
- If the command has the format
<package>:<command>, it’ll look for it at the corresponding package.
You can also use the following format to run any command at workspace root:
yarn workspace <package> <command>
This project was initialzied with
yarn berry as a monorepo that consists of three packages:
- Client: The React.js frontend
- Server: The Nest.js backend
- Core: The shared types/interfaces between frontend and backend
- Frontend: Vite, React.js, React-Query, React-Router, Zustand
- Backend: Nest.js, TypeORM
Also special thanks to Rami Sabbagh for helping out with setting up the environment, Yarn, translation, and the email service and scheduler.