A simple and efficient URL shortener application built using React.js. This project enables users to convert long URLs into shorter, more manageable links. It also provides a user-friendly interface for managing and tracking shortened URLs.
- URL Shortening: Instantly generate short URLs from long links.
- Responsive Design: Optimized for both desktop and mobile devices.
- Link Management: View and manage all shortened URLs.
- Custom Aliases: Option to customize the alias for shortened links.
- Analytics: Track the number of clicks on each shortened URL.
- User Authentication: Personalized link management for authenticated users.
- Persistent Storage: Integration with a database for saving URLs and analytics.
- Enhanced UI/UX: Improved user experience with an intuitive interface.
- Frontend: React.js
- Styling: Tailwind CSS (Shadcn ui)
- Routing: React Router DOM
- Backend: API integration for URL shortening service (custom hooks also)
- State Management: State management library used, Context API.
Follow these steps to run the project locally:
-
Clone the repository:
git clone https://github.com/marshadn/url-shortener.git cd url-shortener -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to:
http://localhost:5173
url-shortener/
├── public/ # Public assets
├── src/ # Source code
│ ├── components/ # Reusable React components
│ ├── pages/ # Application pages
│ ├── utils/ # Utility functions (if any)
│ ├── App.jsx # Main application component
│ ├── main.jsx # Entry point
├── package.json # Project metadata and dependencies
├── tailwind.config.js # Tailwind CSS configuration
└── README.md # Project documentation
- Enter the long URL you want to shorten into the input field.
- (Optional) Provide a custom alias for the shortened link.
- Click on the "Shorten URL" button.
- Copy and share your shortened link
