WebApp Features:

Front-end (Vue.js):
  1. Create a Vue.js application with the following components:
    • Task List: Display a list of tasks.
    • Task Creation: Allow users to add new tasks to the list.
    • Task Deletion: Allow users to remove tasks from the list.
    • Task Filtering: Implement filtering options to filter tasks based on completion status (e.g., show only completed tasks or incomplete tasks).
  2. Implement basic data validation on the front-end (e.g., ensure the task title is not empty).

Technologies and Tools Used:

  1. Node.js
  2. Visual Studio Code
  3. Vue Cli
  4. Configurations of:
    • CDN js config file
    • Bootstrap
    • Font Awesome
    • Axios library
    • JSON server for REST-API
    • Postman

How to run the program

  1. Install Visual Studio code
  2. Install Node.js
  3. Install vue.js in Command prompt------ npm install -g @vue/cli
  4. create project-------- vue create
  5. While creating the project do select these settings: * features: Babel, Router, Vuex, Linter * vue.js version: 3.x * history mode: anything * linter config: basic * additional lint features: lint on save * config package: can be anything.. preferred package.json * you can save the preset for future references.
  6. to run the server --------npm run serve
  7. install bootstrap and font awesome files: -------npm install bootstrap @fortawesome/fontawesome-free
  8. install axios: ------ npm install axios
  9. install json server: ------- npm install -g json-server
  10. to run the server: ------- json-server --watch db.json

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.


Home Screen  All tasks


addTask 2

Completed Task

Incompleted Tasks


View Github