Geartable UI design

geartable-ui-design.md

Idea is to have a UI (minimal)

That gets the job done (for now)

Using TailwindCSS (with Dark-mode support)

Configured in CakePHP (mono-repo setup)

Avoiding CORS (again, for now)

Pages:

1. Login page - having only "GitHub" social login (for now)
   Consider a blank page (minimalist) with the text "Geartable" and right below that a button that says "Login with GitHub"

2. Logged in page for content "none"

   1. Tell the user what is this void (assuming it is a first-time/no-experience user)
   2. Prompt / highlight the area from where a "Spreadsheet's link" (or just the ID) could be added.
   3. Even if the added string is the URL/Link - extract the ID and show it to the user (bold/highlight/border/fancy/shiny etc)
   4. If the spreadsheet is not accessible, then show an error message that required access is missing
   5. Ask the user to add the "app-email" (show it somewhere on the screen, along with "copy" icon) with "read" access (at the very least)
   6. If the sheet is added with a "green" (success) message, then redirect to the sheet detail page (and show further option to add Range to generate APIs)

3. Logged in page for content "One or more" sheets available

   1. Show the list of sheets to the user, with "Name" (not the full ID or URL) of the sheet
   2. Show (in the same list) the number of APIs available for the sheet
   3. On hover (or click) show "all APIs" of the sheet (redirect to the "Sheet detail" page/component/section)
   4. Pagination, search etc at the top and bottom of the listing
   5. Show as much content on this listing page as feasible, without becoming "too-much-cluttered"

4. A floating "Add New" or just a "+" sign at the bottom-right side of the page

   1. Sheet - should take the user to the "Add new sheet" section
   2. API - should take the user to the "Add new API" section, witha drop-down asking to select an existing Sheet, and a small button titled "Add new sheet" (taking the user to "Add new sheet" section)

5. New API creation section should prompt for a "Range", and then immediately show the Sheet data (for that range) in a "preview" section - only if the data is relatively small (say 10/20 records).

6. Show the URL of the API to the user and ask the user to copy it

7. Show a clearly visible "Logout" button

Login section:

When there is nothing on the dashboard (after logging in), then we can start by adding a new sheet

And when there is "some" sheet data added already, then the dashboard looks like following:

Adding a new API needs some extra fields: