RanDesign

Chenran's Frontend Design Challenge

GitHub

About the Project

Hi 👋 I'm Chenran, and this is my frontend design challenge project. I'm embarking on a 50-day journey, with a new design challenge every day, showcasing different UI components and layout techniques. Through this project, I aim to improve my frontend skills while providing inspiration and reference for other learners.

Latest Challenges

Day 13: Try for Free Button

View Day 13 →

Day 12: Tool Bar

3
Selected
View Day 12 →

Day 11: Voice Chat

View Day 11 →

Day 10: Temperature Slider

50°C
View Day 10 →

Day 9: Interactive Dashboard

Spherenet

👋 Welcome back, Stefan!

Total employees

141

New hires

20

Leave requests

13

Upcoming meetings 4

  • SEP
    5
    Sprint review
    9 AM
    👨🏽
    👩🏻
    👨🏿
    👩🏼
    +2
  • SEP
    5
    Chris ↔ Stefan (1:1)
    11 AM
    🧑🏽
  • SEP
    5
    Weekly sync
    3 PM
    👨🏽
    🧔🏽
    👩🏻
  • SEP
    8
    Workshop
    9:30 AM
    👨🏽
    👩🏻
    🧕🏽
    👩🏼
    +3
View Day 9 →

Day 8: Tag Input

  • Sorry, We couldn't find any results.
View Day 8 →

Day 6: Transcribe

English
View Day 6 →

Day 7: Animated Button

View Day 7 →

Day 5: Settings UI

View Day 5 →

Day 4: File Upload

View Day 4 →

Day 3: Command Menu

Create Task
Partners
⌘R
Note Template
In Commands
⌘↩
Add Person
Partners
⌘T
Manage attributes
In Commands
⌘H
Create List
Organization
⌘L
Advanced Search
Tools
⌘F
Team Management
Partners
⌘M
Keyboard Shortcuts
Help
⌘/
☀️Good Morning
66 F and Sunny
📅Next Agenda
Weekly Team Catchup
to navigate
to select
View Day 3 →

Day 1: Card Design

Villa Banovi

Villa Banovi

$224/night

Rating

Vinjerac, Croatia

View Day 1 →

Day 2: Interactive Button

View Day 2 →

Daily Challenges

Day 1: Card Design

Explore modern card design, blending aesthetics and functionality.

Day 2: Interactive Button

Create an engaging, animated button with hover effects.

Day 3: Command Menu

Create an interactive command menu with search functionality.

Day 4: File Upload

Create an interactive file upload component with a progress bar.

Day 5: Settings UI

An interactive settings component that allows users to adjust dimensions using sliders.

Day 6: Transcribe

A dynamic speech-to-text transcription component that simulates real-time voice recognition.

Day 7: Animated Button

An interactive animated button component that transitions from 'Doing' to 'Completed' state.

Day 8: Tag Input

An interactive tag input component that allows users to add and remove tags.

Day 9: Interactive Dashboard

An interactive dashboard layout featuring a responsive sidebar and a main content area.

Day 10: Temperature Slider

An interactive temperature slider component that allows users to adjust temperature within a given range.

Day 11: Voice Chat

An interactive voice chat component that allows users to chat with the AI.

Day 12: Tool Bar

An interactive toolbar component that displays selected items and provides quick actions. This component showcases the use of tooltips, icons, and responsive design to create a user-friendly interface for managing selected items efficiently.

Day 13: Try for Free Button

A 'Try for Free' button with an animated hover effect. This component demonstrates the use of Framer Motion for smooth animations, React Icons for visual elements, and responsive design. The button expands and rotates its arrow icon on hover, providing an engaging user interaction.

Project Inspiration

This project draws inspiration from the incredible work of a Twitter user who consistently shares their progress in mastering Tailwind CSS and Framer Motion for dynamic design effects. Their commitment to #BuildInPublic has been truly inspiring, motivating me to embark on this journey of daily UI challenges.

Follow along with their journey and get inspired to create your own amazing designs!

About

Like this project? Give it a star on GitHub or follow the project progress on Twitter!

GitHubTwitter