TinyGo is a modern URL shortener application designed to simplify sharing long URLs. It features a robust backend built with Spring Boot 3 and a sleek, responsive frontend powered by React and Vite. TinyGo provides a seamless experience for shortening URLs, tracking click events, generating QR codes, and managing user accounts with real-time analytics.
- URL Shortening: Generate short, memorable URLs with advanced CRC32-based algorithm
- QR Code Generation: Create downloadable QR codes for shortened URLs for easy mobile sharing
- User Authentication: Secure user registration and login with JWT-based authentication
- Advanced Analytics Dashboard: Visualize click data with interactive charts and comprehensive statistics
- Click Tracking: Monitor click events and analytics for each shortened URL with time-based analysis
- Smart Rate Limiting: Configurable rate limiting system to prevent abuse (15 URLs per minute)
- Real-time Copy to Clipboard: One-click copy functionality with visual feedback
- Beautiful Animations: Smooth, responsive UI animations using Framer Motion
- Mobile-Optimized Design: Fully responsive UI built with Tailwind CSS
- Spring Boot 3 Backend: Secure and scalable Java-based RESTful API with latest features
- React 18 Frontend: Modern UI built with React, Vite, and Tailwind CSS
- JWT Authentication: Stateless, secure token-based authentication system
- Redis Caching: Performance optimization with Redis for high-throughput URL resolution
- MySQL Database: Scalable persistence for storing URL mappings and detailed analytics
- Docker Support: Multi-stage build containerization for optimized deployment
- Chart.js Integration: Beautiful, interactive data visualization components
- Comprehensive Error Handling: Detailed error feedback throughout the application
- CORS Security: Properly configured cross-origin resource sharing policies
The landing page features a modern, animated design with floating elements and smooth transitions. It showcases the core features of TinyGo with eye-catching gradients and a prominent call-to-action button.
Key Elements:
- Animated background using Framer Motion
- Feature cards with custom gradients
- URL shortener animation demonstration
- Responsive navigation with mobile menu
The authentication system provides a secure and user-friendly login/registration experience with:
- Form validation using React Hook Form
- Password strength indicators
- JWT token-based authentication
- Persistent user sessions
- Error feedback with toast notifications
The comprehensive dashboard provides users with a complete overview of their shortened URLs and analytics:
- Summary statistics cards (total links, clicks, etc.)
- Interactive click analytics graph using Chart.js
- Sortable and filterable URL listing table
- Detailed click metrics for each URL
- Quick-action buttons for copy, QR code, and delete operations
The URL creation interface features:
- Real-time URL validation
- Dynamic rate limit status indicator
- Animated success feedback
- Mobile-optimized input fields
- Keyboard shortcut support
The QR code generation system provides:
- High-quality, customizable QR codes
- Modal overlay display with backdrop blur
- Download options in multiple formats
- Dynamic URL preview
- Keyboard accessibility
The analytics features include:
- Daily click trends visualization
- Automatic data refresh
- Date range filtering
- Responsive chart layout
- CSV export capability
The rate limiting system includes:
- Visual countdown timer for rate limit reset
- Dynamic progress indicator
- Remaining requests counter
- Automatic status refresh
- User-friendly explanations
- Framework: Spring Boot 3.x with Spring Security
- Language: Java 17+
- Database: MySQL 8+ for persistent storage
- Caching: Redis for high-performance URL resolution
- Security: JWT authentication, BCrypt password encoding
- Build Tool: Maven
- API Documentation: Swagger/OpenAPI with interactive UI
- Containerization: Docker multi-stage build
- Framework: React 18 with function components and hooks
- Build Tool: Vite with optimized production builds
- CSS Framework: Tailwind CSS with custom utility extensions
- State Management: Context API with custom hooks
- HTTP Client: Axios with request/response interceptors
- Routing: React Router v6 with protected routes
- Forms: React Hook Form for validation and submission
- Charts: Chart.js with custom styling
- Animations: Framer Motion for UI transitions
- Icons: React Icons library
- Notifications: Custom toast notification system
TinyGo follows a modern microservices-inspired architecture:
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ React UI │────▶│ Spring Boot│────▶│ MySQL │
│ (Frontend) │◀────│ (API) │◀────│ Database │
└─────────────┘ └─────────────┘ └─────────────┘
│
│
┌─────▼─────┐
│ Redis │
│ Cache │
└───────────┘
- Frontend: Single-page application built with React
- Backend API: RESTful services built with Spring Boot
- Database: MySQL for persistent storage
- Cache: Redis for high-performance caching
- MVC Pattern: Clear separation of models, views, and controllers
- Repository Pattern: Data access abstraction
- Service Layer: Business logic encapsulation
- DTO Pattern: Data transfer between layers
- Factory Pattern: Object creation abstraction
The project follows a clean, modular structure:
TinyGo/
├── Backend/
│ ├── src/
│ │ ├── main/
│ │ │ ├── java/com/url/shortener/
│ │ │ │ ├── controller/ # API endpoints
│ │ │ │ │ ├── AuthController.java # Authentication endpoints
│ │ │ │ │ ├── UrlMappingController.java # URL management
│ │ │ │ │ └── RedirectController.java # URL redirection
│ │ │ │ ├── dtos/ # Data transfer objects
│ │ │ │ ├── exception/ # Custom exception handlers
│ │ │ │ ├── models/ # JPA entity classes
│ │ │ │ │ ├── User.java # User entity
│ │ │ │ │ ├── UrlMapping.java # URL mapping entity
│ │ │ │ │ └── ClickEvent.java # Click tracking entity
│ │ │ │ ├── repository/ # Data access layer
│ │ │ │ ├── security/ # Authentication config
│ │ │ │ │ ├── jwt/ # JWT implementation
│ │ │ │ │ ├── WebSecurityConfig.java # Security configuration
│ │ │ │ │ └── CorsConfig.java # CORS configuration
│ │ │ │ ├── service/ # Business logic
│ │ │ │ │ ├── UrlMappingService.java # URL shortening logic
│ │ │ │ │ ├── RateLimiterService.java # Rate limiting implementation
│ │ │ │ │ ├── UserService.java # User management
│ │ │ │ │ └── QRCodeService.java # QR code generation
│ │ │ │ └── UrlShortenerSbApplication.java
│ │ │ ├── resources/
│ │ │ │ ├── application.properties # Configuration properties
│ ├── Dockerfile # Multi-stage Docker build
│ └── pom.xml # Maven dependencies
├── Frontend/
│ ├── src/
│ │ ├── api/ # API client configuration
│ │ ├── components/ # Reusable UI components
│ │ │ ├── Navbar.jsx # Navigation component
│ │ │ ├── QRCodeGenerator.jsx # QR code generation
│ │ │ ├── RateLimitStatus.jsx # Rate limit indicators
│ │ │ └── UrlShortenerAnimation.jsx # Visual animations
│ │ ├── contextApi/ # Context for state management
│ │ ├── hooks/ # Custom React hooks
│ │ │ ├── useQuery.js # Data fetching hooks
│ │ │ └── useRateLimit.js # Rate limit hooks
│ │ ├── pages/ # Page components
│ │ │ ├── Dashboard/ # Dashboard components
│ │ │ │ ├── DashboardLayout.jsx # Main dashboard layout
│ │ │ │ ├── Graph.jsx # Analytics visualization
│ │ │ │ └── ShortenUrlList.jsx # URL management
│ │ │ ├── LandingPage.jsx # Homepage
│ │ │ └── Loginpage.jsx # Authentication
│ │ ├── utils/ # Utility functions
│ │ │ ├── helper.js # Helper utilities
│ │ │ └── toast.js # Notification system
│ │ └── App.jsx # Main application component
│ ├── public/ # Static assets
│ ├── package.json # NPM dependencies
│ └── vite.config.js # Vite build configuration
└── README.md # Project documentation
POST /api/auth/public/register- Register a new user with validationPOST /api/auth/public/login- Authenticate and generate JWT token
POST /api/urls/shorten- Create a shortened URL (rate-limited)GET /api/urls/myurls- Get all URLs for the current userGET /api/urls/analytics/{shortUrl}- Get detailed analytics for a URLGET /api/urls/total-clicks- Get aggregated click statisticsGET /api/urls/check/{shortUrl}- Check if a short URL existsGET /api/urls/qrcode/{shortUrl}- Generate QR code for a URLGET /api/urls/rate-limit-status- Get current rate limit statusDELETE /api/urls/{shortUrl}- Delete a shortened URL
GET /{shortUrl}- Redirect to the original URL with click trackingHEAD /{shortUrl}- Check URL validity without incrementing counter
TinyGo implements Redis caching for high-performance URL resolution:
- Cached URL mappings for fast lookups
- Optimized for high-traffic scenarios
- Graceful fallback to database on cache miss
- Configurable cache expiry
Sophisticated rate limiting to prevent abuse:
- Configurable request limits (15 URLs per minute by default)
- Per-user tracking with in-memory storage
- Countdown timer for rate limit reset
- Detailed rate limit status information
Efficient click tracking with deduplication:
- Time-based deduplication to prevent click spam
- Batch processing for high-volume scenarios
- Asynchronous event recording for performance
- Detailed analytics without performance penalty
- Java 17 or higher
- Node.js 16 or higher
- MySQL 8.0 or higher
- Redis (optional, for caching)
- Docker (optional, for containerized deployment)
-
Clone the repository:
git clone https://github.com/yourusername/TinyGo.git cd TinyGo/Backend -
Configure the database:
- Create a MySQL database for TinyGo
- Create a
.envfile in the Backend directory with the following variables:DATABASE_URL=jdbc:mysql://localhost:3306/tinygo DATABASE_USERNAME=your_username DATABASE_PASSWORD=your_password DATABASE_DIALECT=org.hibernate.dialect.MySQLDialect JWT_SECRET=your_jwt_secret_key FRONTED_URL=http://localhost:5173
-
Build and run the backend:
./mvnw clean install ./mvnw spring-boot:run
The backend will be available at
http://localhost:8080
-
Navigate to the frontend directory:
cd TinyGo/Frontend -
Install dependencies:
npm install
-
Configure environment variables:
- Create a
.envfile with:VITE_BACKEND_URL=http://localhost:8080 VITE_REACT_FRONT_END_URL=http://localhost:5173
- Create a
-
Start the development server:
npm run dev
The frontend will be available at
http://localhost:5173
TinyGo can be containerized for easy deployment:
# From the Backend directory
docker build -t tinygo-backend .
docker run -p 8080:8080 \
-e DATABASE_URL=jdbc:mysql://your-db-host:3306/tinygo \
-e DATABASE_USERNAME=your_username \
-e DATABASE_PASSWORD=your_password \
-e DATABASE_DIALECT=org.hibernate.dialect.MySQLDialect \
-e JWT_SECRET=your_jwt_secret_key \
-e FRONTED_URL=http://localhost \
tinygo-backend# From the Frontend directory
docker build -t tinygo-frontend .
docker run -p 80:80 \
-e VITE_BACKEND_URL=http://your-backend-url \
-e VITE_REACT_FRONT_END_URL=http://your-frontend-url \
tinygo-frontend- Hot reload: The Spring Boot application has dev tools enabled for hot reloading
- Testing: Run tests with
./mvnw test
- Hot module replacement: Vite provides fast hot reloading
- Build for production:
npm run build - Linting:
npm run lint - Analyze bundle:
npm run analyze
TinyGo implements several security measures:
- JWT token-based authentication with secure token storage
- Password hashing using BCrypt with salt
- HTTPS support for secure communication
- CORS configuration to prevent cross-site request forgery
- Rate limiting to prevent abuse
- Input validation for all API endpoints
Planned features for future releases:
- Custom domain support for shortened URLs
- Advanced user roles and permissions
- Social media integration
- URL expiration dates
- Bulk URL creation
- Browser extensions
- Dark mode UI
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.