Mello is a single-view, responsive web application built with Vue.js. It is a to-do list application similar to Trello, and allows the user to create, manage, and prioritize to-do lists. The user can also choose from a selection of pre-determined background images to personalize the UI.
To create a responsive web application with the Vue.js framework, and the Material Design system, as part of the CareerFoundry Web Development course.
Client-side: Vue, Material Design Development Environment: Node.js Hosting: GitHub Pages
The technical requirements for creating the app:
The source code is deployed to GitHub, a platform for hosting, collaborating, and version control. Take a look at the code here. The app is also hosted on Github Pages.
The user can create new lists and tasks, then drag and drop them to change the order of the lists in order to prioritize them. Clicking on a task shows more specific details about the tasks, and allows the user to edit the details.
The user can choose from a selection of background images to personalize the UI.
The application has been responsively designed for desktops, tablets, and mobiles using Material Design, CSS, media query breakpoints, and flex boxes. Demo the app here.
The major task I had with this project was learning the basics of the Vue framework after having spent a lot of time with the React framework in previous projects. I had to literally "change the chip", which was fantastic practical experience in working with different frameworks. This project also gave me the opportunity to work with the Material Design system for the first time, after having only worked with Bootstrap in other projects.
