This project is a solution to the Frontend Mentor Shortly URL Shortening API Challenge. LinkSlice is a responsive web application that allows users to shorten URLs using a public API, manage their shortened links, and copy them easily.
- Overview
- Features
- Screenshots
- Demo
- Built With
- Getting Started
- What I Learned
- Future Improvements
- Resources
- Author
- Acknowledgments
LinkSlice lets users:
- Enter a URL and get a shortened version via a public API.
- View and manage a list of their shortened links (persisted in local storage).
- Copy shortened links to the clipboard with one click.
- Enjoy a fully responsive and accessible design.
- Responsive Design: Works on all device sizes.
- URL Shortening: Integrates with a public API to shorten URLs.
- Persistent Links: Stores shortened links in local storage.
- Copy to Clipboard: One-click copy functionality.
- Error Handling: User-friendly error messages for invalid input.
- React
- Tailwind CSS
- Mobile-first workflow
-
Clone the repository:
git clone https://github.com/yourusername/linkslice-url-shortener.git
-
Install dependencies:
npm install
-
Start the development server:
npm start
-
Open http://localhost:3000 to view it in your browser.
- How to consume APIs in React.
- Managing state and local storage for data persistence.
- Creating responsive layouts with Tailwind CSS, Grid, and Flexbox.
- Implementing copy-to-clipboard functionality. Example: Copy to Clipboard
const copyToClipboard = (text) => {
navigator.clipboard.writeText(text);
};- Add user authentication for personalized link management.
- Improve accessibility and keyboard navigation.
- Add analytics for shortened links.
- Enhance error handling and user feedback.
Thanks to the Frontend Mentor community for feedback and inspiration!