A fullstack Project Management Software made using React JS (Typescript), Node JS + Express (Typescript), and Mongo DB.
- React JS + Typescript
- React Query
- Redux Toolkit
- Tailwind CSS
- Formik + Yup
- React Beautiful DND
- React Toastify
- React Select
- Node JS + Express + Typescript
- Mongo DB (with Mongoose)
- JWT tokens & Google Auth for authentication
- Node Mailer
- Signup and Login (Email + Password & Google OAuth)
- HomePage
- Profile Settings
- Space CRUD (with Role -> ADMIN & NORMAL)
- Space Members CRUD
- Board CRUD (with Role -> ADMIN, NORMAL, and OBSERVER)
- Board Members CRUD
- List CRUD
- List Drag & Drop (reordering)
- Card CRUD
- Card Drag & Drop (reordering)
- Card comments CRUD (with Role)
- Card Members CRUD (with Role)
- Card Labels (with Role)
- Card Due Date (with Role)
- Card Cover Image (with Role)
- Labels CRUD (with Role)
- JWT based auth (both accessToken and refreshToken)
- Google OAuth
- Favorites (make both Space & Board favorite) etc.
A fully fledged project management software which was built by taking inspiration from Trello, one of the pioneers in this space.
In Workspace, there is a hierarchy you need to follow:
In space level, as well as in board level, role based CRUD is implemented. The UI will be rendered according to the role which the user has. In short everything is done based on the role(power) the user have.
In Space, there are two roles -> ADMIN, NORMAL In Board, there are three roles -> ADMIN, NORMAL, OBSERVER
Email verification is also implemented in authentication flow. Unless until you confirm your email (by clicking on the link which was sent inside email to the email address you have given), you won't be able to use this app at all.
Labels are used in board level. Each label of the board will be available to assign to a card belongs to that board. Labels will be useful in aspects such as searching the cards and filtering it (haven't implemented it yet).
A technique called "Lexorank" is used for giving weights to cards as well as lists, so that they will keep the order. Lexorank is ranking system that Jira Software uses which provides the ability to rank issues in Jira Software instances. But in this project, I used Lexorank without the bucket feature.
In order to run this project on your computer, you must have the following things setup:
- Docker (please install Docker and setup properly on the computer in which you are going to run this project on).
- Setup a database in MongoDB Atlas and obtain the
URI. - Obtain
GOOGLE_CLIENT_IDfor using Google OAuth. (link). - You need an Gmail account for sending verifying email while a user signs up. You need to enable and obtain
APP_SPECIFIC_PASSWORDof that Gmail. (link) - Signup for Unsplash API and obtain the
CLIENT_ID. (link)
git cloneorDownload ZIPthis repohttps://github.com/the-coding-pie/workflow.git- Now
cdinto the root directory (ie, workflow):
cd workflow- Now create two
.envfiles, one inserver/folder and another inclient/folder. - Now copy paste the content for
.envinserver/folder. Please replace the proper values by yours:
PORT=8000
MONGO_URI=your_mongodb_atlas_uri
REFRESH_TOKEN_SECRET=generate_strong_random_characters_and_put_it_here
ACCESS_TOKEN_SECRET=generate_strong_random_characters_and_put_it_here
GOOGLE_CLIENT_ID=your_google_client-id_for_google_oauth
GMAIL=any_email_address_for_sending_email_from
GMAIL_PASSWORD=that_emails_password
You can obtain GOOGLE_CLIENT_ID for enabling google oauth by simply searching google and following the steps recommended. And for gmail(last option), please use app specific password.
- Now copy paste the content for
.envinclient/folder. Please replace the proper values by yours:
VITE_UNSPLASH_CLIENT_ID=your_unsplash_client_id
VITE_GOOGLE_CLIENT_ID=your_google_client-id_for_google_oauth(same_which_you_put_in_server_env_file)
Please obtain a CLIENT_ID for using Unsplash API from Unsplash.
- Make sure you have Docker properly setup. Now fire this command:
docker-compose up- That's it, Now visit http://localhost:3000