Gr8r Studio

A calm, structured project management workspace: home dashboard, inbox, my tasks, projects with board / list / table / calendar / timeline / files views, members, teams, activity and settings.

Built with plain JavaScript ES modules and CSS, bundled by Vite. There is no UI framework and no runtime dependency.

Getting started

Requires Node.js 18 or newer (.nvmrc pins 22).

npm install
npm run dev       # http://localhost:5173 with hot reload
npm run build     # production build in dist/
npm run preview   # serve the production build locally
npm run lint      # ESLint
npm run format    # Prettier

Project structure

index.html              HTML entry; loads src/main.js
public/favicon.svg      brand mark
vite.config.js          Vite config, including the Lucide icon-subset plugin
eslint.config.js        lint rules (ESLint flat config); formatting by Prettier (.prettierrc.json)
.github/workflows/      CI: lint, format check, build
docs/preview.png        README screenshot
src/
  main.js               entry: imports styles and modules, then boots the app
  styles/
    index.css           imports every stylesheet in cascade order
    tokens.css          colours, spacing, type, radius, the shared --gutter
    base.css  components.css  shell.css  panels.css  overlays.css  states.css  motion.css  responsive.css
    views/              list, board, table, calendar, timeline, projects & files
    pages/              settings, auth & onboarding
  core/                 utilities, constants, icons, store (state + lookups), theme
  data/seed.js          demo workspace data
  ui/                   shared render helpers, toasts, the select dropdown
  shell/                render loop and router, sidebar/topbar layout, skeletons, view engine
  components/           task list renderer
  pages/                one module per route
  views/                project views: board, table, calendar, timeline, files, overview
  overlays/             task drawer, modals, popovers, context menu, command palette
  features/             teams, subtasks, archive (rendering)
  actions/              user actions, event wiring, keyboard shortcuts, drag and drop

Layers

Dependencies point downward:

1. core/ and data/ depend on nothing else in the app.
2. ui/, shell/, components/, pages/, views/, overlays/ and features/ render HTML from state.
3. actions/ change state and re-render. Each action module registers its handlers on the shared action table (A) when it loads, so main.js imports them after actions/actions.js.

Conventions

• Rendering: each page or view is a function that returns an HTML string from the store (S). render() rebuilds the shell and keeps focus and scroll positions.
• Interactions: elements declare data-a="actionName". actions/events.js delegates the click to A.actionName. Inputs use data-in, blur handlers use data-blur.
• Layout: every page edge uses var(--gutter), so the breadcrumb, page header, toolbar, list, table and board start on the same line.
• Dropdowns: write a normal <select class="select">. ui/select.js renders it as the design-system menu and keeps the native element as the source of truth.
• Icons: call ic('name') with any Lucide icon name. The virtual:icons plugin bundles only the icons the source uses.

Continuous integration

Every push and pull request runs lint, the format check and a production build (.github/workflows/ci.yml).

Deploy

vercel.json builds with Vite and serves dist/.