/spravello

The "Spravello" project is a simplified version of the cloud-based software which manages small groups' projects "Trello".

Primary LanguageJavaScript

SPRAVELLO

  1. About the project
  2. Installing and running the project
  3. Project-elements
  4. Used techologies
  5. Our Team
  6. Acknowledgment

Watch demo

About the project

The "Spravello" project is a simplified version of the cloud-based software which manages small groups' projects "Trello".

(Back to top)

Installing and running the project You need to do the following:

  1. Copy repository
git clone https://github.com/EvgenyWas/spravello.git
  1. Install Node modules
npm install
  1. Build and run project
npm run dev

(Back to top)

Project elements

Header

Header

  1. Website logo
  2. You can easily find any user among the tasks using the filter list.
  3. After selecting a user, use the filter button to find the user you want.
  4. The clock always shows the current time so that you can easily keep track of it.

Todo cards

Next you see three columns for placing your "todo" tasks.

Cards

Todo

The "todo" column contains all tasks that aren't "In progress" and haven't been completed. There's an "Add todo" button on the card to add a new task. After clicking "Add todo", a modal window opens with a header, main text, a button which, when clicked, selects a specific user to perform the task and an accept button which adds the task to the board, and a cancel button which simply deletes this "Todo".

Modal-window

You can use drag&drop to move cards from one list to another, or use the buttons described below.

When the task is added to the column, there's "Edit" button at the top which allows you to edit the task and "Delete" button which removes the task from the column. There's also a conversion button which, when clicked, moves the task to the "In Progress" column.

InProgress-Card

In Progress

The "In Progress" column contains the tasks that are currently in progress. You can "rewind" the task back to the "Todo" list by pressing the "Back" button and you can also move it to the "Done" column, where the completed tasks are located, by pressing the "Complete" button.

InProgress-Card

Done

The "Done" column contains tasks that have already been completed. At the bottom of the column is the "Delete All" button, which deletes the entire list of tasks entered there, and if you only need to delete one specific task simply click on the "Delete" button on the card itself.

Done-Card

(Back to top)

Used techologies

In our project we used:

  • JavaScript
  • SCSS
  • Parcel-bundler
  • JSONPlaceholder API
  • component approach

(Back to top)

Our Team

(Back to top)

Acknowledgment

Special thanks to our teacher for his super-valuable help in creating this project.

Stas - Stanislav-Tavyrin

(Back to top)