https://github.com/abhinandanmishra1/frontend-365
This repository showcases 365 different components of frontend created during 365 days of frontend coding challenge in 2025.
https://github.com/abhinandanmishra1/frontend-365
365daysofcode frontend-365 frontend-components frontend-development nextjs react styled-components tailwindcss
Last synced: about 1 month ago
JSON representation
This repository showcases 365 different components of frontend created during 365 days of frontend coding challenge in 2025.
- Host: GitHub
- URL: https://github.com/abhinandanmishra1/frontend-365
- Owner: abhinandanmishra1
- Created: 2024-12-31T03:11:59.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-04-07T18:09:43.000Z (about 1 month ago)
- Last Synced: 2025-04-07T19:25:19.614Z (about 1 month ago)
- Topics: 365daysofcode, frontend-365, frontend-components, frontend-development, nextjs, react, styled-components, tailwindcss
- Language: TypeScript
- Homepage: https://frontend-365.vercel.app
- Size: 453 KB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
List of 365 UI component ideas that gradually increase in complexity and involve good logic or creativity.
I’ll structure the suggestions by month to align with skill progression
### **Projects by Month**
**January**
1. Button with Hover Effects ✅
2. Custom Checkbox ✅
3. Toggle Switch ✅
4. Accordion Menu ✅
5. Responsive Navbar ✅
6. Simple Modal Popup ✅
7. Tooltip ✅
8. Progress Bar ✅
9. Tabs Component: Implementation 1 ✅
10. Tabs Component: Implementation 2 ✅
11. Star Rating System ✅
12. Image Carousel ✅
13. Dropdown Menu ✅
14. Search Bar with Suggestions ✅
15. Light/Dark Mode Toggle ✅
16. Animated Loader ✅
17. Responsive Card Layout ✅
18. Stepper/Stepper Form ✅
19. Skeleton Loader ✅
20. Sticky Header ✅
21. Password Strength Checker ✅
22. Circular Progress Indicator ✅
23. Custom Range Slider ✅
24. Alert Notification ✅
25. Toast Message ✅
26. Digital Clock ✅
27. Stopwatch ✅
28. Countdown Timer ✅
29. Weather Widget ✅
30. Color Palette Picker ✅
31. Animated SVG Loader ✅
**February**
1. Custom Editable Text Field (ShadCN Input) ✅
2. Dynamic Table with Sort/Filter (ShadCN Table) ✅
3. Custom File Upload Button ✅
4. Multi-Select Dropdown (ShadCN Combobox) ✅
5. Auto-Saving Input Field ✅
6. Collapsible Sidebar (ShadCN Sidebar) ✅
7. Sticky Footer ✅
8. Floating Action Button ✅
9. Flip Card Animation ✅
10. Draggable List Items ✅
11. Custom Select Dropdown with Search (ShadCN Select) ✅
12. Scroll Progress Indicator ✅
13. Image Zoom on Hover ✅
14. Inline Editable Table Row ✅
15. Infinite Scroll List ✅
16. Masonry Grid Layout ✅
17. Image Comparison Slider ✅
18. Scroll Snap Carousel ✅
19. Timeline Component ✅
20. Multi-Step Form with Validation (ShadCN Form) ✅
21. Resizable Panels (ShadCN Resizable) ✅
22. Kanban Board Column ✅
23. Code Editor with Syntax Highlighting ✅
24. Drag-and-Drop File Uploader ✅
25. Chat with Typing Indicator ✅
26. Calendar (ShadCN Calendar) ✅
27. Calendar Date Picker (ShadCN DatePicker) ✅
28. Custom Audio Player Controls ✅
**March**
1. Draggable List Items V2 ✅
2. Custom Slider ✅
3. Video Player with Custom Controls ✅
4. Badge Component ✅
5. Avatar Component ✅
6. Avatar with Badge component ✅
7. File Upload Zone ✅
8. Testimonial Card ✅
9. Authentication Forms ✅
10. Password Input ✅
11. Pagination Items ✅
12. Pin Input ✅
13. Popover ✅
14. Radio Card ✅
15. Tag ✅
16. Textarea ✅
17. Tooltip ✅
18. Toggle Tip ✅
19. Profile Card ✅
20. Timeline View ✅
21. Email Input ✅
22. Number Input ✅
23. Breadcrumb ✅
24. Social Share ✅
25. Social profiles links ✅
26. Password generator app ✅
27. Quiz component ✅
28. QR Code component ✅
29. Github user search app ✅
30. Menu Builder ✅
31. Interactive rating component ✅
**April**
1. Hoverable Dropdown Grid ✅
2. Animated Hamburger Menu ✅
3. Custom Radio ✅
4. Swipeable ✅
5. Dynamic Breadcrumbs ✅
6. Tag Input Field ✅
7. Range Slider with Dual Thumbs ✅
8. Rolling Number ✅
9. Context Menu ✅
10. Custom Scrollbar ✅
11. Input Masking
12. Skeleton Screen for
13. Speech-to-Text Input button + real
14. Color Contrast Checker
15. Animated Checkmark
16. Resizable Textarea
17. Dynamic Pie Chart
18. OTP Input Field
19. Custom Cursor
20. Time Picker
21. Animated Tab
22. Gradient
23. Nested Comments
24. Password Visibility
25. Progress Steps Wizard
26. Heatmap
27. Inline Edit +
28. Custom Video Thumbnail Picker
29. Animated Notification Badge
30. Doughnut Chart with Legend
**May**
1. Drag-to-Reorder
2. Virtualized
3. Custom Sketchpad
4. Live Markdown Preview
5. Collapsible Tree
6. Image Cropper
7. Audio Visualizer
8. Custom
9. Multi-Level Dropdown
10. Animated Sidebar
11. Dynamic Form Fields
12. 3D Card Flip
13. Color
14. Custom Cursor Trail
15. Interactive Map Pin
16. Real-Time Search
17. Custom Select with Images
18. Animated Background
19. Pull-to-Refresh
20. Lazy Loaded Images
21. Step-by-Step Tour
22. Custom Snackbar Queue
23. Radial Progress Indicator
24. Draggable Split View
25. Inline Color Picker
26. Animated Text Typing
27. Custom Video Playlist
28. Dynamic Pie Chart
29. Hover-Based Parallax
30. Timezone Converter
31. Custom Emoji Picker
**June**
1. Interactive SVG Path Animation
2. WebGL Background
3. Real-Time Collaboration
4. Custom Spreadsheet Cell
5. Animated Icon Morphing
6. Voice Command Button
7. Dynamic Bar Chart
8. Customizable Dashboard Widget
9. AR-like Image Tilt
10. Code Diff Viewer
11. Animated Gradient Generator
12. Custom Horizontal Scrolling
13. Neumorphic
14. Interactive Flowchart
15. Live Poll/Voting UI
16. Custom Cursor Chat
17. Image Background
18. Dynamic Word Cloud
19. Multi-Directional Carousel
20. Animated Data Table
21. Custom Shaped Buttons
22. Scroll-Activated
23. Interactive Quiz Progress
24. Custom SVG Chart
25. 3D Hover Effects
26. Real-Time Character Counter
27. Dynamic Icon Generator
28. Accessible Skip Navigation
29. Animated Page Transition
30. Custom QR Code Generator
**July**
1. Advanced Form Builder 👨🏻💻
2. In-browser markdown editor
3. Data Grid Pro
4. Heatmap Tooltip
5. Multi-step Wizard
6. Interactive Calendar