URL Shortener Dashboard
Build a modern URL shortener dashboard based on the provided design. The interface should include a branded header, hero heading, URL input section, clipboard toggle, usage notice, theme switch area, and a data table showing shortened links with metadata such as original URL, QR code, clicks, status, and date. Use HTML for structure, CSS for styling, JavaScript for interactivity, and an API to generate or manage shortened links dynamically. Users should be able to submit long URLs, receive shortened URLs, copy results, and view rendered link history in the dashboard. You may use a public shortening API or a mock/local API layer for the challenge. The final result should focus on polished dark UI, clean table layout, link actions, and responsive design.
Attention
This challenge does NOT include downloadable assets.
You are expected to:
- Use your own images, icons, and resources when needed
- Recreate the design based on the provided Figma file
- Respect the main brand identity, colors, logo, and key visual elements
- Keep the overall UI structure, layout flow, and important sections consistent with the design
You are NOT required to use the exact same images, text content, or placeholder data from the original design.
Your focus should be on:
- Brand colors
- Logo usage
- Layout structure
- Spacing and alignment
- UI architecture
- Required functionality
Minor differences in content, images, or displayed data are acceptable, but the overall visual identity and core design direction should remain clearly consistent with the challenge.
Project Requirements
- Build the full URL shortener dashboard based on the provided design
- Use semantic HTML5 structure
- Style the full interface using CSS
- Use JavaScript for interactive dashboard behavior
- Integrate an API for shortening URLs or use mock API data
- Create a branded top header with action buttons
- Build a hero section with heading and supporting text
- Create a URL input bar with submit button
- Allow users to enter a long URL and generate a short link
- Add a clipboard toggle UI element
- Display a usage or trial notice section
- Create a theme switch area such as dark/light selector
- Build a table showing short link, original link, QR code, clicks, status, and date
- Render link data dynamically using JavaScript
- Allow users to copy shortened links
- Display link status such as active or inactive
- Add hover and active states for buttons, rows, and controls
- Make the page responsive for tablet and mobile devices
- Keep code clean and organized across HTML, CSS, and JavaScript files
Ready to submit your solution?
Upload your project for mentor review and showcase your structure, polish, and implementation quality.
Login Required
You need to be logged in to submit your solution for this challenge.