yunyunliu / project-map

A fullstack project board app for developers who want to visualize and organize their projects - built using React, Express, Node, and PostgreSQL

ProjectMap

ProjectMap is a full stack web application for developers who want to visualize and organize their projects. The app is inspired by kanban boards used in agile development methodologies.

Live Site

ProjectMap allows users to map out a complex project by dividing it into small tasks, move tasks from column to column on the project board to mark their progress, and keep tasks organized with color-coded labels.

Try ProjectMap here!

Technologies Used

• React.js
• Express.js
• Node.js
• PostgresSQL
• HTML5
• CSS3
• Webpack
• Heroku

Features

• User can create and delete project boards.
• User can add and delete columns from project boards.
• User create, delete, and edit task cards.
• User can add and remove color-coded labels from cards
• User can drag and drop to reorder task cards within a column;
• User can drag and drop to move a task card between columns.
• User can drag and drop to reorder columns.

Preview

Planned Features

• build out user registration and authentication
• allow users to authenticate through Github's OAuth implementation.

Development

System Requirements

• Node.js 10 or higher
• NPM 6 or higher
• PostgreSQL 12 or higher

Getting Started

1. Clone the repository.

   git clone https://github.com/yunyunliu/project-map.git
   cd project-map

2. Install all dependencies with NPM.

   npm install

3. Import the example database to PostgreSQL.

   npm run db:import

4. Start the project. Once started you can view the application by opening http://localhost:3000 in your browser.

  npm run dev

project-map's Issues

Feature: User can create a project board

⚙️ Feature

What capability will users have when this feature is merged?

User can create a project board

📐 Functionality

A description of how the application will work from the perspective of the user.

user clicks the plus icon in projects view to generate a new project with the default name of 'new board'
user can click on the board name text to show a text input where they can enter a different name. and a button that on click submits name change

Attach event handler that creates a new board to plus icon, which makes request to server to make a new board
Have a 'isEditing' value in state that can be toggled, which will determine whether text input box or project name is rendered

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

figma

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

no changes needed

☁️ Server

• create endpoint to receive post request

• create request handler that makes a INSERT query to database for a new board and sends new record in response

• Handle all errors and send newly created record in response

⚡ Client

• create and style component
• Create and style component containing a button that onClick sends api request
• after successful api request, page is updated to display new board

🧑‍⚕️ Clean Up

• Make sure that no React state objects are being mutated.
• Make sure that no event listeners are manipulating the DOM directly.
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Remove all buttons and placeholders that do not serve the functionality of the feature.
• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: User can create add a tag to a task by creating a new tag or selecting from previously used tags

⚙️ Feature

What capability will users have when this feature is merged?

📐 Functionality

A description of how the application will work from the perspective of the user.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

• Update schema.sql to ...
• Update data.sql to ...

☁️ Server

• Update server/index.js to ...
• Test with HTTPie
• Handle all errors and respond to the client

⚡ Client

• Create a component to ...
• Update component to ...

🧑‍⚕️ Clean Up

• ...
• ...
• Make sure that no React state objects are being mutated.
• Make sure that no event listeners are manipulating the DOM directly.
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Remove all buttons and placeholders that do not serve the functionality of the feature.
• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: user can move task cards between columns

⚙️ Feature

What capability will users have when this feature is merged?

📐 Functionality

A description of how the application will work from the perspective of the user.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

• Update schema.sql to ...
• Update data.sql to ...

☁️ Server

• Update server/index.js to ...
• Test with HTTPie
• Handle all errors and respond to the client

⚡ Client

• Create a component to ...
• Update component to ...

🧑‍⚕️ Clean Up

• ...
• ...
• Make sure that no React state objects are being mutated.
• Make sure that no event listeners are manipulating the DOM directly.
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Remove all buttons and placeholders that do not serve the functionality of the feature.
• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: user can create a column on a board

⚙️ Feature

What capability will users have when this feature is merged?

📐 Functionality

A description of how the application will work from the perspective of the user.

user can click the plus icon is board view to create a new column with the default name of 'new column'
user click the column title to change the column name

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

figma

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

no changes needed

☁️ Server

• create endpoint responding to post requests that queries database uses the boardId from the request
• Test with HTTPie
• Handle all errors and respond to the client

⚡ Client

• Create a component to ...
• Update component to ...

🧑‍⚕️ Clean Up

• ...
• ...
• Make sure that no React state objects are being mutated.
• Make sure that no event listeners are manipulating the DOM directly.
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Remove all buttons and placeholders that do not serve the functionality of the feature.
• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: user can remove a tag from a task card

⚙️ Feature

What capability will users have when this feature is merged?

📐 Functionality

A description of how the application will work from the perspective of the user.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

• Update schema.sql to ...
• Update data.sql to ...

☁️ Server

• Update server/index.js to ...
• Test with HTTPie
• Handle all errors and respond to the client

⚡ Client

• Create a component to ...
• Update component to ...

🧑‍⚕️ Clean Up

• ...
• ...
• Make sure that no React state objects are being mutated.
• Make sure that no event listeners are manipulating the DOM directly.
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Remove all buttons and placeholders that do not serve the functionality of the feature.
• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature:9. user can delete a task

⚙️ Feature

What capability will users have when this feature is merged?

📐 Functionality

A description of how the application will work from the perspective of the user.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

• Update schema.sql to ...
• Update data.sql to ...

☁️ Server

• Update server/index.js to ...
• Test with HTTPie
• Handle all errors and respond to the client

⚡ Client

• Create a component to ...
• Update component to ...

🧑‍⚕️ Clean Up

• ...
• ...
• Make sure that no React state objects are being mutated.
• Make sure that no event listeners are manipulating the DOM directly.
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Remove all buttons and placeholders that do not serve the functionality of the feature.
• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: User can edit a column name

⚙️ Feature

What capability will users have when this feature is merged?

📐 Functionality

A description of how the application will work from the perspective of the user.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

• Update schema.sql to ...
• Update data.sql to ...

☁️ Server

• Update server/index.js to ...
• Test with HTTPie
• Handle all errors and respond to the client

⚡ Client

• Create a component to ...
• Update component to ...

🧑‍⚕️ Clean Up

• ...
• ...
• Make sure that no React state objects are being mutated.
• Make sure that no event listeners are manipulating the DOM directly.
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Remove all buttons and placeholders that do not serve the functionality of the feature.
• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: user can create a task

⚙️ Feature

What capability will users have when this feature is merged?

📐 Functionality

A description of how the application will work from the perspective of the user.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

• Update schema.sql to ...
• Update data.sql to ...

☁️ Server

• Update server/index.js to ...
• Test with HTTPie
• Handle all errors and respond to the client

⚡ Client

• Create a component to ...
• Update component to ...

🧑‍⚕️ Clean Up

• ...
• ...
• Make sure that no React state objects are being mutated.
• Make sure that no event listeners are manipulating the DOM directly.
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Remove all buttons and placeholders that do not serve the functionality of the feature.
• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: User can delete a board

⚙️ Feature

What capability will users have when this feature is merged?

user can click close icon at the corner of a board in project view to have a modal appear asking to confirm delete
user can click delete to delete board and exit modal or click cancel exit modal without deleting

📐 Functionality

A description of how the application will work from the perspective of the user.

add delete button that makes api request server to delete board and all the columns and cards it contains from database.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

figma

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

no changes necessary

☁️ Server

• create endpoint for delete method
• figure out how to delete all columns, cards and tags associated with a board
• add handler that makes DELETE query to database with the boardId provided by request
• check that endpoints and sql work
• Handle all errors and respond to the client

⚡ Client

• create and style confirm modal component
• add handler to close icon of component that displays confirm modal onClick
• add handlers to delete and cancel buttons on confirm modal
  • confirm button handler makes api request to server, updates page when it gets a successful response, and exits modal
  • cancel button-handler exits modal

🧑‍⚕️ Clean Up

• Make sure that no React state objects are being mutated.
• Make sure that no event listeners are manipulating the DOM directly.
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Remove all buttons and placeholders that do not serve the functionality of the feature.
• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: user can edit a task card

⚙️ Feature

What capability will users have when this feature is merged?

📐 Functionality

A description of how the application will work from the perspective of the user.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

• Update schema.sql to ...
• Update data.sql to ...

☁️ Server

• Update server/index.js to ...
• Test with HTTPie
• Handle all errors and respond to the client

⚡ Client

• Create a component to ...
• Update component to ...

🧑‍⚕️ Clean Up

• ...
• ...
• Make sure that no React state objects are being mutated.
• Make sure that no event listeners are manipulating the DOM directly.
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Remove all buttons and placeholders that do not serve the functionality of the feature.
• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: User can edit a board name

⚙️ Feature

What capability will users have when this feature is merged?

user can click on the board name text to show a text input where they can enter a different name. and a button that on click submits the name change to server and replaces the text input with the new board name

📐 Functionality

A description of how the application will work from the perspective of the user.

user input into text box stored in state; onclick api request to update

🖼️ Wireframes

figma

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

no changes needed

☁️ Server

• add patch endpoint that makes update query to server using the data and boardId provided in request
• Test with HTTPie
• Handle all errors and respond to the client

⚡ Client

• Add html and styling for input element and button for where user will enter new board name
• style project buttons
• add piece of state that keeps track of the boardId that is being edited
• add handler to project buttons that sets the id of the board clicked on as currentlyEditing value of state
• add click handler to confirm button, which send patch request to server with the text input value in it's body
• on successful api request set currentlyEditing back to null, set new value or boards with the updated board

🧑‍⚕️ Clean Up

• ...
• ...
• Make sure that no React state objects are being mutated.
• Make sure that no event listeners are manipulating the DOM directly.
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Remove all buttons and placeholders that do not serve the functionality of the feature.
• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Feature: user can delete column from board

⚙️ Feature

What capability will users have when this feature is merged?

📐 Functionality

A description of how the application will work from the perspective of the user.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

• Update schema.sql to ...
• Update data.sql to ...

☁️ Server

• Update server/index.js to ...
• Test with HTTPie
• Handle all errors and respond to the client

⚡ Client

• Create a component to ...
• Update component to ...

🧑‍⚕️ Clean Up

• ...
• ...
• Make sure that no React state objects are being mutated.
• Make sure that no event listeners are manipulating the DOM directly.
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Remove all buttons and placeholders that do not serve the functionality of the feature.
• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.