Project Management Web Application

An open-source project management application built with ReactJS and Firebase
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Firebase Setup
   • Environment Variables Setup
   • PHP Setup
3. Deploy
4. Roadmap
5. Contributing Guidelines
6. License
7. Contact

About The Project

There are many great Project Management Applications available on the web, however, most require a premium subscription in order to have any sort of advanced functionality. Additionally I didn't find one that really suited my needs so I created this enhanced and custom one. Anyone can use this as a template and migrate their own projects to this.

Of course, this template won't serve all projects since your needs may be different. So I'll be adding more features in the near future. You may also suggest changes by forking this repo and creating a pull request or opening an issue.

Features

• User Authentication
• User Profiles
• Calendar and Events
• Task Assignment
• Forum
• Budget and Bill of Materials
• Finances and Cash Flow
• Notifications
• User Management
• Department Management

Built With

Front-end of the application was developed with:

• TypeScript
• ReactJS

For this specific project, NodeJS related back-ends were not possible to implement, only PHP was available. Since I didn't want to develop a PHP backend, the data infrastructure is built with Firebase Realtime Database, which is more than enough for the necessary queries and handles all user authentication!

• Firebase

However, for the user profile picture uploads, a very simple PHP API was implemented to store the images in the server.

Getting Started

This project follows the create-react-app file structure. If you would like to set up this project up and running locally for yourself, follow these steps.

Initial Setup

1. Setup fnm as NodeJS Manager -> Install
2. Install NodeJS v20

fnm install 20 # Installs NodeJS version 20

3. Setup pnpm as Package Manager -> Install

pnpm install # Installs all project dependencies

4. Setup Biome as Linter and formatter -> Install

5. Setup VS Code format on save

(Ctrl + Shift + P) / (Cmd + Shift + P) Preferences: Open User Setting (JSON)

"[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "biomejs.biome"
  },
"editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },

Local Development

1. To locally run the application

pnpm dev

1. To lint the code before creating a pull request

pnpm lint

Firebase Setup

To setup your own database, it only takes 2 min.

1. Create a Firebase Project here with a name your-application
2. Setup User and Email authentication
3. Setup Realtime Database (not Firestore)
4. Import the database template from

src/config/dbTemplate.json

5. Import the database rules from

src/config/dbRules.json

6. Repeat the above steps to create a development database In development you should use a copy of the original database. In the case something goes wrong, your original DB remains intact. So just repeat these steps for the development database and give it a project name, for example, your-application-dev.

Environment Variables Setup

To protect sensitive information on firebase API keys we take advantage of environment variables, which remain private for developers, while maintaining a public repository. These variables are stored in a .env file in the root of the repository. You can check the template used in template.env and replace all of the variables with your own. Don't forget to rename the file to only .env 😀

If you aren't using a development database, or a firebase token leave those fields empty or remove them, as they are optional for the next step.

Optional

Now let's automate things! The project is already setup to always use the development database while in development, and to use the original database when building for production (check src/config/firebase.tsx). But we also want the development database to always be up to date with the original one, in order to work with real data.

For this we take advantage of the Firebase CLI to export the data from the original database (your-application) and export it to the development database (your-application-dev)

Install Firebase CLI in your system:

npm install -g firebase-tools

You only have to do this once. Retrieve and copy the firebase CLI token from the terminal and add it to the .env variable placeholder:

firebase login:ci

You only have to do this once. Setup the connection to the databases using the provided script, and follow the on-screen instructions:

sh firebase_databases_setup.sh

Last step! Sync your original database with your development one by running our syncing script. This will copy all of the data from the original to the development database:

sh firebase_databases_sync.sh

Since we previously configured the databases, you can now sync the databases whenever you want, without configuring them again.

PHP Setup

As previously mentioned, profile pictures are stored in the server using PHP. If you would like to do the same, you need to replace the variable productionPHPTarget in src/Pages/Profile/profileUtils.tsx with your own server URL:

"https://your-server.com/assets/php/save_image_on_server.php";

Deploy

If you followed all of the above steps, you can proceed to locally run the project with

npm start

If you would like to deploy the application to your own server, run

npm run build

This will create a build folder. Just copy all of the contents of the folder to the root directory of your server.

Roadmap

See the open issues for a list of proposed features (and known issues), if any.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. To ensure a good workflow for this repository please follow our contributing guidelines:

• Contributin Guidelines

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Dinis Rodrigues - Linkedin - [email protected]