A sleek, modern URL shortener application with comprehensive analytics tracking. Built with React and featuring a beautiful black and grey design, Short.ly makes it easy to create, manage, and analyze your shortened URLs.
- URL Shortening - Convert long URLs into short, shareable links
- Custom Aliases - Create memorable custom short URLs (e.g.,
short.ly/my-link) - Persistent Storage - All data is saved locally and persists between sessions
- QR Code Generation - Generate scannable QR codes for any shortened URL
- Title/Labels - Assign custom titles to organize your URLs
- Edit Titles - Update URL titles after creation
- Delete URLs - Remove URLs you no longer need
- Search & Filter - Quickly find URLs by title, long URL, or short code
- Date Filtering - Filter URLs by creation date (today, this week, this month, all time)
- Export Data - Download all your URLs as JSON for backup or analysis
- Total URLs - Track how many URLs you've created
- Total Clicks - See cumulative click counts across all URLs
- Clicks Today - Monitor recent engagement
- Average Clicks - Understand typical URL performance
- Top Performing URLs - View your top 10 most-clicked links
- Recent Activity - See the latest 5 clicked URLs with timestamps
- Click History - Detailed tracking of when each URL was accessed
- Node.js (v14 or higher)
- npm or yarn package manager
- Clone the repository
git clone https://github.com/SYOP200/short-ly-url-shortener.git
cd short-ly-url-shortener- Install dependencies
npm install
# or
yarn install- Start the development server
npm start
# or
yarn start- Open your browser and navigate to
http://localhost:3000
- Navigate to the "Shorten" tab
- Enter an optional title for easy identification
- Paste your long URL
- (Optional) Enter a custom alias instead of a random code
- Click "Shorten" to create your short URL
- Copy: Click the copy icon next to any short URL
- QR Code: Click the QR code icon to generate a scannable code
- Edit Title: Click the pencil icon to rename a URL
- Delete: Click the trash icon to remove a URL
- Simulate Click: Test the analytics by clicking "Simulate Click"
Switch to the "Analytics" tab to see:
- Overview statistics in cards at the top
- Top performing URLs ranked by clicks
- Recent activity showing latest interactions
Use the search bar to find URLs by:
- Title
- Short URL
- Original long URL
Use the date filter dropdown to show:
- All time
- Today
- This week
- This month
Click the "Export" button to download all your URLs as a JSON file for backup or analysis.
- React - Frontend framework
- Lucide React - Icon library
- Tailwind CSS - Utility-first CSS framework
- Web Storage API - For persistent data storage
- QR Server API - For QR code generation
short-ly-url-shortener/
├── src/
│ ├── components/
│ │ └── URLShortener.jsx # Main application component
│ ├── App.js
│ └── index.js
├── public/
├── package.json
└── README.md
Short.ly features a modern, minimalist design with:
- Black background (#000000) for reduced eye strain
- Grey highlights for subtle contrast
- Smooth transitions for better user experience
- Responsive layout that works on all devices
- Intuitive interface for easy navigation
All data is stored locally using the Web Storage API. This means:
- ✅ No server required
- ✅ Fast access to your data
- ✅ Privacy-focused (data stays on your device)
⚠️ Data is tied to your browser (use export for backup)
Short.ly respects your privacy:
- All data is stored locally on your device
- No tracking or analytics sent to external servers
- No user accounts or authentication required
- Export your data anytime
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Add bulk URL import functionality
- Implement URL expiration dates
- Create browser extension
- Add password protection for URLs
- Implement URL categories/tags
- Add more detailed analytics graphs
This project is licensed under the MIT License - see the LICENSE file for details.
Your Name - @yourhandle
Project Link: https://github.com/SYOP200/short-ly-url-shortener
- Lucide Icons for the beautiful icon set
- Tailwind CSS for the utility classes
- QR Server API for QR code generation
- Inspired by modern URL shortening services
⭐ Star this repository if you find it helpful!
- QR codes require internet connection to generate
- Custom aliases are case-sensitive
- Large exports may take a moment to process
- Add URL analytics graphs
- Implement URL categories
- Add dark/light theme toggle
- Create mobile app version
- Add URL validation and preview
- Implement URL sharing features
Made with ❤️ and React