.Todos

Installation Setup

# clone code
git clone https://github.com/OctupusPrime/todos-v2.git

# go to folder
cd todos-v2

# install dependencies
npm install

# serve with hot reload at localhost:3000
npm run dev

# build for production and launch server
npm run build
npm run start

# generate static project
npm run generate

If you dont want install Live app
Login - test@gmail.com Password - 123qwe

Description

This is a full stack application for taking notes in columns. Inspired by Trello.

Key features :

• Safety (All tokens are stored on the backend with the httpOnly tag);
• Registration, Authentication (Ability to create an account to access your notes);
• Saving notes to database (mongo DB);
• Convenient gui for (add, edit, delete) notes;
• Shuffling notes (Drag and drop functionality is fully implemented);
• Working deadline in a note;
• Priority selection in each note separately;
• There is a /help page to help you get started;
• Adaptable for any device;

Documentation

Front End part

---

Plugins

Name	Usage
@fortawesome/vue-fontawesome	Used to add icons from fontawesome
@nuxtjs/axios	Used to send asynchronous requests to the backend
cookie-universal-nuxt	Used to create isAuth cookie on client
vue-resize	Used to detect element size change

Folders

• assets

It stores the global styles in the css folder, and the gifs / images folders hold the original gifs and photos (so you might think).

• components

If the component has the Todo prefix, then it refers to the note. And if Base then they replace the base (input, buttons ...).

• layouts

Name	Usage
clear	Completely clean layout
default	layout of the application itself with the right bar settings
noAuth	layout with reg / log button in header

• middleware

auth.js - It is needed to validate whether the user is logged into the account, if not, then redirect to the landing page.

• pages

Name	Usage
index	Landing page with registration/authentication and application information
tasks	Application page with notess
help	User information page on how to use the app

• plugins

Just a folder to initialize global plugins.

• store

The most interesting folder is where all requests to the back end and changes to the array of notes take place.

For future me

Add click out from Add todo and quick menu.

Back End part

---

Plugins

Name	Usage
express	Used to create routes
express-validator	Used to validate password and email
mongoose	Used for easy work with mongo DB
cookie-parser	Used to parse and add cookie to request header
body-parser	Used to parse request body
bcryptjs	Used to hash the password
uuid	Used to create a unique id for refresh token

Routes

• Authification

Registration
Registates user
Path: /api/auth/reg
Method: POST

Request

BODY	TYPE	REQUIRED
email (User email)	string	Required
password (User password)	string	Required

Response
On success, the HTTP status code in the response header is 200 OK and the response message "User was created".

Log in
Log in user.
Path: /api/auth/log
Method: POST

Request

BODY	TYPE	REQUIRED
email (User email)	string	Required
password (User password)	string	Required

Response
On success, the HTTP status code in the response header is 200 OK and the response message "Auntificated".

Log out
Log out user.
Path: /api/auth/logout
Method: POST

Response
On success, the HTTP status code in the response header is 200 OK and the response message "User logout".

Refresh tokens
Log out user
Path: /api/auth/logout
Method: POST

Request

HEADER	TYPE	REQUIRED
Authorization (A valid user access token)	string	Required

Response
On success, the HTTP status code in the response header is 200 OK and the response message "Token refreshed".

• Tasks

---

Get tasks
Gets all user tasks. Path: /api/tasks
Method: GET

Request

HEADER	TYPE	REQUIRED
Authorization (A valid user access token)	string	Required

Response
On success, the HTTP status code in the response header is 200 OK and the response body contains tasks list.

Add task
Added task to array Path: /api/tasks
Method: POST

Request

HEADER	TYPE	REQUIRED
Authorization (A valid user access token)	string	Required

BODY	TYPE	REQUIRED
title (of the task)	string	Required
description (of the task)	string	Optional
deadline (of the task)	number	Optional (Default: 1 day)
priority (of the task)	string	Optional (Default: low)

Response
On success, the HTTP status code in the response header is 200 OK and the response body contains of added task.

Update task
Update task values.
Path: /api/tasks:title
Method: PUT

Request

HEADER	TYPE	REQUIRED
Authorization (A valid user access token)	string	Required

PATH PARAMETER	TYPE	REQUIRED
title (of the the task)	string	Required

BODY	TYPE	REQUIRED
title (Updated title)	string	Optional
description (Updated description)	string	Optional
deadline (Updated deadline)	number	Optional
priority (Updated priority)	string	Optional

Response
On success, the HTTP status code in the response header is 200 OK and message "Task was updated".

Delete task
Update task values.
Path: /api/tasks:title
Method: DELETE

Request

HEADER	TYPE	REQUIRED
Authorization (A valid user access token)	string	Required

PATH PARAMETER	TYPE	REQUIRED
title (of the the task)	string	Required

Response
On success, the HTTP status code in the response header is 200 OK and message "Task was deleted".

Relocate task
Relocate task in columns and index.
Path: /api/tasks:title
Method: PUT

Request

HEADER	TYPE	REQUIRED
Authorization (A valid user access token)	string	Required

PATH PARAMETER	TYPE	REQUIRED
title (of the the task)	string	Required

BODY	TYPE	REQUIRED
status (Which column to put)	string	Required
index (Which index put)	number	Required

Response
On success, the HTTP status code in the response header is 200 OK and message "Task was relocated".

Bugs

When in one column too many tasks relocate route doesn't work properly and put tasks in random spots.

For future me

Fix relocate bug.
Add to response to updated task in update task.

Authors

Misha Sokil

License

MIT © Misha Sokil

Thank you for your attention