Back to home About Skills Certifications Career & Education Projects Social Media & Contact

Vue.js and Tailwind URL shortener practice project

Project introduction

A Vue.js project based on a skill challenge from Frontend Mentor, which involves creating a Vue.js app which uses Axios to fetch data from Clean URL API. I decided to include Tailwind as an optional styling framework for a chance to develop and showcase my skills.

Overview

View on GitHub | View live preview (no backend)

Shortening a URL

Correctly shortened URL

Invalid URL

Invalid URL error state

Loading state

Loading state

Backend disconnected

Backend disconnected

Project retrospective

  • A fun project in which I was able to improve and showcase my Vue.js and Tailwind CSS skills
  • Some code, such as error messages, wasn't set up as separate components due to time constraints. This is something I will make sure to do in future projects.

See next:

Rolling Block (React app) Return to homepage