URL Shortener is a single-page application that will receive a valid link from the user, consume an API to get a shrunk link and show it on the screen.
This project I used:
- SASS
- Bulma Framework/Lib
- HTML
- JavaScript
Start - 05 August 2021
Deadline - 11 August 2021
- Day 1 - Find an API to use and read the documentation, read the Vuetify Documentation
- Day 2 - Build the visual part
- Day 3 - Connect the API
- Day 4 - Test and improove
- Day 5 - Search for feedback in the community & improove
- Day 6 - Present the project with a Linkedin post
The user will input a valid URL and click a "shorten" button. The shortened URL will then be displayed.
The UI should include the following elements:
- Text input for the user's URL
- "Shorten" button to trigger the link shortening
- Display area to return the shortened URL to the use
1 - At the start, I was decided to use VUE and Vuetify to build this project, but due to the short delivery time that I put on it, I've chosen to stay where I can swim safely, so I'll use the basics in this project and I'll compromise myself to study VUE to be comfortable with it.
2 - I decided to use Bulma to help me with the CSS. I've some previous knowledge in Bootstrap and Bulma seems more easy to understand the class system, so far so good.
3 - Using Bulma, I faced some difficulties to centralize figure div, searching on the internet I didn't find anything that helps me with that. A solution that works for me is not to use the figure div but to put the image as img for real. Now I'll try to integrate the API to short the links.
4 - I'm stuck in the API documentation, I've been facing some issues to request correctly.
5 - I found a solution of API reading a lot of blogs, but I need to search more to understand it well.