This Tech demo is designed to get a rough outline of where your understanding is at, in regards to a basic VueJS 2 project.
The project is written using Vuejs 2 and Typescript, with class style syntax.
It is not a Pass / Fail based task, if you can explain the aspects of the project that you do not understand, how you would go about figuring it out, that in itself is useful.
The project is already setup and will not require scaffolding. To help things along, the project already includes Vuetify, this is what a lot of our components use for styling. It also has Vuex installed for state storage. Linting and lint config are included.
(Installing these is basically a one off task, and is not particularly indicative of how well you can perform the job, that is why the test is pre scaffolded)
Get the Todo Application compiling and working as expected whilst covering the brief. The project itself will be half baked, with errors deliberately put in, and certain aspects of it deliberately removed.
When making changes / Completing tasks I would like you to comment the reasoning for the changes / an explanation of the changes purpose.
The todo app should implement the following features when adding a todo item
1 - A way to input text for a Title and a Description - (Ensuring no duplicate todo items (title) and no empty items)
2 - Listing the Todo items in a card based layout
3 - A clear UI separation for todo's that are Active and Completed (with no items from either state being visible near the other)
4 - A clean system for moving the todo's between states
Include a second option for adding a Todo - Fetching data from 3rd party Api - https://jsonplaceholder.typicode.com/todos/5 (Use this website to get a todo(last number can change), then add it to your list)
Image Upload - when adding a todo, include an image to be displayed on the card.
Vuetify components should be used where applicable.
State Storage should be used to handle adding / completing data
Following the fundamentals of VueJS' component based architecture
Type checking with Typescript e.g. Ensuring all properties on an object can only be of certain types or only certain properties can exist on an object
Throughout all of this, you should adhere to a clean uncluttered UI design. Hiding parts of the system where applicable behind popovers / menus.
Now that you have read the brief, we would like you to clone this repo, and create your own. When you have completed the TechDemo we would like you to share your repo with us.
We would also like you to perform individual commits that relate roughly to the feature you are working on, as well as commenting your code.