Rarle Saas - Project Management Tool

It's a tool to helps you to take control of your projects and teams that will help you to complete everything on time and achieve your goals. You can coordinate team tasks so everyone knows who's doing what.

Installation Instructions

Softwares required

Download and install the following softwares

Setup server

Download and unzip the file from codecanyon.

First of all, make sure you have already installed Node.js on your machine. After that, do the following action.

  • Navigate inside the directory cd Server
  • Install all required packages npm install
  • Import database from the database folder
  • Set the sensitive information in .env file Environment setting here
  • Start server npm start
  • That's it
  • Now open http://localhost:3000

Setup client

Open another command line and do the following action.

Video guide

Here is video for more clearification.



Environment Settings (Server Module)

path: .env

Here we specify secret credentials which will be different for local and server


For start. You can ignore MAILGUN_DOMAIN and MAILGUN_API_KEY for now.

DB_HOST=YOUR_DB_HOST //localhost




MAILGUN_DOMAIN=YOUR_MAILGUN_DOMAIN // Mailgun for sending emails






Environment Settings (Client Module)

path: src/environments/environment.ts

Here we specify secret credentials which will be different for local and server


For start. You can ignore google_client_id and filestack_api_key for now.

export const environment = {

production: false,

title: "YOUR_APP_NAME",

url: "http://localhost:3000/", // YOUR_SERVER_URL

google_client_id: "", // google_client_id for google login

filestack_api_key: "", // filestack_api_key for file upload


Directory Structure

Root Directory Structure

  • Codecanyon folder
    • Client
    • Database
    • Documentation
    • Server

Server Directory Structure

  • Server
    • app
      • controller
      • include
      • model
      • routes
        • approutes.js
      • .env
      • .env_example
      • .gitignore
      • package.json
      • server.js

Client Directory Structure

  • Client
    • src
      • app
        • config
        • content
        • core
        • provider
        • app-routing.module.ts
        • app.component.html
        • app.component.ts
        • app.module.ts
      • assets
      • environments
        • environment.ts
      • index.html
      • main.ts
      • manifest.json
      • polyfills.ts
      • styles.scss
      • tsconfig.spec.json
      • typings.d.ts
    • .angular-cli.json
    • .editorconfig
    • .gitignore
    • angular.json
    • karma.conf.js
    • ngsw-config.json
    • package.json
    • protractor.conf.js
    • tsconfig.json
    • tslint.json



  1. Create and manage your projects
  2. Archive project

Project assignees

  1. Assign the project to your team member
  2. The team member can see everything in project
  3. Assign the project to your client
  4. The client can only see what you choose

Project activity

View all progress and activity for an entire project

Message board

Post project detail, credentials, files & docs, announcements, questions, ideas, progress updates, etc.

Message board discussion

Place where team members can provide input.

Milestones and Tasks

Make lists of tasks that need to get done, assign to people set due dates, and discuss.

Task list view

See any list of tasks on a ListView.

Task calendar view

See any list of tasks on a Calendar to get a clear view of when work is due.

Task assignees

Give the task a clear owner, so everyone knows who’s responsible.

Due dates and times

Specify the date and time something is due to everyone’s working off the same deadline—no matter their time zone.


Add files from your Device, Google Drive, Instagram, Facebook, Web Search to any task, message board, or discussion.

Task Discussion

Place where team members can provide input.

Company activity

View all progress and activity for an entire company. Manage everything in one workspace. It makes activity simpler instead of having to always request progress refreshes

Adding & managing team members

  1. Create Team members
  2. Team members see everything in the project.
  3. They will be notified via email.
  4. View the whole activity of team member
  5. Manage project for the team member
  6. View task of team member

Adding & managing clients

  1. Create Client
  2. The client only see what you choose
  3. They will be notified via email
  4. See the whole activity of client
  5. Manage project for the client

Progressive web apps (PWA)

Progressive web apps are web applications built with technologies that make them behave like native apps. ... Also, unlike native apps, no installation is required, but they are faster than typical web apps.



Thanks again for purchasing this application. We are trying to add and improve new features regularly. Hopefully, you'll enjoy using the app. If you have any queries or suggestions, please contact us.

Best wishes Rarle Team