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)

Searching Database…

848 ·GitHub
Gr8r-studio
Что это?Gr8r Studio — спокойное, структурированное рабочее пространство для управления проектами: главная панель, входящие, мои задачи, проекты с представлениями доски, списка, таблицы, календаря, таймлайна и файлов, плюс участники, команды, активность и настройки.
Это построено на UI-фреймворке вроде React или Vue или на чём-то более лёгком?Он построен на обычных ES-модулях JavaScript и CSS, собираемых Vite. Ни UI-фреймворка (ни React, ни Vue), ни вообще каких-либо рантайм-зависимостей.
Как запустить его локально?Нужен Node.js 18 или новее (.nvmrc проекта фиксирует версию 22), затем запустите dev/build-скрипты Vite, чтобы работать над приложением или собрать его.
Нужны ли какие-то npm-пакеты или только Node?Только Node.js для сборочных инструментов Vite — само приложение поставляется без рантайм-зависимостей и без UI-фреймворка.
Есть ли у него свой бэкенд или база данных?В README не сказано — он описывает только архитектуру фронтенда (слои core/data, ui/shell/pages, actions) и то, как деплой на Vercel раздаёт собранную папку dist/; сервер или база данных не упоминаются.
Где это вообще работает — открыть в браузере?Да, это одностраничное браузерное приложение; vercel.json собирает его с Vite и раздаёт получившуюся папку dist/.
Как внутри устроены отрисовка и управление состоянием?Каждая страница или представление — функция, возвращающая HTML-строку, построенную из общего хранилища (S). render() заново собирает оболочку, сохраняя фокус и позицию прокрутки, а действия изменяют состояние через общую таблицу действий (A), в которой модули регистрируются при загрузке.
Как без фреймворка подключаются клики и ввод?Элементы объявляют атрибут data-a с именем действия, а actions/events.js делегирует клики соответствующему обработчику из общей таблицы действий; для ввода используется data-in, а для обработчиков потери фокуса — data-blur.
Как устроены иконки?Вы вызываете ic(name) с любым именем иконки Lucide, а Vite-плагин virtual:icons включает в бандл только иконки, реально использованные в исходниках, сохраняя бандл компактным.
Есть ли CI, проверяющий качество кода?Да, при каждом push и pull request запускаются линт, проверка форматирования и production-сборка через workflow GitHub Actions (.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
11d
Commits · 90 Days