This project is a URL shortener service that allows users to create shortened links for long URLs.
- Shorten long URLs to compact, shareable links
- Generate QR codes for shortened links
- Track click statistics for shortened links
- Display location and device data for link clicks
The homepage advertises the service as "The only URL Shortener you'll ever need!"
Users can log in to existing accounts or sign up for new ones.
The main dashboard shows existing shortened links, their QR codes, and options to create new links.
Detailed statistics are provided for each shortened link, including total clicks, location data, and device information.
- Enter the long URL you wish to shorten
- (Optional) Customize the shortened link
- Click "Create" to generate your shortened URL
- Share your shortened link or use the generated QR code
- React: A JavaScript library for building user interfaces
- React Router: For handling routing in the application
- Supabase: A Backend-as-a-Service (BaaS) platform for database and authentication
- Recharts: A charting library for React
- Tailwind CSS: A utility-first CSS framework
- Shadcn UI: A collection of re-usable components built with Tailwind CSS
- Yup: A JavaScript schema builder for value parsing and validation
- UA Parser JS: A library to detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data
- React QR Code Logo: For generating QR codes
- React Spinners: For loading animations
Follow these steps to set up the project locally:
- Clone the repository:
- Install dependencies:
- Set up environment variables:
Create a
.env
file in the root directory and add the following variables: - Start the development server:
- Open your browser and navigate to
http://localhost:5173
to view the application.
- User authentication (signup, login, logout)
- Create shortened URLs
- Custom URL slugs
- QR code generation for shortened URLs
- Dashboard to manage and view statistics for shortened URLs
- Click tracking and analytics (device type, location)
src/components
: React componentssrc/pages
: Page componentssrc/db
: API functions for interacting with Supabasesrc/hooks
: Custom React hookssrc/layouts
: Layout componentssrc/context
: React context for global state management
Contributions are welcome! Please feel free to submit a Pull Request.