Template Project

A simple, working example of the required form pattern. Use this as a reference.

ActionableAdvice Project

This is the active project. Start your work here.

→

Component Design Sandbox

Goal: Isolated and modular component design.

We will have a sandbox for component design. It is important for developers to follow directions EXACTLY to make sure we can easily drop this component and have it work the same way on production.

Design Parameters

Please note: Code delivery will be rejected if it doesn’t follow these parameters.

  1. Self-contained: Everything needs to be contained in one folder (subfolders are acceptable). The folder must be named using UpperCamelCase (e.g., ComponentName).
  2. Technical Stack & Standards: All components must adhere to the following unless a specific, pre-approved exception is granted.
    1. a. Server-Side by Default: We use Next.js App Router. Components must be React Server Components. Do not use the "use client" directive unless explicitly required.
    2. b. TypeScript: We enforce a strict linter. No linter errors or any types will be accepted.
    3. c. Clarity and Naming: Code must be clean and well-commented. Use long, descriptive variable names. The code should be immediately understandable.
    4. d. Styling: Use Tailwind CSS exclusively. No third-party styling libraries are permitted.
    5. e. No External Libraries: Do not add or modify package.json.
    6. f. No Global Dependencies: Components must be fully self-sufficient and not rely on global variables or styles.
    7. g. Relative Imports Only: Do not use aliased imports like @/.
    8. h. No Image Files: All images are either SVGs embedded directly or served from our CMS.
    9. i. Folder Conventions: Follow the specified folder structure. For simple projects, a single file <ComponentName.tsx> is expected.
    10. j. Responsive Design: Display/work reasonably well on mobile as well as desktop.
  3. Required File Header: Every file must begin with these lines, with the version incremented on every change.
    // app/settings/consult/projp/actionable-advice-proj/components/ActionableAdvice.tsx
// version: 1
// author: [name of developer/company]

Process

  1. Specifications for a project/component are delivered, questions answered (ideally all async via email/slack).
  2. You host the provided sandbox project and get it working per specs, handling corner cases (error state, no data state, really short text/data, really long data, etc.).
  3. Get approval from Ben/Designers, iterate as needed.
  4. Get approval from Max (that it meets the above conditions).
  5. Deliver the folder/file to Max via email/slack.
  6. Max will test and drop onto production and that version gets released - any future changes will be a new version and a new folder/file is delivered.