- Clone / Download this project
- Open Visual Studio Code
- Open a CLI and install the dependencies with
npm run init
- In JS_Vue-Kanban_server, rename the
.example.env
file into.env
and fill in the keys.
Theses steps makes the project launch itself automatically and only has to be done once
-
Go to the "kanban.code-workspace" file and click on the "Open Workspace" button
-
Once the workspace is open, open the Command Palette and write down "
>Tasks: Run Task
". Select the option and then "Run all
"
- Two terminals will open and run the command. On this point onwards, each time you open the workshop, the task will automatically run.
ℹ️ A prompt might ask your authorization to accept or deny the automatic launch.
Open a terminal and type in :
- For the server: "
npm run start:server
" - For the client: "
npm run start:client
"
Here are some of the main features of this WebApp:
This page displays the three latest tasks edited as well as the task marked as favourite.
The home pages also displays the name of the user when logged in.
Not logged in | Logged in |
---|---|
The navbar also changes when the user is logged in. The user will now have a button to add a new task as well as a log out button.
- Not logged in
- Logged in
Using a switch, the user can either sign up or sign in with his credentials. On login, the user will be accorded a JWT token that will leave him access to otherwise restricted pages.
Sign up | Login |
---|---|
The list page simply lists all tasks the users made in form of a kanban. Depending on the advancement of a task, the user can move from one column to another thanks to the edit button.
ℹ️ The edit and delete button will only be seen if the used is logged in.
This page is a form that creates a new task. If the user accesses this page with the navbar button, the user will be able choose the list it will appear on. However, if the page is accessed from one of the "Add ..." buttons on a list, the list input cannot be changed.
The edit page is a form that updates a selected task. In addition of the changing label for the submit button, the form will, by default, automatically be populated by the selected task.
The view page gets the desired task and displays it on the same form that was used to add and edit a task. All inputs will be blocked and the submit button will just take the user on the previous page.
This page appears when the user accesses a page that doesn't exist.
Note that this page cannot be accessed without changing manually the url
This page appears when the user is:
- Already logged in and wants goes in the "Log in/Sign up" page
- Not logged in and wants to access a restricted feature.
Note that these pages too cannot be accessed without changing manually the url
📦 ROOT
├─ .gitignore
├─ .vscode
│ └─ tasks.json
├─ JS_Vue-Kanban_client
│ ├─ .gitignore
│ ├─ README.md
│ ├─ jsconfig.json
│ ├─ package-lock.json
│ ├─ package.json
│ ├─ public
│ │ ├─ favicon.ico
│ │ └─ index.html
│ ├─ src
│ │ ├─ App.vue
│ │ ├─ common
│ │ │ └─ EventBus.js
│ │ ├─ components
│ │ │ ├─ authFormPage
│ │ │ │ └─ AuthForm.vue
│ │ │ ├─ layout
│ │ │ │ ├─ PageFooter.vue
│ │ │ │ └─ PageHeader.vue
│ │ │ ├─ table
│ │ │ │ ├─ CardButtons.vue
│ │ │ │ ├─ FavouriteStar.vue
│ │ │ │ ├─ KanbanColumn.vue
│ │ │ │ ├─ TasksTable.vue
│ │ │ │ └─ TodoItem.vue
│ │ │ └─ taskFormPage
│ │ │ └─ TaskForm.vue
│ │ ├─ main.js
│ │ ├─ models
│ │ │ └─ user.js
│ │ ├─ router
│ │ │ ├─ auth.routes.js
│ │ │ ├─ core.routes.js
│ │ │ ├─ index.js
│ │ │ └─ todos.routes.js
│ │ ├─ services
│ │ │ ├─ auth.service.js
│ │ │ ├─ axiosInstance.js
│ │ │ ├─ cards.service.js
│ │ │ └─ token.service.js
│ │ ├─ store
│ │ │ ├─ auth.module.js
│ │ │ └─ index.js
│ │ ├─ styles
│ │ │ ├─ core.css
│ │ │ ├─ forms.css
│ │ │ └─ pageHeader.css
│ │ └─ views
│ │ ├─ AuthFormPage.vue
│ │ ├─ AuthMessage.vue
│ │ ├─ HomePage.vue
│ │ ├─ NotFound.vue
│ │ ├─ TaskFormPage.vue
│ │ └─ TodoList.vue
│ └─ vue.config.js
├─ JS_Vue-Kanban_server
│ ├─ .env.example
│ ├─ app.js
│ ├─ package-lock.json
│ ├─ package.json
│ └─ src
│ ├─ config
│ │ ├─ db.config.js
│ │ ├─ jwt.config.js
│ │ └─ server.config.js
│ ├─ controllers
│ │ ├─ auth.controller.js
│ │ └─ todos.controller.js
│ ├─ middlewares
│ │ ├─ authJwt.js
│ │ ├─ index.js
│ │ └─ verifySignUp.js
│ ├─ models
│ │ ├─ todos.model.js
│ │ └─ users.model.js
│ ├─ routes
│ │ ├─ auth.routes.js
│ │ ├─ index.js
│ │ └─ todos.routes.js
│ └─ utils
│ └─ consoleMessage.js
├─ LICENSE
├─ README.md
├─ kanban.code-workspace
├─ package-lock.json
└─ package.json