/images-mern-ts

Full stack Project using React + TypeScript, Node JS + Express + TypeScript and Mongo DB

Primary LanguageTypeScript

typescript-mern-images

🚀 Javascript full-stack 🚀

A fullstack Project Management Software made using React JS (Typescript), Node JS + Express (Typescript), and Mongo DB.

https://github.com/coding-to-music/typescript-mern-images

https://typescript-mern-images.herokuapp.com

by Aravind K aravind_k28 thecodingpie the-coding-pie https://github.com/the-coding-pie

https://github.com/the-coding-pie/workflow

PORT=8000

MONGODB_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

GitHub

git init
git add .
git remote remove origin
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:coding-to-music/typescript-mern-images.git
git push -u origin main

Heroku

heroku create typescript-mern-images

Heroku MongoDB Environment Variables

heroku config:set


heroku config:set JWT_SECRET="secret"

heroku config:set PUBLIC_URL="https://typescript-mern-images.herokuapp.com"

Push to Heroku

git push heroku

# or

npm run deploy

Workflow

A fullstack Project Management Software made using React JS (Typescript), Node JS + Express (Typescript), and Mongo DB.

boardDetailPage

card homepage inviteboard

Technologies Used:

Frontend

  • React JS + Typescript
  • React Query
  • Redux Toolkit
  • Tailwind CSS
  • Formik + Yup
  • React Beautiful DND
  • React Toastify
  • React Select

Backend

  • Node JS + Express + Typescript
  • Mongo DB (with Mongoose)
  • JWT tokens & Google Auth for authentication
  • Node Mailer

Features

  • 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.

Description

A fully fledged project management software which was built by taking inspiration from Trello, one of the pioneers in this space.

Hierarchy

In Workspace, there is a hierarchy you need to follow:

hierarchy

Role based CRUD

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

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 in Board Level

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).

labels

Ranking Lists & Cards

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.

Auth Flow

authflow_final



How to setup locally on your computer

Pre-requirements

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_ID for 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_PASSWORD of that Gmail. (link)
  • Signup for Unsplash API and obtain the CLIENT_ID. (link)

Steps

  1. git clone or Download ZIP this repo https://github.com/the-coding-pie/workflow.git
  2. Now cd into the root directory (ie, workflow):
cd workflow
  1. Now create two .env files, one in server/ folder and another in client/ folder.
  2. Now copy paste the content for .env in server/ folder. Please replace the proper values by yours:
PORT=8000

MONGODB_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.

  1. Now copy paste the content for .env in client/ folder. Please replace the proper values by yours:
VITE_UNSPLASH_CLIENT_ID=your_unsplash_client_id

Please obtain a CLIENT_ID for using Unsplash API from Unsplash.

  1. Make sure you have Docker properly setup. Now fire this command:
docker-compose up
  1. That's it, Now visit http://localhost:3000

Designed and developed with ❤️ by @AK (that's me ;)