Skip to content

Instantly share code, notes, and snippets.

@braden-w

braden-w/tasks.md

Last active October 19, 2023 19:44
Show Gist options
  • Save braden-w/9fe81f4b027fc9277dba8f4bbe588e98 to your computer and use it in GitHub Desktop.
Save braden-w/9fe81f4b027fc9277dba8f4bbe588e98 to your computer and use it in GitHub Desktop.
Download ZIP
Tasks for EcoPackables
Raw
tasks.md

Introduction

Your Job is to Provide UI Mockups of the EcoPackables Enterprise Dashboard, inspired by the design system of ShadCN UI and the provided Figma designs and existing routes.

Step 1: Understanding the Dashboard Routes

  • Familiarize yourself with the provided Figma designs. Here are the routes in question:
    • Home - which will correspond to /enterprise/dashboard
    • Clients - which will correspond to /enterprise/dashboard/clients
    • Messages - which will correspond to /enterprise/dashboard/messages
    • Products - which will correspond to /enterprise/dashboard/products
    • Quotes - which will correspond to /enterprise/dashboard/quotes
    • Orders - which will correspond to /enterprise/dashboard/orders
    • Files - which will correspond to /enterprise/dashboard/files

Step 2: Scaffolding /enterprise/dashboard

CleanShot 2023-10-17 at 23 02 14@2x

  • Use the current product's /dashboard and its other routes as your primary inspiration.

Step 3: Scaffolding /enterprise/dashboard/clients

  • For this, create a data table using ShadCNN.
  • Employ best practices to match the scaffolded layout. CleanShot 2023-10-17 at 23 02 22@2x

Step 4: Scaffolding /enterprise/dashboard/messages

  • Design a list or list items for messages.
  • Use the Messages component in the slash dashboard route for inspiration. CleanShot 2023-10-17 at 23 02 26@2x

Step 5: Proceeding with Other Routes under /enterprise/dashboard

  • If you get to here, talk to Braden before proceeding.
  • After completing the above routes, continue to scaffold:
    • Products CleanShot 2023-10-17 at 23 02 31@2x
    • Quotes CleanShot 2023-10-17 at 23 02 36@2x
    • Orders CleanShot 2023-10-17 at 23 02 41@2x
    • Files CleanShot 2023-10-17 at 23 03 09@2x

Most importantly, keep in touch with Braden throughout for answering questions. This document is noncomprehensive

Section 2: Design Guidelines and Resources

Incorporating ShadCN TailwindCSS Design Inspiration

Resource 1: ShadCN UI's Documentation

Feel free to copy and paste from these as needed

Resource 2: ShadCN's Taxonomy Project

  • Investigate the Taxonomy Project that utilizes ShadCN's components in a real-world setting.
  • Browse the project here: Taxonomy Project
  • Review the GitHub repository: Taxonomy GitHub Repo

Feel free to copy and paste from these as needed

@braden-w
Copy link
Author

Some extra pointers for the other routes:

  • for /products, take inspiration from the categories section listed in the / and /categories . this should hopefully reduce time you spend coding 
  • for /quotes, you are making a data table. The four cards on the top are clickable
    • (for reference) when clicked, the four cards will make the table filter down to only the rows that say "RFQ to Review", "RFQs Sent", "RFQs Returned", "Quote Sent"
  • the same applies for /orders
  • for /files, the design of the list can either be inspired from your previous design, or could also be another data table. If you are comfortable making data tables, a data table would be preferred

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment