IntermediateWeb4-10 hours+200 XPMentor reviewed

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.

url-shortener
dashboard
html
css
javascript
api
dark-ui
analytics
saas
responsive submission method

This challenge doesn't include downloadable assets

Recreate the design from the Figma file using your own images, icons and resources where needed. You are not required to use the exact same images, copy or placeholder data.

You are expected to

Use your own images, icons and resources when needed
Recreate the design based on the provided Figma file
Respect the brand identity, colours, logo and key visuals
Keep the UI structure, layout flow and key sections consistent

Reviewers focus on

0

Completed

—

Average AI review

New here? Read the Tahaddiyat guide to learn the expected structure and submission flow.

Brand colours

Logo usage

Layout structure

Spacing & alignment

UI architecture

Required functionality

Minor differences in content, images or data are fine, but the overall visual identity and design direction should stay clearly consistent with the challenge.

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

Submission

Submit your solution

Share your work for mentor review and showcase your structure, polish and implementation quality.

2 joined

Log in to submit

You need an account to submit your solution and receive mentor feedback.

Log in to submit

Community Discussions

Questions & Answers

Be the first to ask a question about this challenge.

Loading discussions...