https://github.com/codersuresh/url-shortener
A functional URL shortener in Nextjs
https://github.com/codersuresh/url-shortener
api nextjs tailwindcss tinyurl-api typescript
Last synced: 2 months ago
JSON representation
A functional URL shortener in Nextjs
- Host: GitHub
- URL: https://github.com/codersuresh/url-shortener
- Owner: coderSuresh
- Created: 2023-07-06T06:02:15.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-23T04:19:32.000Z (10 months ago)
- Last Synced: 2025-01-27T15:12:22.686Z (4 months ago)
- Topics: api, nextjs, tailwindcss, tinyurl-api, typescript
- Language: TypeScript
- Homepage: https://url-shortener-codersuresh.vercel.app
- Size: 1.12 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Shortly URL shortening API Challenge solution
This is a solution to the [Shortly URL shortening API Challenge challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/url-shortening-api-landing-page-2ce3ob-G). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Extra](#extra)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- Shorten any valid URL
- See a list of their shortened links, even after refreshing the browser
- Copy the shortened link to their clipboard in a single click
- Receive an error message when the `form` is submitted if:
- The `input` field is empty
- A valid URL is not entered
- Any error from the server should be displayed
#### Extra
Added functionality to delete the links from the local storage.
### Screenshot
### Links
- Solution URL: [https://github.com/coderSuresh/url-shortner](https://github.com/coderSuresh/url-shortner)
- Live Site URL: [https://url-shortener-codersuresh.vercel.app](https://url-shortener-codersuresh.vercel.app)
## My process
### Built with
- Next.js
- Tailwind CSS
### What I learned
I learned how to use Next.js and Tailwind CSS. I also learned how to use the API and how to use the local storage.
I learned the following things from this project:
- How to make a functional website using Next.js and Tailwind CSS.
- `overflow-wrap: break-word;` property to break the long words.
- How to use the local storage.
- How to use the API with Next.js.
## Author
- Frontend Mentor - [@coderSuresh](https://www.frontendmentor.io/profile/codersuresh)
- Linkedin - [@coderSuresh](https://www.linkedin.com/in/coderSuresh)