Project Overview
What is it?
Mello is a responsive, single-view web application built with Vue.js. Inspired by Trello, it allows users to create, manage, and prioritize their to-do lists. Additionally, users can personalize the interface by selecting from a variety of pre-determined background images.
What was the objective?
The goal was to develop a responsive web application using the Vue.js framework and the Material Design system as part of the CareerFoundry Web Development Fullstack Bootcamp. This project aimed to showcase both front-end and design skills while adhering to modern web development best practices.
Which tools were used?
Building The App
The technical requirements for creating the app:
- The app must be built using Vue.js.
- The UI must be designed with Material Design through Vue Material.
- The app must be responsive, and display well on all screen sizes.
- The app must be serverless.
- The app must allow the user to personalize the UI.
- The app must be deployed on GitHub Pages.
The source code is hosted on GitHub, a collaborative platform that supports version control and project management. You can access the source here.
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 is fully responsive, ensuring a seamless experience across mobile, laptop, and desktop devices.
Challenges Faced
The biggest challenge in this project was learning the fundamentals of the Vue.js framework, especially after spending a significant amount of time with React in previous projects. I had to truly ‘change gears,’ which provided invaluable hands-on experience working with different frameworks. Additionally, this project offered me the opportunity to work with the Material Design system for the first time, having previously only worked with Bootstrap in other projects."