All-Access

Level 5

Color palette inspiration site

Create a library of handpicked color palettes for users to find inspiration for their next project.

Subscribe to download

Overview

Your Challenge is to create a color palette inspiration website. Users should be able to log in with a social provider like Twitter, save and view favorite color palettes, and copy the associated hex, RGB, or HSL color values from the color palette details page.

Your Challenge is complete when:

  • The website is as close to the original design as possible

  • The website is responsive and viewable on multiple screen sizes

  • Elements have the correct state styles (hover, focus, etc.)

  • Users can log in with a social provider of your choice

  • Logged-in users can save and view their favorite color palettes

  • The favorite color palettes page is protected from unauthenticated users

  • Users can copy hex, RGB, or HSL values from the color palette details page

Solutions

Color inspiration site with SvelteKit, Supabase, and Sass

Learn to code by building a stunning color palette inspiration site with SvelteKit, Saas, and Supabase.

SvelteKit

Supabase

Sass

PostgreSQL

What's included

Challenges include all the assets you would expect from a designer in real-world projects, plus some resources to help you complete the Challenge.

  • Organized Figma design file
  • Detailed desktop, tablet, and mobile layouts
  • Comprehensive design system
  • Relevant fonts, colors, SVGs, and images
  • Alternative Solutions from members
  • Straightforward quick-start guide
  • Recommended list of learning resources
  • Access to community Discord channels