diff --git a/README.md b/README.md
index 57fd1b554a..d33d435ccc 100644
--- a/README.md
+++ b/README.md
@@ -134,5 +134,5 @@ Here’s what you can look forward to:
Dive into Twenty today and experience the power of open-source CRM on your own terms.
-🚀 [Get Started with Twenty](https://docs.twenty.com/developer/local-setup).
+🚀 [Get Started with Twenty](https://docs.twenty.com/contributor/local-setup).
diff --git a/docs/docs/developer/_category_.json b/docs/docs/contributor/_category_.json
similarity index 100%
rename from docs/docs/developer/_category_.json
rename to docs/docs/contributor/_category_.json
diff --git a/docs/docs/contributor/frontend/_category_.json b/docs/docs/contributor/frontend/_category_.json
new file mode 100644
index 0000000000..0c949e0fa5
--- /dev/null
+++ b/docs/docs/contributor/frontend/_category_.json
@@ -0,0 +1,3 @@
+{
+ "position": 3
+}
diff --git a/docs/docs/developer/frontend/_category_.json b/docs/docs/contributor/frontend/advanced/_category_.json
similarity index 50%
rename from docs/docs/developer/frontend/_category_.json
rename to docs/docs/contributor/frontend/advanced/_category_.json
index 51d2bf8348..29fddaafe5 100644
--- a/docs/docs/developer/frontend/_category_.json
+++ b/docs/docs/contributor/frontend/advanced/_category_.json
@@ -1,8 +1,6 @@
{
- "label": "Frontend",
+ "label": "Advanced",
"position": 3,
- "collapsible": true,
- "collapsed": false,
"customProps": {
"icon": "TbTerminal2"
}
diff --git a/docs/docs/developer/frontend/best-practices.mdx b/docs/docs/contributor/frontend/advanced/best-practices.mdx
similarity index 98%
rename from docs/docs/developer/frontend/best-practices.mdx
rename to docs/docs/contributor/frontend/advanced/best-practices.mdx
index 4773cd0d3b..b3a03be126 100644
--- a/docs/docs/developer/frontend/best-practices.mdx
+++ b/docs/docs/contributor/frontend/advanced/best-practices.mdx
@@ -261,7 +261,7 @@ Prop drilling, in the React context, refers to the practice of passing state var
3. **Reduced Component Reusability**: A component receiving numerous props solely for the purpose of passing them down becomes less general-purpose and harder to reuse in different contexts.
-If you feel that you are using excessive prop drilling, see [state management best practices](/developer/frontend/best-practices#state-management)
+If you feel that you are using excessive prop drilling, see [state management best practices](/contributor/frontend/advanced/best-practices#state-management)
## Imports
diff --git a/docs/docs/developer/frontend/hotkeys.mdx b/docs/docs/contributor/frontend/advanced/hotkeys.mdx
similarity index 100%
rename from docs/docs/developer/frontend/hotkeys.mdx
rename to docs/docs/contributor/frontend/advanced/hotkeys.mdx
diff --git a/docs/docs/developer/frontend/style-guide.mdx b/docs/docs/contributor/frontend/advanced/style-guide.mdx
similarity index 100%
rename from docs/docs/developer/frontend/style-guide.mdx
rename to docs/docs/contributor/frontend/advanced/style-guide.mdx
diff --git a/docs/docs/contributor/frontend/basics/_category_.json b/docs/docs/contributor/frontend/basics/_category_.json
new file mode 100644
index 0000000000..e99e1a8aa1
--- /dev/null
+++ b/docs/docs/contributor/frontend/basics/_category_.json
@@ -0,0 +1,7 @@
+{
+ "label": "Basics",
+ "position": 1,
+ "customProps": {
+ "icon": "TbTerminal2"
+ }
+}
diff --git a/docs/docs/developer/frontend/design-system.mdx b/docs/docs/contributor/frontend/basics/design-system.mdx
similarity index 100%
rename from docs/docs/developer/frontend/design-system.mdx
rename to docs/docs/contributor/frontend/basics/design-system.mdx
diff --git a/docs/docs/developer/frontend/folder-architecture.mdx b/docs/docs/contributor/frontend/basics/folder-architecture.mdx
similarity index 100%
rename from docs/docs/developer/frontend/folder-architecture.mdx
rename to docs/docs/contributor/frontend/basics/folder-architecture.mdx
diff --git a/docs/docs/developer/frontend/overview.mdx b/docs/docs/contributor/frontend/basics/overview.mdx
similarity index 74%
rename from docs/docs/developer/frontend/overview.mdx
rename to docs/docs/contributor/frontend/basics/overview.mdx
index 3657d76955..e57313d0f8 100644
--- a/docs/docs/developer/frontend/overview.mdx
+++ b/docs/docs/contributor/frontend/basics/overview.mdx
@@ -35,13 +35,13 @@ We took care of having a clean and simple stack, with minimal boilerplate code.
We use [React Router](https://reactrouter.com/) for routing.
-To avoid unnecessary [re-renders](/developer/frontend/best-practices#managing-re-renders) we handle all the routing logic in a `useEffect` in `PageChangeEffect`.
+To avoid unnecessary [re-renders](/contributor/frontend/advanced/best-practices#managing-re-renders) we handle all the routing logic in a `useEffect` in `PageChangeEffect`.
### State Management
We use [Recoil](https://recoiljs.org/docs/introduction/core-concepts) for state management.
-See our [best practices](/developer/frontend/best-practices#state-management) for more managing state.
+See our [best practices](/contributor/frontend/advanced/best-practices#state-management) for more managing state.
## Testing
@@ -49,4 +49,4 @@ We use [Jest](https://jestjs.io/) for unit testing and [Storybook](https://story
Jest is mainly used for testing utility functions, and not components themselves.
-Storybook is used for testing the behavior of isolated components, as well as displaying our [design system](/developer/frontend/design-system).
+Storybook is used for testing the behavior of isolated components, as well as displaying our [design system](/contributor/frontend/basics/design-system).
diff --git a/docs/docs/developer/frontend/work-with-figma.mdx b/docs/docs/contributor/frontend/basics/work-with-figma.mdx
similarity index 100%
rename from docs/docs/developer/frontend/work-with-figma.mdx
rename to docs/docs/contributor/frontend/basics/work-with-figma.mdx
diff --git a/docs/docs/contributor/frontend/basics/workflows.mdx b/docs/docs/contributor/frontend/basics/workflows.mdx
new file mode 100644
index 0000000000..25096fd064
--- /dev/null
+++ b/docs/docs/contributor/frontend/basics/workflows.mdx
@@ -0,0 +1,43 @@
+---
+title: Contributing
+sidebar_position: 1
+sidebar_custom_props:
+ icon: TbTopologyStar
+---
+
+## Pre-requesites
+
+Make sure that your [IDE is correctly setup](/contributor/local-setup/ide-setup) and that your backend is running on `localhost:3000`.
+
+
+## Starting a new feature
+
+Make sure your database is running on the URL provided in your `server/.env` file.
+
+```
+cd front
+yarn
+
+yarn start
+```
+
+## Regenerate graphql schema based on API graphql schema
+
+```
+yarn graphql:generate
+```
+
+## Lint
+
+```
+yarn lint
+```
+
+## Test
+
+```
+yarn test # run jest tests
+yarn storybook:dev # run storybook
+yarn storybook:test # run tests (needs yarn storybook:dev to be running)
+yarn storybook:coverage # run tests (needs yarn storybook:dev to be running)
+```
diff --git a/docs/docs/contributor/frontend/frontend.mdx b/docs/docs/contributor/frontend/frontend.mdx
new file mode 100644
index 0000000000..e3c9f77008
--- /dev/null
+++ b/docs/docs/contributor/frontend/frontend.mdx
@@ -0,0 +1,12 @@
+---
+title: Frontend Development
+displayed_sidebar: frontendSidebar
+sidebar_position: 0
+sidebar_custom_props:
+ icon: TbTerminal2
+ isSidebarRoot: true
+---
+
+Welcome to the Frontend Development section of the documentation.
+Here you will find information about the frontend development process, the tools we use, and the best practices we follow.
+
diff --git a/docs/docs/contributor/frontend/ui-components/_category_.json b/docs/docs/contributor/frontend/ui-components/_category_.json
new file mode 100644
index 0000000000..15e39f1547
--- /dev/null
+++ b/docs/docs/contributor/frontend/ui-components/_category_.json
@@ -0,0 +1,7 @@
+{
+ "label": "UI Components",
+ "position": 1,
+ "customProps": {
+ "icon": "TbTerminal2"
+ }
+}
diff --git a/docs/docs/contributor/frontend/ui-components/forms/_category_.json b/docs/docs/contributor/frontend/ui-components/forms/_category_.json
new file mode 100644
index 0000000000..672c6e5ce0
--- /dev/null
+++ b/docs/docs/contributor/frontend/ui-components/forms/_category_.json
@@ -0,0 +1,9 @@
+{
+ "label": "Forms",
+ "position": 2,
+ "collapsible": true,
+ "collapsed": true,
+ "customProps": {
+ "icon": "TbForms"
+ }
+}
diff --git a/docs/docs/contributor/frontend/ui-components/forms/button.mdx b/docs/docs/contributor/frontend/ui-components/forms/button.mdx
new file mode 100644
index 0000000000..e1febd0681
--- /dev/null
+++ b/docs/docs/contributor/frontend/ui-components/forms/button.mdx
@@ -0,0 +1,15 @@
+---
+title: Button
+sidebar_position: 1
+---
+
+import IframeResizer from 'iframe-resizer-react';
+
+
+
+
\ No newline at end of file
diff --git a/docs/docs/contributor/frontend/ui-components/overview.mdx b/docs/docs/contributor/frontend/ui-components/overview.mdx
new file mode 100644
index 0000000000..9d20edcc38
--- /dev/null
+++ b/docs/docs/contributor/frontend/ui-components/overview.mdx
@@ -0,0 +1,9 @@
+---
+title: Overview
+sidebar_position: 0
+sidebar_custom_props:
+ icon: TbBrandFigma
+---
+
+WIP
+
\ No newline at end of file
diff --git a/docs/docs/developer/additional/glossary.mdx b/docs/docs/contributor/glossary.mdx
similarity index 95%
rename from docs/docs/developer/additional/glossary.mdx
rename to docs/docs/contributor/glossary.mdx
index 18761b0365..d7633cc8bc 100644
--- a/docs/docs/developer/additional/glossary.mdx
+++ b/docs/docs/contributor/glossary.mdx
@@ -1,9 +1,9 @@
---
-sidebar_position: 3
+title: Glossary
+sidebar_position: 2
sidebar_custom_props:
icon: TbVocabulary
---
-# Glossary
### Workspace
A `Workspace` usually represents a company using Twenty.
diff --git a/docs/docs/contributor/local-setup/_category_.json b/docs/docs/contributor/local-setup/_category_.json
new file mode 100644
index 0000000000..52822dab72
--- /dev/null
+++ b/docs/docs/contributor/local-setup/_category_.json
@@ -0,0 +1,9 @@
+{
+ "label": "Local setup",
+ "position": 1,
+ "collapsible": true,
+ "collapsed": true,
+ "customProps": {
+ "icon": "TbDeviceDesktop"
+ }
+}
\ No newline at end of file
diff --git a/docs/docs/contributor/local-setup/docker-setup.mdx b/docs/docs/contributor/local-setup/docker-setup.mdx
new file mode 100644
index 0000000000..df24740769
--- /dev/null
+++ b/docs/docs/contributor/local-setup/docker-setup.mdx
@@ -0,0 +1,107 @@
+---
+title: Docker Setup
+sidebar_position: 2
+sidebar_custom_props:
+ icon: TbBrandDocker
+---
+
+You can also provision the project with Docker. This comes with a few advantages:
+- It provides the exact same environment as our core developer team.
+- It includes some additional dependencies (such as `playwright`) that you might need if you wish to contribute to some advanced areas of the project.
+- It provisions a PostgreSQL database.
+
+## Prerequisites
+
+Make sure you have the latest `Docker` and [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) versions installed on your computer.
+
+You can run `docker --version` to verify the installation.
+
+## Step #1: Git Clone
+In your terminal, run the following command:
+
+```bash
+git clone git@github.com:twentyhq/twenty.git
+```
+
+## Step #2: Setup env variables
+
+Twenty requires a few environment variables to be set. Locally, we recommend setting them through `.env` files.
+
+```bash
+cp ./front/.env.example ./front/.env
+cp ./server/.env.example ./server/.env
+```
+
+The default values should work out of the box, except for the postgres URL, which requires a small modification.
+
+Open `./server/.env` and change to the following:
+
+```bash
+PG_DATABASE_URL=postgres://twenty:twenty@postgres:5432/default?connection_limit=1
+```
+
+
+## Step #3: Build
+
+We provide an environment containerized with Docker and orchestrated with `docker-compose`.
+This installation method will also provision a PostgreSQL container.
+
+**Note:** The configuration for the build is stored in the `infra/dev` folder, but you can run `make` commands directly from the root folder.
+
+```bash
+make build
+```
+
+## Step #4: Migrate & seed
+
+Before running the project, you need to initialize the database by running the migrations and seed.
+
+Start the containers:
+```bash
+make up
+```
+
+Run database migrations, generate prisma client, and seed:
+```bash
+make server-prisma-reset
+```
+
+## Step #5: Start Twenty
+
+Run the project with the following commands from the `root folder`:
+
+```bash
+make server-start
+```
+
+```bash
+make front-start
+```
+
+You should now have:
+- **Frontend** available on: [http://localhost:3001](http://localhost:3001)
+- **Server** available on: [http://localhost:3000/graphql](http://localhost:3000/graphql)
+- **Postgres** available on [http://localhost:5432](http://localhost:5432) and containing database named `default`
+
+Sign in using our seeded demo account `tim@apple.dev` (password: `Applecar2025`) to start using Twenty
+
+### Optional
+
+If you don't want to use the `make` command and work directly from the container, you can also ssh directly into the container:
+
+```bash
+make sh
+```
+Then run commands through yarn:
+```bash
+cd server
+yarn prisma:reset
+```
+
+
+### Troubleshooting
+
+#### Docker throws errors while setting up local environment
+
+If by any chance you will run into problems with Docker, you should change the `docker-compose` to `docker compose` in `./infra/dev/Makefile` as `docker-compose` is old version
+becoming slowly obsolete. (More info can be found [here](https://docs.docker.com/compose/migrate/))
diff --git a/docs/docs/developer/additional/ide-setup.mdx b/docs/docs/contributor/local-setup/ide-setup.mdx
similarity index 69%
rename from docs/docs/developer/additional/ide-setup.mdx
rename to docs/docs/contributor/local-setup/ide-setup.mdx
index 61e228e385..c0edc6c299 100644
--- a/docs/docs/developer/additional/ide-setup.mdx
+++ b/docs/docs/contributor/local-setup/ide-setup.mdx
@@ -1,12 +1,11 @@
---
-sidebar_position: 0
+title: IDE Setup
+sidebar_position: 4
sidebar_custom_props:
icon: TbBrandVscode
---
-# IDE Setup
-
-This section will help you setup your IDE for the project. If you haven't setup your development environment, please refer to [Development Environment](/developer/local-setup) section.
+This section will help you setup your IDE for the project. If you haven't setup your development environment, please refer to [Development Environment](/contributor/local-setup) section.
You can obviously use any IDE you want but we recommend using Visual Studio Code as our internal team uses it and we have a lot of extensions and settings that we can share with you.
@@ -22,7 +21,7 @@ You can download Visual Studio Code from [here](https://code.visualstudio.com/do
Once you have installed Visual Studio Code, you can open the project by clicking on `File > Open Folder` and selecting `twenty` project root folder.
-
+
### Extensions
@@ -30,16 +29,16 @@ Once you have installed Visual Studio Code, you can open the project by clicking
You can use the recommended extensions for the project. You will find them in `.vscode/extensions.json` file. VSCode should prompt you to install the recommended extensions when you open the project.
-
+
### Docker Setup
-If you are using a [Docker setup](/developer/local-setup#docker-install), you will need to run VSCode in the container. You can do that by opening the project, clicking on `Remote Explorer` icon on the left sidebar and then clicking on `Attach in New window` on `dev-twenty-dev` container.
+If you are using a [Docker setup](/contributor/local-setup#docker-install), you will need to run VSCode in the container. You can do that by opening the project, clicking on `Remote Explorer` icon on the left sidebar and then clicking on `Attach in New window` on `dev-twenty-dev` container.
-
+
diff --git a/docs/docs/contributor/local-setup/local-setup.mdx b/docs/docs/contributor/local-setup/local-setup.mdx
new file mode 100644
index 0000000000..5e1dbd2b3c
--- /dev/null
+++ b/docs/docs/contributor/local-setup/local-setup.mdx
@@ -0,0 +1,42 @@
+---
+title: Local Setup
+sidebar_position: 0
+sidebar_custom_props:
+ icon: TbDeviceDesktop
+---
+import ThemedImage from '@theme/ThemedImage';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Twenty is designed to be developer-friendly, and your local installation should be up and running in a few minutes.
+
+## Discord
+
+If you have any questions or need help, you can join our [Discord](https://discord.com/invite/cx5n4Jzs57) server.
+
+## MacOS and Linux users
+
+We recommend using [yarn installation](/contributor/local-setup/yarn-setup) as this is the easiest way to get started.
+We also provide an easy way to run the project with [Docker](/contributor/local-setup/yarn-setup) that you can use if you are familiar with containerized environments.
+
+## Windows users
+
+Windows users can install install the project through WSL2. We provide a [guide](/contributor/local-setup/wsl-setup) to help you get started.
+
+## Project structure
+
+The repository is structured as follows:
+```
+twenty
+└───docs // contains this documentation
+└───front // contains the frontend code for the application
+└───server // contains the backend code for the application
+└───infra // contains docker configurations for development and production deployments
+```
+
+## IDE Setup
+
+Once Twnenty is running on your computer, you will get the best experience by using an IDE that supports TypeScript and ESLint.
+You will find a guide for [VSCode](/contributor/local-setup/ide-setup) further in the documentation.
+___
+
diff --git a/docs/docs/developer/additional/troubleshooting.mdx b/docs/docs/contributor/local-setup/troubleshooting.mdx
similarity index 56%
rename from docs/docs/developer/additional/troubleshooting.mdx
rename to docs/docs/contributor/local-setup/troubleshooting.mdx
index 1284be9aa7..825143ab90 100644
--- a/docs/docs/developer/additional/troubleshooting.mdx
+++ b/docs/docs/contributor/local-setup/troubleshooting.mdx
@@ -1,11 +1,10 @@
---
-sidebar_position: 2
+title: Troubleshooting
+sidebar_position: 5
sidebar_custom_props:
icon: TbExclamationCircle
---
-# Troubleshooting
-
## Windows setup eslint prettier error: `CR` line breaks found
@@ -20,9 +19,3 @@ Then delete the repository and clone it again.
## Yarn lock file changed and new files are created (`yarn.lock`, `.yarnrc.yml`, `.yarn`)
Maybe you are using yarn 3? Try installing [yarn classic](https://classic.yarnpkg.com/lang/en/)!
-
-
-## Docker throws errors while setting up local environment
-
-If by any chance you will run into problems with Docker, you should change the `docker-compose` to `docker compose` in `./infra/dev/Makefile` as `docker-compose` is old version
-becoming slowly obsolete. (More info can be found [here](https://docs.docker.com/compose/migrate/))
diff --git a/docs/docs/developer/additional/windows-wsl-setup.mdx b/docs/docs/contributor/local-setup/wsl-setup.mdx
similarity index 88%
rename from docs/docs/developer/additional/windows-wsl-setup.mdx
rename to docs/docs/contributor/local-setup/wsl-setup.mdx
index 1d297da31f..040b0781b2 100644
--- a/docs/docs/developer/additional/windows-wsl-setup.mdx
+++ b/docs/docs/contributor/local-setup/wsl-setup.mdx
@@ -1,11 +1,10 @@
---
-sidebar_position: 1
+title: Windows WSL Setup
+sidebar_position: 3
sidebar_custom_props:
icon: TbBrandWindows
---
-# Windows WSL Setup
-
## Install WSL
Open PowerShell as Administrator and run:
@@ -22,7 +21,7 @@ Upon restart, a powershell window will open and install Ubuntu. This may take a
You will be prompted to create a username and password for your Ubuntu installation.
-
+
## Setup your developer environment
@@ -55,5 +54,5 @@ Close and reopen your terminal to start using nvm or run the following to use it
### Install Twenty project
-You are ready to install Twenty project. Follow the [Yarn install guide](/developer/local-setup#yarn-install-recommended) instructions.
+You are ready to install Twenty project. Follow the [Yarn install guide](/contributor/local-setup#yarn-install-recommended) instructions.
We don't recommend to use Docker on WSL as it adds an extra layer of complexity.
diff --git a/docs/docs/contributor/local-setup/yarn-setup.mdx b/docs/docs/contributor/local-setup/yarn-setup.mdx
new file mode 100644
index 0000000000..864f3a0e3b
--- /dev/null
+++ b/docs/docs/contributor/local-setup/yarn-setup.mdx
@@ -0,0 +1,133 @@
+---
+title: Yarn Setup
+sidebar_position: 1
+sidebar_custom_props:
+ icon: TbScript
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+**Note:** `npm` currently does not support local packages satisfactorily. We strongly recommend using `yarn` instead.
+
+## Prerequisites
+
+Before you can install and use Twenty, make sure you install the following on your computer:
+- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
+- [Node](https://nodejs.org/en/download)
+- [yarn](https://classic.yarnpkg.com/lang/en/docs/install/)
+
+---
+
+## Step #1: Git Clone
+
+In your terminal, run the following command:
+
+```
+git clone git@github.com:twentyhq/twenty.git
+```
+
+
+## Step #2: Set up PostgreSQL Database
+You need to have a PostgreSQL database available to be able to use Twenty. If you already have one available, you can skip this step.
+
+If you don't, you can provision one through `docker` using the following commands:
+
+
+
+
+```bash
+ cd twenty
+ make provision-postgres
+```
+
+This will create a Docker container, exposing a PostgresSQL instance at [http://localhost:5432](http://localhost:5432).
+
+This instance contains two databases: `default` and `test`
+You can access them using `twenty` postgres user (password: `twenty`)
+
+
+
+To install PostgresSQL on WSL2, use the following commands:
+
+```bash
+ sudo apt update
+ sudo apt install postgresql postgresql-contrib
+```
+
+Start postgresql service and connect to the database using default `postgres` user:
+
+```bash
+sudo service postgresql start
+sudo -u postgres psql
+```
+
+Create two databases:
+
+```sql
+CREATE DATABASE "default";
+CREATE DATABASE "test";
+```
+
+Create a user `twenty` with password `twenty`:
+
+```sql
+CREATE USER twenty PASSWORD 'twenty';
+ALTER USER twenty CREATEDB;
+```
+
+Create `metadata` schema:
+```sql
+CREATE SCHEMA IF NOT EXISTS "metadata";
+GRANT ALL ON SCHEMA metadata TO twenty;
+```
+
+Activate `uuid-ossp` extension:
+```sql
+CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
+```
+
+
+
+
+## Step #3: Setup env variables
+
+Twenty requires a few environment variables to be set. Locally, we recommend setting them through a `.env` file.
+
+To do so, make copies of the `.env.example` files in `/front` and `/server`:
+```bash
+cp ./front/.env.example ./front/.env
+cp ./server/.env.example ./server/.env
+```
+
+## Step #4: Server setup
+
+**Note:** We recommend that you use `nvm` to install the correct `node` version. We have added a `server/.nvmrc` to ensure all contributors are using the same version.
+
+To build Twenty server and seed some data into your database, run the following commands:
+```bash
+cd server
+nvm install #recommended
+nvm use #recommended
+yarn
+yarn prisma:reset
+yarn start:dev
+```
+
+Twenty's server will be up and running at [http://localhost:3000](http://localhost:3000).
+
+## Step #5: Frontend setup
+
+**Note:** For the frontend setup, too, we recommend using `nvm` to install the right node version.
+To set up the frontend, run the following commands in your terminal:
+
+```bash
+cd ../front
+nvm install #recommended
+nvm use #recommended
+yarn
+yarn start
+```
+
+Twenty's frontend will be running at [http://localhost:3001](http://localhost:3001). Simply login using our seeded demo account: `tim@apple.dev` to start using Twenty.
+
diff --git a/docs/docs/contributor/server/_category_.json b/docs/docs/contributor/server/_category_.json
new file mode 100644
index 0000000000..484e2553d7
--- /dev/null
+++ b/docs/docs/contributor/server/_category_.json
@@ -0,0 +1,3 @@
+{
+ "position": 4
+}
diff --git a/docs/docs/contributor/server/basics/_category_.json b/docs/docs/contributor/server/basics/_category_.json
new file mode 100644
index 0000000000..e99e1a8aa1
--- /dev/null
+++ b/docs/docs/contributor/server/basics/_category_.json
@@ -0,0 +1,7 @@
+{
+ "label": "Basics",
+ "position": 1,
+ "customProps": {
+ "icon": "TbTerminal2"
+ }
+}
diff --git a/docs/docs/contributor/server/basics/overview.mdx b/docs/docs/contributor/server/basics/overview.mdx
new file mode 100644
index 0000000000..d56f9c5e04
--- /dev/null
+++ b/docs/docs/contributor/server/basics/overview.mdx
@@ -0,0 +1,9 @@
+---
+title: Overview
+sidebar_position: 0
+sidebar_custom_props:
+ icon: TbEyeglass
+---
+
+
+WIP
\ No newline at end of file
diff --git a/docs/docs/contributor/server/basics/workflows.mdx b/docs/docs/contributor/server/basics/workflows.mdx
new file mode 100644
index 0000000000..0a7afe66bd
--- /dev/null
+++ b/docs/docs/contributor/server/basics/workflows.mdx
@@ -0,0 +1,44 @@
+---
+title: Development workflow
+sidebar_position: 2
+sidebar_custom_props:
+ icon: TbTopologyStar
+---
+
+## First time setup
+
+```
+cd server
+yarn # install dependencies
+
+yarn prisma:migrate # run migrations
+yarn prisma:generate # generate prisma and nestjs-graphql schemas
+yarn prisma:seed # provision database with seeds
+
+# alternatively, you can run
+yarn prisma:reset # all-in-one command to reset, migrate, seed and generate schemas
+```
+
+## Starting a new feature
+
+Make sure your database is running on the URL provided in your `server/.env` file.
+
+```
+cd server
+yarn
+yarn prisma:migrate && yarn prisma:generate
+
+yarn start:dev
+```
+
+## Lint
+
+```
+yarn lint
+```
+
+## Test
+
+```
+yarn test
+```
\ No newline at end of file
diff --git a/docs/docs/contributor/server/server.mdx b/docs/docs/contributor/server/server.mdx
new file mode 100644
index 0000000000..855584772f
--- /dev/null
+++ b/docs/docs/contributor/server/server.mdx
@@ -0,0 +1,8 @@
+---
+title: Backend Development
+displayed_sidebar: backendSidebar
+sidebar_position: 0
+sidebar_custom_props:
+ icon: TbTerminal2
+ isSidebarRoot: true
+---
diff --git a/docs/docs/developer/additional/_category_.json b/docs/docs/developer/additional/_category_.json
deleted file mode 100644
index 40bb64c706..0000000000
--- a/docs/docs/developer/additional/_category_.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "label": "Additional resources",
- "position": 10,
- "collapsible": true,
- "collapsed": true,
- "customProps": {
- "icon": "TbPlus"
- }
-}
\ No newline at end of file
diff --git a/docs/docs/developer/frontend/getting-started.mdx b/docs/docs/developer/frontend/getting-started.mdx
deleted file mode 100644
index c8279ce302..0000000000
--- a/docs/docs/developer/frontend/getting-started.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-sidebar_position: 1
-sidebar_custom_props:
- icon: TbZoomQuestion
----
-
-# Getting started
-
-## Installation
-
-To install the front end, you'll have to [install Yarn](https://yarnpkg.com/getting-started/install) first.
-
-Then just run :
-
-```
-yarn
-```
-
-## Development flow
-
-You can start the application for local development with :
-
-```
-yarn start
-```
-
-Then go to our [best-practice](/developer/frontend/best-practices) guide and the [folder architecture](/developer/frontend/folder-architecture) to learn more about how to structure your feature.
diff --git a/docs/docs/developer/local-setup.mdx b/docs/docs/developer/local-setup.mdx
deleted file mode 100644
index e0e23f41a6..0000000000
--- a/docs/docs/developer/local-setup.mdx
+++ /dev/null
@@ -1,247 +0,0 @@
----
-title: Local Setup
-sidebar_position: 1
-sidebar_custom_props:
- icon: TbDeviceDesktop
----
-import ThemedImage from '@theme/ThemedImage';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-Twenty is designed to be developer-friendly, and your local installation should be up and running in a few minutes.
-
-In a nutshell:
-- We recommend using `yarn` installation but we also provide an easy way to run the project with Docker.
-- Twenty uses PostgreSQL as a database. If you don't have a PostgreSQL instance available, we also provide a one-line command to provision one through Docker.
-
-The repository is structured as follows:
-```
-twenty
-└───docs // contains this documentation
-└───front // contains the frontend code for the application
-└───server // contains the backend code for the application
-└───infra // contains docker configurations for development and production deployments
-```
-___
-
-# Recommended: Yarn Installation
-
-**Note:** `npm` currently does not support local packages satisfactorily. We strongly recommend using `yarn` instead.
-
-## Prerequisites
-
-Before you can install and use Twenty, make sure you install the following on your computer:
-- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
-- [Node](https://nodejs.org/en/download)
-- [yarn](https://classic.yarnpkg.com/lang/en/docs/install/)
-
----
-
-## Step #1: Git Clone
-
-In your terminal, run the following command:
-
-```
-git clone git@github.com:twentyhq/twenty.git
-```
-
-
-## Step #2: Set up PostgreSQL Database
-You need to have a PostgreSQL database available to be able to use Twenty. If you already have one available, you can skip this step.
-
-If you don't, you can provision one through `docker` using the following commands:
-
-
-
-
-```bash
- cd twenty
- make provision-postgres
-```
-
-This will create a Docker container, exposing a PostgresSQL instance at [http://localhost:5432](http://localhost:5432).
-
-This instance contains two databases: `default` and `test`
-You can access them using `twenty` postgres user (password: `twenty`)
-
-
-
-To install PostgresSQL on WSL2, use the following commands:
-
-```bash
- sudo apt update
- sudo apt install postgresql postgresql-contrib
-```
-
-Start postgresql service and connect to the database using default `postgres` user:
-
-```bash
-sudo service postgresql start
-sudo -u postgres psql
-```
-
-Create two databases:
-
-```sql
-CREATE DATABASE "default";
-CREATE DATABASE "test";
-```
-
-Create a user `twenty` with password `twenty`:
-
-```sql
-CREATE USER twenty PASSWORD 'twenty';
-ALTER USER twenty CREATEDB;
-```
-
-Create `metadata` schema:
-```sql
-CREATE SCHEMA IF NOT EXISTS "metadata";
-GRANT ALL ON SCHEMA metadata TO twenty;
-```
-
-Activate `uuid-ossp` extension:
-```sql
-CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
-```
-
-
-
-
-## Step #3: Setup env variables
-
-Twenty requires a few environment variables to be set. Locally, we recommend setting them through a `.env` file.
-
-To do so, make copies of the `.env.example` files in `/front` and `/server`:
-```bash
-cp ./front/.env.example ./front/.env
-cp ./server/.env.example ./server/.env
-```
-
-## Step #4: Server setup
-
-**Note:** We recommend that you use `nvm` to install the correct `node` version. We have added a `server/.nvmrc` to ensure all contributors are using the same version.
-
-To build Twenty server and seed some data into your database, run the following commands:
-```bash
-cd server
-nvm install #recommended
-nvm use #recommended
-yarn
-yarn prisma:reset
-yarn start:dev
-```
-
-Twenty's server will be up and running at [http://localhost:3000](http://localhost:3000).
-
-## Step #5: Frontend setup
-
-**Note:** For the frontend setup, too, we recommend using `nvm` to install the right node version.
-To set up the frontend, run the following commands in your terminal:
-
-```bash
-cd ../front
-nvm install #recommended
-nvm use #recommended
-yarn
-yarn start
-```
-
-Twenty's frontend will be running at [http://localhost:3001](http://localhost:3001). Simply login using our seeded demo account: `tim@apple.dev` to start using Twenty.
-
----
-
-# Docker Installation
-
-You can also provision the project with Docker. This comes with a few advantages:
-- It provides the exact same environment as our core developer team.
-- It includes some additional dependencies (such as `playwright`) that you might need if you wish to contribute to some advanced areas of the project.
-- It provisions a PostgreSQL database.
-
-## Prerequisites
-
-Make sure you have the latest `Docker` and [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) versions installed on your computer.
-
-You can run `docker --version` to verify the installation.
-
-## Step #1: Git Clone
-In your terminal, run the following command:
-
-```bash
-git clone git@github.com:twentyhq/twenty.git
-```
-
-## Step #2: Setup env variables
-
-Twenty requires a few environment variables to be set. Locally, we recommend setting them through `.env` files.
-
-```bash
-cp ./front/.env.example ./front/.env
-cp ./server/.env.example ./server/.env
-```
-
-The default values should work out of the box, except for the postgres URL, which requires a small modification.
-
-Open `./server/.env` and change to the following:
-
-```bash
-PG_DATABASE_URL=postgres://twenty:twenty@postgres:5432/default?connection_limit=1
-```
-
-
-## Step #3: Build
-
-We provide an environment containerized with Docker and orchestrated with `docker-compose`.
-This installation method will also provision a PostgreSQL container.
-
-**Note:** The configuration for the build is stored in the `infra/dev` folder, but you can run `make` commands directly from the root folder.
-
-```bash
-make build
-```
-
-## Step #4: Migrate & seed
-
-Before running the project, you need to initialize the database by running the migrations and seed.
-
-Start the containers:
-```bash
-make up
-```
-
-Run database migrations, generate prisma client, and seed:
-```bash
-make server-prisma-reset
-```
-
-## Step #5: Start Twenty
-
-Run the project with the following commands from the `root folder`:
-
-```bash
-make server-start
-```
-
-```bash
-make front-start
-```
-
-You should now have:
-- **Frontend** available on: [http://localhost:3001](http://localhost:3001)
-- **Server** available on: [http://localhost:3000/graphql](http://localhost:3000/graphql)
-- **Postgres** available on [http://localhost:5432](http://localhost:5432) and containing database named `default`
-
-Sign in using our seeded demo account `tim@apple.dev` (password: `Applecar2025`) to start using Twenty
-
-### Optional
-
-If you don't want to use the `make` command and work directly from the container, you can also ssh directly into the container:
-
-```bash
-make sh
-```
-Then run commands through yarn:
-```bash
-cd server
-yarn prisma:reset
-```
diff --git a/docs/docs/developer/workflows.mdx b/docs/docs/developer/workflows.mdx
deleted file mode 100644
index 772e40decd..0000000000
--- a/docs/docs/developer/workflows.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
----
-sidebar_position: 2
-sidebar_custom_props:
- icon: TbTopologyStar
----
-# Development workflow
-
-
-## IDE Setup
-
-If you are using VSCode, we provide a [.vscode](https://github.com/twentyhq/twenty/tree/main/.vscode) configuration.
-
-## Frontend development commands
-
-```bash
-yarn # install dependencies
-yarn start # start local development server
-
-yarn test # run jest tests
-yarn storybook:dev # run storybook
-yarn storybook:test # run tests (needs yarn storybook:dev to be running)
-yarn storybook:coverage # run tests (needs yarn storybook:dev to be running)
-yarn lint # run linter
-
-yarn graphql:generate
-```
-
-See [front/package.json](https://github.com/twentyhq/twenty/blob/main/front/package.json) script section to see the full list of available commands.
-
-## Server development
-
-```
-yarn # install dependencies
-yarn start:dev
-
-yarn prisma:migrate # run migrations
-yarn prisma:generate # generate prisma and nestjs-graphql schemas
-yarn prisma:seed # provision database with seeds
-yarn:reset # all-in-one command to reset, migrate, seed and generate schemas
-
-yarn:test
-```
-
-See [server/package.json](https://github.com/twentyhq/twenty/blob/main/server/package.json) script section to see the full list of available commands.
\ No newline at end of file
diff --git a/docs/docs/level-1/_category_.json b/docs/docs/level-1/_category_.json
deleted file mode 100644
index 412d7714b1..0000000000
--- a/docs/docs/level-1/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "label": "Level 1",
- "className": "display-none"
-}
diff --git a/docs/docs/level-1/level-2/level-2.mdx b/docs/docs/level-1/level-2/level-2.mdx
deleted file mode 100644
index de73bec8e8..0000000000
--- a/docs/docs/level-1/level-2/level-2.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: "Level 2"
-displayed_sidebar: level2PageSidebar
-sidebar_custom_props:
- icon: TbBolt
- isSidebarRoot: true
----
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere sollicitudin nisl a euismod. Aenean congue tellus sed sollicitudin posuere. Proin convallis, elit ac mollis scelerisque, purus erat consequat magna, sed pellentesque libero mi vel massa. Phasellus vulputate dolor leo, a vulputate turpis mollis vitae. Mauris purus ante, tempor id erat pellentesque, tempor gravida metus. Praesent gravida arcu orci, vel vestibulum arcu placerat eu. Nulla eu malesuada leo, ac blandit lectus. Nunc egestas nulla at aliquet sollicitudin. Ut mi ante, ullamcorper vel facilisis nec, suscipit at.
\ No newline at end of file
diff --git a/docs/docs/level-1/level-2/level-3/_category_.json b/docs/docs/level-1/level-2/level-3/_category_.json
deleted file mode 100644
index 36fa603b04..0000000000
--- a/docs/docs/level-1/level-2/level-3/_category_.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "label": "Level 3"
-}
diff --git a/docs/docs/level-1/level-2/level-3/level-4.mdx b/docs/docs/level-1/level-2/level-3/level-4.mdx
deleted file mode 100644
index 6f47427aac..0000000000
--- a/docs/docs/level-1/level-2/level-3/level-4.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: "Level 4"
-sidebar_custom_props:
- icon: TbBolt
----
-
-Nam consequat neque et velit molestie, non egestas est aliquam. Aenean sed nisl odio. Curabitur sed augue non justo convallis aliquet. Nam fringilla accumsan ex id ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis quis sem ac elit posuere dictum suscipit ut nunc. Nullam id auctor dui. Sed bibendum justo a nulla ultricies tempus. Sed at varius nulla, id pharetra quam. Vivamus a ex sollicitudin, ornare lectus nec, eleifend nisi. Donec sit amet ligula nisi. Integer urna ligula, pellentesque nec lectus et, finibus elementum purus. Etiam sit amet sapien massa.
diff --git a/docs/docs/others/CLI.mdx b/docs/docs/others/CLI.mdx
index 275e8024c8..c95cb5b8f2 100644
--- a/docs/docs/others/CLI.mdx
+++ b/docs/docs/others/CLI.mdx
@@ -1,9 +1,10 @@
---
+title: CLI
+sidebar_position: 1
sidebar_class_name: coming-soon
sidebar_custom_props:
icon: TbTerminal2
---
-# CLI
Available soon!
\ No newline at end of file
diff --git a/docs/docs/others/troubleshooting.mdx b/docs/docs/others/bug-and-requests.mdx
similarity index 83%
rename from docs/docs/others/troubleshooting.mdx
rename to docs/docs/others/bug-and-requests.mdx
index c99e2560a5..22eedebc8a 100644
--- a/docs/docs/others/troubleshooting.mdx
+++ b/docs/docs/others/bug-and-requests.mdx
@@ -1,11 +1,14 @@
---
+title: Bugs & Requests
+sidebar_position: 3
sidebar_custom_props:
icon: TbBug
---
-# Troubleshooting
-## Reporting bugs
+## Reporting Bugs
Please create an issue on Github: [https://github.com/twentyhq/twenty/issues/new](https://github.com/twentyhq/twenty/issues/new)
+## Feature Requests
+
If you're not sure it's a bug and you feel it's closer to a feature request, then you should probably open a discussion instead:
[https://github.com/twentyhq/twenty/discussions/new](https://github.com/twentyhq/twenty/discussions/new)
diff --git a/docs/docs/others/telemetry.mdx b/docs/docs/others/telemetry.mdx
index 70a2f364b8..267388a768 100644
--- a/docs/docs/others/telemetry.mdx
+++ b/docs/docs/others/telemetry.mdx
@@ -1,4 +1,6 @@
---
+title: Telemetry
+sidebar_position: 2
sidebar_custom_props:
icon: TbChartDots
---
diff --git a/docs/docs/start/getting-started.mdx b/docs/docs/start/getting-started.mdx
index 93d02f3547..15dea7c3d2 100644
--- a/docs/docs/start/getting-started.mdx
+++ b/docs/docs/start/getting-started.mdx
@@ -18,7 +18,7 @@ The signup is free.
### 2. Local
-If you're a developer and would like to experiment or contribute to the app, you can install Twenty on your local environment. Follow our [local setup](/developer/local-setup) guide to get started.
+If you're a developer and would like to experiment or contribute to the app, you can install Twenty on your local environment. Follow our [local setup](/contributor/local-setup) guide to get started.
### 3. Self-hosting
We provide self-hosting options if you want greater control over your data and want to run the app on your own server. Right now, Docker containers are the only hosting option we support. However we are actively working on providing simple options to self-host Twenty.
diff --git a/docs/docs/start/overview.mdx b/docs/docs/start/overview.mdx
index 278a9e248f..7112b44bbc 100644
--- a/docs/docs/start/overview.mdx
+++ b/docs/docs/start/overview.mdx
@@ -21,6 +21,6 @@ ___
Contributions are what makes the open source community such an amazing place.
-Code contributions through pull request are most welcome. See our [local setup guide](../developer/local-setup) to get started.
+Code contributions through pull request are most welcome. See our [local setup guide](../contributor/local-setup) to get started.
You can also contribute by creating an issue to report a bug you've spotted, joining our discussions or writing documentation.
\ No newline at end of file
diff --git a/docs/package.json b/docs/package.json
index 3d5dc2d0f5..a33b791b5f 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -21,6 +21,7 @@
"clsx": "^1.2.1",
"graphiql": "^2.4.7",
"graphql": "^16.6.0",
+ "iframe-resizer-react": "^1.1.0",
"prism-react-renderer": "^1.3.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
diff --git a/docs/sidebars.js b/docs/sidebars.js
index 4d58f490dc..7714bb4155 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -26,9 +26,13 @@ const backToHomeLink = {
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
docsSidebar: [{ type: "autogenerated", dirName: "." }],
- level2PageSidebar: [
+ frontendSidebar: [
backToHomeLink,
- { type: "autogenerated", dirName: "level-1/level-2" },
+ { type: "autogenerated", dirName: "contributor/frontend" },
+ ],
+ backendSidebar: [
+ backToHomeLink,
+ { type: "autogenerated", dirName: "contributor/server" },
],
};
diff --git a/docs/src/theme/DocSidebarItem/Link/index.js b/docs/src/theme/DocSidebarItem/Link/index.js
index 51fdf3414a..a533a59d8b 100644
--- a/docs/src/theme/DocSidebarItem/Link/index.js
+++ b/docs/src/theme/DocSidebarItem/Link/index.js
@@ -18,9 +18,7 @@ const DocSidebarItemLink = ({
const { href, label, className, autoAddBaseUrl, customProps = {} } = item;
const isActive = isActiveSidebarItem(item, activePath);
const isInternalLink = isInternalUrl(href);
- const IconComponent = customProps?.icon
- ? icons[customProps.icon]
- : icons.TbFaceIdError;
+ const IconComponent = customProps?.icon ? icons[customProps.icon] : null;
return (