gr8r-studio README

The project's README from github.com/gr8rstudio/gr8r-studio. As one markdown file: README.md.

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.

Gr8r Studio home dashboard

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

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/.

gr8r-studio (gr8rstudio/gr8r-studio)

collaboration
Searching Database…

848 ·GitHub
Gr8r-studio
What is this?Gr8r Studio is a calm, structured project management workspace with a home dashboard, inbox, my tasks, projects with board, list, table, calendar, timeline and files views, plus members, teams, activity and settings.
Is this built on a UI framework like React or Vue, or something lighter?It is built with plain JavaScript ES modules and CSS, bundled by Vite. There is no UI framework (no React/Vue) and no runtime dependency at all.
How do I get it running locally?You need Node.js 18 or newer (the project's .nvmrc pins version 22), then run the Vite dev/build scripts to work on or produce the app.
Do I need any npm packages or just Node?Just Node.js for the Vite build tooling - the app itself ships with no runtime dependencies and no UI framework.
Does it have its own backend or database?Not Stated In README - the README only describes the frontend architecture (core/data, ui/shell/pages, actions layers) and how the Vercel deploy serves the built dist/ folder; no server or database is mentioned.
Where does this actually run - do I open it in a browser?Yes, it's a browser-based single-page app; vercel.json builds it with Vite and serves the resulting dist/ folder.
How does rendering and state management work internally?Each page or view is a function that returns an HTML string built from a shared store (S). render() rebuilds the shell while preserving focus and scroll position, and actions mutate state through a shared action table (A) that modules register themselves to on load.
How are clicks and inputs wired up without a framework?Elements declare a data-a attribute naming an action, and actions/events.js delegates clicks to the matching handler on the shared action table; inputs use data-in and blur handlers use data-blur.
How are icons handled?You call ic(name) with any Lucide icon name, and a virtual:icons Vite plugin bundles only the icons actually referenced in the source, keeping the bundle lean.
Is there CI checking code quality?Yes, every push and pull request runs lint, a format check and a production build via a GitHub Actions workflow (.github/workflows/ci.yml).
What are similar projects?openproject, wekan, planka, everything, plane, leantime, blueprint, focalboard
Which topics is it in?timeline, table, single-page-app, esm, kanban, calendar, project-management, vanilla-javascript, task-management, icons, vercel, ci-cd
Creator
gr8rstudio
Size
0.7 MB
Stars
848
Updated
CommitOct 07
Age
10d
Commits · 90 Days