Full Stack Task Manager

A full stack task managing application built with React, TypeScript, Nest.JS, and PostgresSQL.

Table of Contents

• About the Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Roadmap
• Contributing
• License
• Contact

About The Project

This repository was meant to tie the two projects I made together, the API project and the webapp project, and present them as one project. Please visit the readme of the api project for motivations behind the API project.

Built With

• React
• TypeScript
• Nest.JS
• PostgresSQL

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm or yarn

npm install npm@latest -g

• PostgresSQL 12
• PgAdmin 4

**** please make sure PgAdmin4 and PostgresSQL is runnig ****

Installation

In the near future, I will convert this project into a docker project so that it can be run in one environment. However, until then, please follow the following steps.

1. Clone the repo for the API and CD into new directory

git clone https://github.com/wlee367/nest-js-task-management-api
cd nest-js-task-management-api

1a. Adjust /config/default.yml

server:
  port: ${your_desired_port_here} // will be set as 3001

db:
  type: 'postgres'
  port: 5432 // change to port your postgres installation is running
  database: 'taskmanagement' // name of the database. when app starts up, it will create a database with this name if it doesn't exist. 

jwt:
  expiresIn: 3600000000000

2. Install NPM packages

yarn install

3. Run project in development mode

yarn start:dev

4. In a new terminal window, clone the repo for the webapp, and cd into new directory.

git clone https://github.com/wlee367/nestjs-task-management-webapp
cd nestjs-task-management-webapp

4a. IF you changed the port number in step 1a, you will want to adjust /src/app/redux/httpService.js and adjust the BASE_URL variable to match your port.

  BASE_URL = "http://localhost:{YOUR_PORT_NUMBER}"; 

5. Install NPM packages

yarn install

6. Run project

yarn start

7. Visit http://localhost:3000 to see the project connected.

Usage

In this project, you can sign up as a user by going to localhost:3000/register.

Your password must contain one capital letter, at least one special character, and be a minimum of 8 characters long. Otherwise, you will get this error:

Once you register / login, you will be redirected to the main screen like this:

To create a new task, simply click on the plus icon in the bottom right, then you'll be greeted with a modal like this:

Once you create a task, you will be able to drag and drop it to a different column to indicate a new status, or leave a comment like this:

If you click on user activity - you will be able to see a history of all actions you have taken.

Roadmap

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

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

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

Contact

Jason Lee - email

Project Link: https://github.com/wlee367/TaskManager