Skip to content

Latest commit

 

History

History
70 lines (41 loc) · 2.87 KB

README.md

File metadata and controls

70 lines (41 loc) · 2.87 KB

GoalKit

This project was built project with Create React App and TypeScript

An online project management tool that makes users work more collaboratively and get more done. GoalKit provides multiple types of tools including boards, lists, cards and charts that enable users to organize and prioritize their projects in an efficient, flexible and rewarding way.

Demo link

Demo account: demo@email.com
Demo password: qqqqqq

Features

  • Instant co-editing
  • Instant messaging
  • Drag and drop
  • Updated multiple different types of information
  • Visualized data as chart
  • Online status
  • Authentication and private router
  • Handled nested and immutable data
  • Styled-Components

Instant co-editing

Fulfilled instant co-editing with onSnapshot API and solved conflict problems of instant co-editing

Instant messaging

Fulfilled instant messaging feature between multiple users

Drag and drop

Implemented creating lists and cards feature, allowed users to edit position and order by drag and drop with React Beautiful DnD

Updated multiple different types of information

Handled updating multiple different types of information about task cards including date, tags, owners, todo lists and progress status by useReducer

Visualized data as chart

Visualized task card information data as Gantt charts, progress pie charts and distribution bar charts with third-party libraries (gantt-task-react , recharts)

Online status

Used Realtime Database and Cloud Functions for user online status management

Authentication and private router

Applied React and React Router for SPA and private route, and used Firestore for data management

Handled nested and immutable data

Handled nested and immutable data by immer

Styled-Components

Implemented layout with Styled-Components

GoalKit_DnD_demo

Function Map

GoalKit

Structure Diagram

Structure Diagram