Help — ionetiq

ℹ️

About this system

The ionetiq Project Hub is an internal tool for managing and launching projects within the organisation. It provides a centralised home page where each project appears as a card, linking to a dedicated admin page and working project folder.

Project data — name, description, status, team members, links and to-dos — is stored in a Supabase Postgres database and fetched live by the browser. There is no server-side code; everything runs as static HTML with JavaScript fetching from the Supabase REST API.

Key principle: Adding a project requires two things — a row in the Supabase projects table, and a folder on the server. The hub picks up new projects automatically from the database.

➕

Adding a project

The easiest way to add a project is via the New Project button on the hub home page. This creates the database record automatically and shows you the manual folder steps.

1

Click the + New Project card on the hub home page and fill in the form. The Project ID is auto-generated from the name — keep it lowercase with hyphens only.

2

In cPanel File Manager, copy projects/admin/template/ and rename it to projects/admin/{your-id}/.

3

Create a new folder projects/{your-id}/ for the working project files. Copy the placeholder projects/template/index.html in as a starting point.

4

Open projects/admin/{your-id}/index.html and change the one line at the top of the script: const PROJECT_ID = 'template' → const PROJECT_ID = '{your-id}'.

5

The project card will already appear on the hub. The admin page is live at /projects/admin/{your-id}/ and the working project at /projects/{your-id}/.

⚙️

Managing projects

Updating project details — edit the row directly in the Supabase Table Editor. Changes appear live on the hub immediately.

Adding team members — insert a row into the project_team table with the project_id, name, role, and initials fields.

Adding links — insert a row into the project_links table. Use the sort_order field (1, 2, 3…) to control the order they appear.

To-do items — managed directly on the project admin page. Add, complete and delete todos inline. All changes save to Supabase instantly.

Hiding a project — set active = false in the projects table. The card disappears from the hub but the data is preserved.

Deleting a project — use the Delete button on the project admin page. This removes all database records. You then need to manually delete the folders from cPanel.

Notes — each project admin folder contains a notes.md file. Edit this directly in cPanel or via FTP. It renders as formatted markdown on the admin page.

📁

Folder structure

            # ionetiq site structure

            /

              index.html             # hub home page

              css/

                main.css           # shared styles for all pages

              js/

                main.js            # hub project card renderer

              images/

                ionetiq_300x300_trans.png

              help/

                index.html        # this page

              projects/

                admin/            # project admin pages

                  template/        # copy this for each new project

                    index.html

                    notes.md

                  {project-id}/

                    index.html

                    notes.md

                template/          # working project placeholder

                  index.html

                {project-id}/        # actual project work goes here

                  index.html

                  assets/

🗄️

Supabase guide

The system uses Supabase as its database. Log in at supabase.com and open the ionetiqdev project.

Tables:

TB

projects — one row per project. Fields: id, name, description, logo, tags, path, status, active, created_at.

TB

project_team — team members linked to a project via project_id. Fields: name, role, initials.

TB

project_links — links shown in the sidebar. Fields: title, url, comment, sort_order.

TB

project_todos — to-do items per project. Fields: title, completed, sort_order.

Row Level Security: All tables have RLS enabled with public read, insert, update and delete policies. This is appropriate for an internal tool on a private domain. If the hub becomes publicly accessible, restrict write policies to authenticated users.

🔧

Tech stack

Component	Technology
Hosting	Namecheap shared hosting — ionetiq.dev
Frontend	Vanilla HTML, CSS, JavaScript — no framework
Database	Supabase (Postgres) — project ionetiqdev
API	Supabase REST API via fetch()
Fonts	Google Fonts — Montserrat + Roboto
Markdown	marked.js (cdnjs) — renders notes.md files
Deployment	Manual FTP via FileZilla / cPanel File Manager
Version control	GitHub — planned

Help & Guide