todo-app

Description:

This app aims at achieving the following:

• Speed of project completion.
• Attention to detail in implementing mockups and interfaces.
• Proficiency with the use of Vue3 + TypeScript and TailwindCSS.
• Responsive design thinking.
• Component-first Design Development (CDD)
• Writing clean component-based "non-hacky" SCSS.
• Clean Readable Codebase.
• Vue3 Composition Api use.
• Vuex 4.x implementation.
• JAMSTACK.

Possibilities of the app:

Using the Unsplash API, you're to create a mini unsplash clone using the mockups and design below as a guide..

• View the optimal layout for the app depending on their device's screen size.

• See hover states for all interactive elements on the page.

• Add new todos to the list.

• Mark todos as complete.

• Delete todos from the list.

• Filter by all/uncompleted/complete todos.

• Clear all todos.

• Clear all completed todos.

• Clear all uncompleted todos.

• Toggle light and dark mode.

• Bonus: Drag and drop to reorder items on the list

Added Features and Functionalities:

• Maximum number of todos to be created.
• Maximum letter count input when creating a todo item + Error border around input.
• Notification status card for actions carried out.

---

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.