Mello

mello displayed on a laptop

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?

Client-side: Vue, Material Design
Development Environment: Node.js
Hosting: GitHub Pages
case study tool logos

Building The App

The technical requirements for creating the app:

mello on github
GitHub

The source code is hosted on GitHub, a collaborative platform that supports version control and project management. You can access the source here.

mello UI
The UI

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.

personalising the UI
Personalising the UI

The user can choose from a selection of background images to personalize the UI.

responsive design
Responsive design

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."