Vue.JS Contacts Book Web App

A Modern Approach to Managing Contacts

Company
Vue Contacts App
Role
Web Developer & Designer
Technology
Vite, Tailwind, Vue.Js
Website
https://vue-contactbook.netlify.app/

Overview

This project showcases a sleek, feature-rich Contact Book web application, designed and developed using Vite and Vue.js. Styled with Tailwind CSS, the app features a clean and minimalistic light theme that prioritizes simplicity and usability. With functionality to add, remove, and edit contacts, all data is stored securely in the browser’s local storage, ensuring user privacy and fast access. Additionally, the app allows users to assign custom profile pictures to their contacts.

Objectives

Smooth User Experience

Deliver a user-friendly interface that makes it easy to manage contacts, from adding and editing details to choosing profile pictures.

Secure Data Storage

Utilize browser local storage for secure and private contact management without the need for external databases.

Responsive Design

Ensure a responsive application design that provides seamless functionality across all devices, from desktops to mobile phones.

Challenges & Solutions

Challenges

Ensuring data reliability and persistence while providing a smooth user experience.
Allowing users to assign profile pictures for their contacts in an intuitive and straightforward manner.
Creating a responsive layout that performs consistently across a wide range of devices and screen sizes.
Maintaining a visually appealing interface in a light theme while ensuring usability and clarity.

Solutions

Implemented browser local storage to save contact data securely, ensuring quick access and data persistence even after refreshing the browser.
Built an interactive system in Vue.js to enable users to easily assign and manage profile pictures for each contact.
Styled with Tailwind CSS to create a responsive and accessible layout, ensuring usability across desktops, tablets, and smartphones.
Designed a minimalistic and clean light theme aesthetic with an emphasis on clarity, functionality, and ease of navigation.

Showcase