Design Rebuilds

While Coast's gallery UI templates will get you to value quickly, you can redesign any UI from scratch, with the Coast designer. The following videos show a start-to-finish process of building some well-known UIs in Coast. To follow along, we have attached the payloads used to power the UIs beneath each video.

Spotify Rebuild

Difficulty: Medium

Spotify JSON

{
  {
  "libraryData": [
    {
      "name": "Liked Songs",
      "imageURL": "https://i1.sndcdn.com/artworks-y6qitUuZoS6y8LQo-5s2pPA-t500x500.jpg"
    },
    {
      "name": "Ed Sheeran",
      "imageURL": "https://i.scdn.co/image/ab6761610000e5eb9e690225ad4445530612ccc9"
    },
    {
      "name": "Midnights",
      "imageURL": "https://snworksceo.imgix.net/ohi/35f89c95-b150-446c-a6f7-161bdf3ca33f.sized-1000x1000.png?w=1000"
    },
    {
      "name": "Kendrick Lamar",
      "imageURL": "https://i.scdn.co/image/ab6761610000e5eb437b9e2a82505b3d93ff1022"
    },
    {
      "name": "Let It Bleed",
      "imageURL": "https://m.media-amazon.com/images/I/81Ut0SKKVhL._UF1000,1000_QL80_.jpg"
    },
    {
      "name": "1989",
      "imageURL": "https://i.scdn.co/image/ab67616d0000b273b7e976d2b35c767f9012cb72"
    }
  ],
  "jumpBackIn": [
    {
      "imageURL": "https://pbs.twimg.com/media/FEtJzeYWYAE12hO.jpg"
    },
    {
      "imageURL": "https://i.scdn.co/image/ab67706f000000021ef0eefc47cf450885050698"
    },
    {
      "imageURL": "https://i.scdn.co/image/ab67706f00000002ffa215be1a4c64e3cbf59d1e"
    }
  ],
  "yourShows": [
    {
      "imageURL": "https://media.npr.org/assets/img/2016/09/02/hibt_podcast_tile_sq-8d9498b292dc7a759bf4b7fc776dfe0e4c09da68.png"
    },
    {
      "imageURL": "https://i.scdn.co/image/1b5af843be11feb6c563e0d95f5fe0dad659b757"
    },
    {
      "imageURL": "https://i.scdn.co/image/ab67656300005f1f863cc2d69ef7958af5cca4b5"
    }
  ]
}
}

UberEats Rebuild

Difficulty: Medium

UberEats JSON

{
  "restaurants": [
    {
      "stock_photo": "",
      "name": "Pizza Hut",
      "delivery_fee": 2.99,
      "rating": 8.5,
      "category": "Pizza"
    },
    {
      "stock_photo": "",
      "name": "Chipotle",
      "delivery_fee": 3.99,
      "rating": 9,
      "category": "Tacos"
    },
    {
      "stock_photo": "",
      "name": "Panda Express",
      "delivery_fee": 4.99,
      "rating": 7.5,
      "category": "Noodles"
    },
    {
      "stock_photo": "",
      "name": "Subway",
      "delivery_fee": 1.99,
      "rating": 8,
      "category": "Sandwhich"
    },
    {
      "stock_photo": "",
      "name": "Five Guys",
      "delivery_fee": 5.99,
      "rating": 9.5,
      "category": "Burger"
    }
  ]
}

Revolut Rebuild

Difficulty: Medium

Revolut JSON

{
  "transactions": [
    {
    "description": "Starbucks",
    "amount": 5.99,
    "date": "2023-08-02",
    "merchantLogo": "https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/800px-Starbucks_Corporation_Logo_2011.svg.png"
  },
  {
    "description": "Chipotle",
    "amount": 12.99,
    "date": "2023-08-02",
    "merchantLogo": "https://upload.wikimedia.org/wikipedia/en/thumb/3/3b/Chipotle_Mexican_Grill_logo.svg/1200px-Chipotle_Mexican_Grill_logo.svg.png"
  },
  {
    "description": "Gas from Shell",
    "amount": 25.99,
    "date": "2023-08-02",
    "merchantLogo": "https://upload.wikimedia.org/wikipedia/en/thumb/e/e8/Shell_logo.svg/1200px-Shell_logo.svg.png"
  },
  {
    "description": "Safeway",
    "amount": 59.99,
    "date": "2023-08-01",
    "merchantLogo": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRXgYHj0D6aRPraG-kGD1Xgdn_7SljVlefUpIg5YTSvg&s"
  },
  {
    "description": "AMC",
    "amount": 29.99,
    "date": "2023-08-02",
    "merchantLogo": "https://www.freepnglogos.com/uploads/amc-png-logo/amc-theatres-png-logo-0.png"
  }
  ]
}

Binance Rebuild

Difficulty: Easy