Improve Documentation (#3795)

* Begin docs improvement

* Keep improving documentation

* Upgrade Docusarus

* Fix broken links

packages/twenty-docs/docs/contributor/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "Contributor guide",
-  "position": 2
+  "label": "Contributing",
+  "position": 3
 }

packages/twenty-docs/docs/contributor/bug-and-requests.mdx

@@ -1,5 +1,5 @@
 ---
-title: Bugs & Requests
+title: Bugs and Requests
 sidebar_position: 3
 sidebar_custom_props:
   icon: TbBug

packages/twenty-docs/docs/contributor/frontend/_category_.json

@@ -1,3 +1,5 @@
 {
-  "position": 3
+  "position": 3,
+  "collapsible": true,
+  "collapsed": true
 }

packages/twenty-docs/docs/contributor/frontend/advanced/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Advanced",
-  "position": 3
-}

packages/twenty-docs/docs/contributor/frontend/basics/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Basics",
-  "position": 1
-}

packages/twenty-docs/docs/contributor/frontend/basics/basics.mdx

@@ -1,53 +0,0 @@
----
-title: Basics
-sidebar_position: 0
----
-
-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />
-
-## Tech Stack
-
-The project has a clean and simple stack, with minimal boilerplate code.
-
-**App**
-
-- [React](https://react.dev/)
-- [Apollo](https://www.apollographql.com/docs/)
-- [GraphQL Codegen](https://the-guild.dev/graphql/codegen)
-- [Recoil](https://recoiljs.org/docs/introduction/core-concepts)
-- [TypeScript](https://www.typescriptlang.org/)
-
-**Testing**
-
-- [Jest](https://jestjs.io/)
-- [Storybook](https://storybook.js.org/)
-
-**Tooling**
-
-- [Yarn](https://yarnpkg.com/)
-- [Craco](https://craco.js.org/docs/)
-- [ESLint](https://eslint.org/)
-
-## Architecture
-
-### Routing
-
-[React Router](https://reactrouter.com/) handles the routing. 
-
-To avoid unnecessary [re-renders](/contributor/frontend/advanced/best-practices#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`.
-
-### State Management
-
-[Recoil](https://recoiljs.org/docs/introduction/core-concepts) handles state management.
-
-See [best practices](/contributor/frontend/advanced/best-practices#state-management) for more information on state management.
-
-## Testing
-
-[Jest](https://jestjs.io/) serves as the tool for unit testing while [Storybook](https://storybook.js.org/) is for component testing.
-
-Jest is mainly for testing utility functions, and not components themselves.
-
-Storybook is for testing the behavior of isolated components, as well as displaying the [design system](/contributor/frontend/basics/design-system).

packages/twenty-docs/docs/contributor/frontend/basics/contributing.mdx

@@ -1,44 +0,0 @@
----
-title: Contributing
-sidebar_position: 1
-description: Learn how you can contribute to the project
-sidebar_custom_props:
-  icon: TbTopologyStar
----
-
-## Pre-requisites
-
-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.
-
-```bash
-cd front
-yarn
-
-yarn start
-```
-
-## Regenerate graphql schema based on API graphql schema
-
-```bash
-yarn graphql:generate
-```
-
-## Lint
-
-```bash
-yarn lint
-```
-
-## Test
-
-```bash
-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)
-```

packages/twenty-docs/docs/contributor/frontend/basics/design-system.mdx

@@ -1,10 +0,0 @@
----
-title: Design System
-description: What our design system looks like
-sidebar_position: 7
-sidebar_custom_props:
-  icon: TbPaint
----
-
-The CRM depends on its internal and custom design system, constructed on top of styled-components.
-

packages/twenty-docs/docs/contributor/frontend/best-practices.mdx

@@ -268,7 +268,7 @@ Prop drilling, in the React context, refers to the practice of passing state var
 
 3. **Reduced Component Reusability**: A component receiving a lot of props solely for 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](/contributor/frontend/advanced/best-practices#state-management).
+If you feel that you are using excessive prop drilling, see [state management best practices](#state-management).
 
 ## Imports
 

packages/twenty-docs/docs/contributor/frontend/frontend.mdx

@@ -1,14 +1,86 @@
 ---
 id: frontend
 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 recommended tools, and the best practices you should follow.
+import DocCardList from '@theme/DocCardList';
 
 
+<DocCardList />
+
+## Useful commands
+
+### Starting the app
+
+```bash
+ nx start twenty-front
+ ```
+
+### Regenerate graphql schema based on API graphql schema
+
+```bash
+nx graphql:generate twenty-front
+```
+
+### Lint
+
+```bash
+nx lint twenty-front
+```
+
+### Test
+
+```bash
+nx test twenty-front# run jest tests
+nx storybook:dev twenty-front# run storybook
+nx storybook:test twenty-front# run tests # (needs yarn storybook:dev to be running)
+nx storybook:coverage twenty-front # (needs yarn storybook:dev to be running)
+```
+
+## Tech Stack
+
+The project has a clean and simple stack, with minimal boilerplate code.
+
+**App**
+
+- [React](https://react.dev/)
+- [Apollo](https://www.apollographql.com/docs/)
+- [GraphQL Codegen](https://the-guild.dev/graphql/codegen)
+- [Recoil](https://recoiljs.org/docs/introduction/core-concepts)
+- [TypeScript](https://www.typescriptlang.org/)
+
+**Testing**
+
+- [Jest](https://jestjs.io/)
+- [Storybook](https://storybook.js.org/)
+
+**Tooling**
+
+- [Yarn](https://yarnpkg.com/)
+- [Craco](https://craco.js.org/docs/)
+- [ESLint](https://eslint.org/)
+
+## Architecture
+
+### Routing
+
+[React Router](https://reactrouter.com/) handles the routing. 
+
+To avoid unnecessary [re-renders](/contributor/frontend/best-practices#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`.
+
+### State Management
+
+[Recoil](https://recoiljs.org/docs/introduction/core-concepts) handles state management.
+
+See [best practices](/contributor/frontend/best-practices#state-management) for more information on state management.
+
+## Testing
+
+[Jest](https://jestjs.io/) serves as the tool for unit testing while [Storybook](https://storybook.js.org/) is for component testing.
+
+Jest is mainly for testing utility functions, and not components themselves.
+
+Storybook is for testing the behavior of isolated components, as well as displaying the design system.

packages/twenty-docs/docs/contributor/server/_category_.json

@@ -1,3 +1,5 @@
 {
-  "position": 4
+  "position": 4,
+  "collapsible": true,
+  "collapsed": true
 }

packages/twenty-docs/docs/contributor/server/basics/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Basics",
-  "position": 1
-}

packages/twenty-docs/docs/contributor/server/basics/overview.mdx

@@ -1,35 +0,0 @@
----
-title: Overview
-sidebar_position: 0
-sidebar_custom_props:
-  icon: TbEyeglass
----
-
-Twenty primarily uses NestJS for the backend. 
-
-Prisma was the first choice as the ORM with a lot of auto-generated code under the hood. But to offer users flexibility and allow them to create custom fields and custom objects, something more low-level than Prisma made more sense to have more fine-grained control. This is why the project now uses TypeORM. 
-
-Here's what the tech stack now looks like. 
-
-## Tech Stack
-
-**Core**
-- [NestJS](https://nestjs.com/)
-- [TypeORM](https://typeorm.io/)
-- [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server)
-
-**Database**
-- [Postgres](https://www.postgresql.org/)
-
-**Third-party integrations**
-- [Sentry](https://sentry.io/welcome/) for tracking bugs
-
-**Testing**
-- [Jest](https://jestjs.io/)
-
-**Tooling**
-- [Yarn](https://yarnpkg.com/)
-- [ESLint](https://eslint.org/)
-
-**Development**
-- [AWS EKS](https://aws.amazon.com/eks/) 

packages/twenty-docs/docs/contributor/server/basics/workflows.mdx

@@ -1,61 +0,0 @@
----
-title: Development workflow
-sidebar_position: 3
-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
-```
-
-## Resetting the database
-
-If you want to reset the database, you can run the following command:
-
-```bash
-cd server
-yarn database:reset
-```
-
-:::warning
-
-This will drop the database and re-run the migrations and seed.
-
-Make sure to back up any data you want to keep before running this command.
-
-:::

packages/twenty-docs/docs/contributor/server/others/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Others",
-  "position": 2
-}

packages/twenty-docs/docs/contributor/server/server.mdx

@@ -1,12 +1,91 @@
 ---
 title: Backend Development
-displayed_sidebar: backendSidebar
 sidebar_position: 0
 sidebar_custom_props:
   icon: TbTerminal
-  isSidebarRoot: true
 ---
 
-Welcome to the Backend Development section of the documentation.
 
-Here you will find information about the development process, the recommended tools, and the best practices you should follow.
+import DocCardList from '@theme/DocCardList';
+
+
+<DocCardList />
+
+## Useful commands
+
+### First time setup
+
+```
+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 the app
+
+```
+nx prisma:migrate twenty-server
+nx prisma:generate twenty-server 
+nx start:dev twenty-server
+```
+
+### Lint
+
+```
+nx lint twenty-server
+```
+
+### Test
+
+```
+nx test twenty-server
+```
+
+### Resetting the database
+
+If you want to reset the database, you can run the following command:
+
+```bash
+nx database:reset twenty-server
+```
+
+:::warning
+
+This will drop the database and re-run the migrations and seed.
+
+Make sure to back up any data you want to keep before running this command.
+
+:::
+
+## Tech Stack
+
+Twenty primarily uses NestJS for the backend. 
+
+Prisma was the first ORM we used. But in order to allow users to create custom fields and custom objects, a lower-level made more sense as we need to have fine-grained control. The project now uses TypeORM. 
+
+Here's what the tech stack now looks like. 
+
+
+**Core**
+- [NestJS](https://nestjs.com/)
+- [TypeORM](https://typeorm.io/)
+- [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server)
+
+**Database**
+- [Postgres](https://www.postgresql.org/)
+
+**Third-party integrations**
+- [Sentry](https://sentry.io/welcome/) for tracking bugs
+
+**Testing**
+- [Jest](https://jestjs.io/)
+
+**Tooling**
+- [Yarn](https://yarnpkg.com/)
+- [ESLint](https://eslint.org/)
+
+**Development**
+- [AWS EKS](https://aws.amazon.com/eks/) 

packages/twenty-docs/docs/developer/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Developer guide",
-  "position": 3
-}

packages/twenty-docs/docs/developer/graphql_api.mdx

@@ -1,25 +0,0 @@
----
-title: GraphQL API
-sidebar_position: 2
-sidebar_custom_props:
-  icon: TbBrandGraphql
----
-
-Use the [in-browser GraphiQL app](https://docs.twenty.com/graphql/) to browse, query, and mutate the introspection query. 
-
-## What is GraphQL?
-
-GraphQL is a query language for APIs that enables declarative data fetching that allows a client to specify the exact data it needs from the API.
-
-Instead of exposing various endpoints that return fixed data structures, GraphQL exposes only a single endpoint that precisely returns the data that the client asked for. This makes GraphQL more flexible and efficient than other kinds of APIs, like REST APIs. 
-
-You can learn more about GraphQL by going through this [Introduction](https://www.howtographql.com/basics/0-introduction/).
-
-## About GraphQL Introspection
-
-GraphQL query language is strongly typed, which makes it possible for you to query and understand the underlying schema. 
-
-With the Introspection feature, you can query the schema and discover the queries (to request data), mutations (to update data), types, and fields available in a particular GraphQL API.
-
-## Try the GraphQL Playground
-You can use the browser-based, interactive [GraphQL playground](https://docs.twenty.com/graphql/) to run mutations and queries to discover valid fields and where you can use them.   

packages/twenty-docs/docs/developer/rest_api.mdx

@@ -1,29 +0,0 @@
----
-title: REST API
-sidebar_position: 3
-sidebar_custom_props:
-  icon: TbApi
----
-
-To use the REST API, you will need an API key.
-Connect to your Twenty account ang do to Setting > Developers to generate one.
-
-## Using Postman?
-
-You can use [Postman](https://www.postman.com/) to interact with your Twenty objects using the API.
-You will need to provide your API key as a Bearer token,
-see [Bearer Token Postman Doc](https://learning.postman.com/docs/sending-requests/authorization/authorization-types/#bearer-token)
-if needed.
-
-## Programmatic use?
-
-You can call the REST API in your application using this endpoint
-[https://api.twenty.com/rest](https://api.twenty.com/rest).
-You will need to provide your API key as a Bearer token in
-your `headers.Authorization = 'Bearer <YOUR_API_KEY>'`.
-
-## Try the REST API Playground
-
-You can use the browser-based, interactive
-[REST API playground documentation](https://docs.twenty.com/rest-api)
-to Create, Read, Update or Delete your workspace objects.

packages/twenty-docs/docs/index.mdx

@@ -3,36 +3,24 @@ id: homepage
 sidebar_position: 0
 sidebar_class_name: display-none
 title: Welcome
+hide_title: true
+hide_table_of_contents: true
 custom_edit_url: null
+pagination_next: null
 ---
 import ThemedImage from '@theme/ThemedImage';
-import Footer from '@theme/Footer'
-
-Twenty is an Open Source CRM that provides flexibility, tailored to your business needs. It helps you break free from vendor lock-in and limitations, and provides the tools you need to harness the full potential of your data while ensuring a sleek and effortlessly intuitive design that teams will love to use.  
-<ThemedImage sources={{light: "../img/light-doc-preview.png", dark:"../img/dark-doc-preview.png"}} style={{width:'100%', maxWidth:'800px'}}/>
 
 
-## Idea Behind Twenty
-We’ve spent thousands of hours grappling with traditional CRMs like Pipedrive and Salesforce to align them with our business needs, only to end up frustrated—customizations are complex and the closed ecosystems of these platforms can feel restrictive.
+Twenty is a CRM designed to fit your unique business needs.  
+It was brought to life by a passionate community that cares about quality and precision in engineering.
 
-The need for a CRM solution that empowers rather than constrains was clear, which inspired us to create Twenty. It's a next-generation open-source CRM that offers you the flexibility to shape it according to your business objectives and meet your team’s unique needs. Twenty is full of powerful features to give you full control and help you win more deals. 
-
-## Getting started
-
-There are three ways for you to get started with Twenty:
-- **Cloud:** The fastest and easiest way to try the app (it's free)
-- **Local:** If you're a developer and would like to experiment or contribute to the app
-- **Self-hosting:** If you want greater control over your data and want to run the app on your own server
-
-See the [Getting Started](./start/getting-started/) guide to learn more.
-
-## Contributing
-
-Contributions are what makes the open source community such a great place.  
-
-Code contributions through pull request are most welcome. See the [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 discussions or writing documentation.
+There are three different ways to get started:
+- **Managed Cloud:** The fastest and easiest way to try the app 
+- **Loca Setup:** If you're a developer and would like to contribute to the app
+- **Self-hosting:** If you know how to run a server and want to host the app yourself
 
 
-<Footer/>
+Once you're setup, you can check the "Extending" or "Contributing" section to start building.
+  
+<ThemedImage sources={{light: "../img/light-doc-preview.png", dark:"../img/dark-doc-preview.png"}} style={{width:'100%', maxWidth:'700px'}}/>
+

packages/twenty-docs/docs/start/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "Start",
+  "label": "Getting Started",
   "position": 1
 }

packages/twenty-docs/docs/start/cloud.mdx

@@ -0,0 +1,21 @@
+---
+title: Managed Cloud
+sidebar_position: 1
+sidebar_custom_props:
+  icon: TbRocket
+---
+import ThemedImage from '@theme/ThemedImage';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+The easiest way to try the app is to sign up on [app.twenty.com](https://app.twenty.com).
+
+We offer a free trial but require a credit-card to signup.
+
+If you just want to play around with a test instance you can use these credentials:
+
+```
+email: noah@demo.dev
+password: Applecar2025
+```

packages/twenty-docs/docs/start/getting-started.mdx

@@ -1,29 +0,0 @@
----
-title: Getting Started
-sidebar_position: 1
-sidebar_custom_props:
-  icon: TbRocket
----
-import ThemedImage from '@theme/ThemedImage';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-There are three ways for you to get started with Twenty:
-### 1. Cloud
-
-The easiest way to try the app is to sign up on [app.twenty.com](https://app.twenty.com).
-
-The sign-up is free.
-
-<ThemedImage sources={{light: "/img/light-sign-in.png", dark:"/img/dark-sign-in.png"}} style={{width:'100%', maxWidth:'800px'}}/>
-
-### 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 the [local setup](/contributor/local-setup) guide to get started.  
-
-### 3. Self-hosting
-You can also find [self-hosting options](/start/self-hosting) 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 available, with more simple options to self-host Twenty coming soon.
-
-
-___
-
-

packages/twenty-docs/docs/start/local-setup/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Local setup",
-  "position": 1,
+  "position": 3,
   "collapsible": true,
   "collapsed": true,
   "customProps": {

packages/twenty-docs/docs/start/local-setup/docker-setup.mdx

@@ -16,7 +16,7 @@ This guide will walk you through provisioning the project with Docker. This come
 
 :::info
 Avoid setting up the project with Docker if you are a Windows (WSL) user, unless you have experience with it, as it will make troubleshooting harder.
-If you are a Windows user, it's better to use the [yarn installation](/contributor/local-setup/yarn-setup).
+If you are a Windows user, it's better to use the [yarn installation](/start/local-setup/yarn-setup).
 :::
 
 ## Prerequisites
@@ -121,7 +121,7 @@ Sign in using a seeded demo account `tim@apple.dev` (password: `Applecar2025`) t
 ## Step 6: Configure your IDE
 
 As you are executing the project inside a Docker container, you need to configure your IDE to use the same environment.
-You can find the instructions for your IDE in our [IDE setup](/contributor/local-setup/ide-setup) guide.
+You can find the instructions for your IDE in our [IDE setup](/start/local-setup/ide-setup) guide.
 
 ### Troubleshooting
 

packages/twenty-docs/docs/start/local-setup/ide-setup.mdx

@@ -6,7 +6,7 @@ sidebar_custom_props:
   icon: TbBrandVscode
 ---
 
-This section will help you set up your IDE for the project. If you haven't set up your development environment, please refer to the [local setup](/contributor/local-setup) section.
+This section will help you set up your IDE for the project. If you haven't set up your development environment, please refer to the [local setup](/start/local-setup) section.
 
 
 ## Visual Studio Code
@@ -37,7 +37,7 @@ You can use the recommended extensions for the project. You will find them in `.
 
 ### Step 4: (Docker only) Run VSCode in container
 
-If you are using a [Docker setup](/contributor/local-setup/docker-setup), you will need to run VSCode in the container. You can do that by opening the project, clicking on the `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](/start/local-setup/docker-setup), you will need to run VSCode in the container. You can do that by opening the project, clicking on the `Remote Explorer` icon on the left sidebar and then clicking on `Attach in New window` on `dev-twenty-dev` container.
 
 <div style={{textAlign: 'center'}}>
     <img src="/img/contributor/ide-start-dev-container.png" alt="Visual Studio Code: Open in container" width="90%" />

packages/twenty-docs/docs/start/local-setup/local-setup.mdx

@@ -4,9 +4,6 @@ sidebar_position: 0
 sidebar_custom_props:
   icon: TbDeviceDesktop
 ---
-import ThemedImage from '@theme/ThemedImage';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
 import DocCardList from '@theme/DocCardList';
 
 
@@ -21,12 +18,12 @@ If you have any questions or need help, you can join Twenty's [Discord](https://
 
 ## MacOS and Linux users
 
-It's better to use [yarn installation](/contributor/local-setup/yarn-setup) as this is the easiest way to get started.
-But there's also an easy way to run the project with [Docker](/contributor/local-setup/docker-setup) that you can use if you are familiar with containerized environments.
+It's better to use [yarn installation](/start/local-setup/yarn-setup) as this is the easiest way to get started.
+But there's also an easy way to run the project with [Docker](/start/local-setup/docker-setup) that you can use if you are familiar with containerized environments.
 
 ## Windows users
 
-Windows users can install the project through WSL2. [This guide](/contributor/local-setup/yarn-setup) can help you get started.
+Windows users can install the project through WSL2. [This guide](/start/local-setup/yarn-setup) can help you get started.
 
 ## Project structure
 
@@ -43,6 +40,6 @@ twenty
 ## IDE Setup
 
 Once Twenty 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.
+You will find a guide for [VSCode](/start/local-setup/ide-setup) further in the documentation.
 ___
 

packages/twenty-docs/docs/start/local-setup/troubleshooting.mdx

@@ -24,7 +24,7 @@ Try installing [yarn classic](https://classic.yarnpkg.com/lang/en/)!
 ## Missing metadata schema
 
 During Twenty installation, you need to provision your postgres database with the right schemas, extensions, and users.
-This documentation includes [different ways](/contributor/local-setup/yarn-setup#step-2-set-up-postgresql-database) to set up your postgres instance.
+This documentation includes [different ways](/start/local-setup/yarn-setup#step-2-set-up-postgresql-database) to set up your postgres instance.
 
 If you're successful in running this provisioning, you should have `default` and `metadata` schemas in your database.
 If you don't, make sure you don't have more than one postgres instance running on your computer.

packages/twenty-docs/docs/start/local-setup/yarn-setup.mdx

@@ -9,7 +9,7 @@ sidebar_custom_props:
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-In this document, you'll learn how to install the project using yarn. You should use this method since it's the easiest way to get started but you can also run the project with [Docker](/contributor/local-setup/docker-setup).  
+In this document, you'll learn how to install the project using yarn. You should use this method since it's the easiest way to get started but you can also run the project with [Docker](/start/local-setup/docker-setup).  
 
 :::info
 `npm` does not support local packages well, opt for `yarn` instead.

packages/twenty-docs/docs/start/self-hosting/1-click-deploy.mdx

@@ -0,0 +1,20 @@
+---
+title: 1-Click Deploy
+sidebar_position: 2
+sidebar_custom_props:
+  icon: TbBolt
+---
+
+
+
+## Render
+
+[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/twentyhq/twenty)
+
+## Digital Ocean
+
+Community contribution are welcome!
+
+## Other
+
+Please feel free to Open a PR to add more 1-Click Deploy options.

packages/twenty-docs/docs/start/self-hosting/docker-compose.mdx

@@ -0,0 +1,62 @@
+---
+title: Docker Compose
+sidebar_position: 1
+sidebar_custom_props:
+  icon: TbBrandDocker
+---
+
+## Production docker containers
+
+Prebuilt images for both Postgres, frontend, and back-end can be found on [docker hub](https://hub.docker.com/r/twentycrm/).
+
+You will need to set environment variables, a example configuration can be found [here](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/.env.example).
+
+## Docker Compose file
+
+We will soon update the documentation with an up-to-date docker compose file.
+Here is one that was proposed on Discord by a community member:
+
+
+```yaml
+version: "3.9"
+services:
+
+  twenty:
+    image: twentycrm/twenty-front:${TAG}
+    ports:
+      - 3001:3000
+    environment:
+      - SIGN_IN_PREFILLED=${SIGN_IN_PREFILLED}
+      - REACT_APP_SERVER_BASE_URL=${LOCAL_SERVER_URL}
+      - REACT_APP_SERVER_AUTH_URL=${LOCAL_SERVER_URL}/auth
+      - REACT_APP_SERVER_FILES_URL ${LOCAL_SERVER_URL}/files
+    depends_on:
+      - backend
+
+  backend:
+    image: twentycrm/twenty-server:${TAG}
+    ports:
+      - 3000:3000
+    environment:
+      - SIGN_IN_PREFILLED=${SIGN_IN_PREFILLED}
+      - PG_DATABASE_URL=${PG_DATABASE_URL}
+      - FRONT_BASE_URL=${FRONT_BASE_URL}
+      - PORT=3000
+      - STORAGE_TYPE=local
+      - STORAGE_LOCAL_PATH=.local-storage
+      - ACCESS_TOKEN_SECRET=${ACCESS_TOKEN_SECRET}
+      - LOGIN_TOKEN_SECRET=${LOGIN_TOKEN_SECRET}
+      - REFRESH_TOKEN_SECRET=${REFRESH_TOKEN_SECRET}
+    depends_on:
+      - db
+
+  db:
+    image: twentycrm/twenty-postgres:${TAG}
+    volumes:
+      - twenty-db-data:/var/lib/postgresql/data
+    environment:
+      - POSTGRES_PASSWORD=${POSTGRES_ADMIN_PASSWORD}
+  
+volumes:
+  twenty-db-data:
+```

packages/twenty-docs/docs/start/self-hosting/environment-variables.mdx

@@ -1,173 +0,0 @@
----
-title: Environment Variables
-sidebar_position: 1
-sidebar_custom_props:
-  icon: TbVariable
----
-
-import OptionTable from '@site/src/theme/OptionTable'
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-## Frontend
-
-<OptionTable options={[
-    ['REACT_APP_SERVER_BASE_URL', 'http://localhost:3000', 'Url of backend server'],
-    ['REACT_APP_SERVER_AUTH_URL', 'http://localhost:3000/auth', 'Auth Url of backend server'],
-    ['REACT_APP_SERVER_FILES_URL', 'http://localhost:3000/files', 'Files Url of backend server'],
-    ['GENERATE_SOURCEMAP', 'false', 'Generate source maps for debugging'],
-    ['CHROMATIC_PROJECT_TOKEN', '', 'Chromatic token used for CI'],
-    ]}></OptionTable>
-
-
-## Backend
-
-### Config
-
-<OptionTable options={[
-    ['PG_DATABASE_URL', 'postgres://user:pw@localhost:5432/default?connection_limit=1', 'Database connection'],
-    ['REDIS_HOST', '127.0.0.1', 'Redis connection host'],
-    ['REDIS_PORT', '6379', 'Redis connection port'],
-    ['FRONT_BASE_URL', 'http://localhost:3001', 'Url to the hosted frontend'],
-    ['SERVER_URL', 'http://localhost:3000', 'Url to the hosted server'],
-    ['PORT', '3000', 'Port'],
-    ]}></OptionTable>
-
-### Tokens
-
-<OptionTable options={[
-    ['ACCESS_TOKEN_SECRET', '<random>', 'Secret used for the access tokens'],
-    ['ACCESS_TOKEN_EXPIRES_IN', '30m', 'Access token expiration time'],
-    ['LOGIN_TOKEN_SECRET', '<random>', 'Secret used for the login tokens'],
-    ['LOGIN_TOKEN_EXPIRES_IN', '15m', 'Login token expiration time'],
-    ['REFRESH_TOKEN_SECRET', '<random>', 'Secret used for the refresh tokens'],
-    ['REFRESH_TOKEN_EXPIRES_IN', '90d', 'Refresh token expiration time'],
-    ['REFRESH_TOKEN_COOL_DOWN', '1m', 'Refresh token cooldown'],
-    ['API_TOKEN_EXPIRES_IN', '1000y', 'Api token expiration time'],
-    ]}></OptionTable>
-
-### Auth
-
-<OptionTable options={[
-    ['MESSAGING_PROVIDER_GMAIL_ENABLED', 'false', 'Enable Gmail API connection'],
-    ['MESSAGING_PROVIDER_GMAIL_CALLBACK_URL', '', 'Gmail auth callback'],
-    ['AUTH_GOOGLE_ENABLED', 'false', 'Enable Goole SSO login'],
-    ['AUTH_GOOGLE_CLIENT_ID', '', 'Google client ID'],
-    ['AUTH_GOOGLE_CLIENT_SECRET', '', 'Google client secret'],
-    ['AUTH_GOOGLE_CALLBACK_URL', '', 'Google auth callback'],
-    ['FRONT_AUTH_CALLBACK_URL', 'http://localhost:3001/verify ', 'Callback used for Login page'],
-    ['IS_SIGN_UP_DISABLED', 'false', 'Disable sign-up'],
-    ['PASSWORD_RESET_TOKEN_EXPIRES_IN', '5m', 'Password reset token expiration time'],
-    ]}></OptionTable>
-
-### Email
-
-<OptionTable options={[
-    ['EMAIL_FROM_ADDRESS', 'contact@yourdomain.com', 'Global email From: header used to send emails'],
-    ['EMAIL_FROM_NAME', 'John from YourDomain', 'Global name From: header used to send emails'],
-    ['EMAIL_SYSTEM_ADDRESS', 'system@yourdomain.com', 'Email address used as a destination to send internal system notification'],
-    ['EMAIL_DRIVER', 'logger', "Email driver: 'logger' (to log emails in console) or 'smtp'"],
-    ['EMAIL_SMTP_HOST', '', 'Email Smtp Host'],
-    ['EMAIL_SMTP_PORT', '', 'Email Smtp Port'],
-    ['EMAIL_SMTP_USER', '', 'Email Smtp User'],
-    ['EMAIL_SMTP_PASSWORD', '', 'Email Smtp Password'],
-  ]}></OptionTable>
-
-#### Email SMTP Server configuration examples
-
-<Tabs>
-
-  <TabItem value="Gmail" label="Gmail" default>
-
-  You will need to provision an [App Password](https://support.google.com/accounts/answer/185833).
-  - EMAIL_SMTP_HOST=smtp.gmail.com
-  - EMAIL_SERVER_PORT=465
-  - EMAIL_SERVER_USER=gmail_email_address
-  - EMAIL_SERVER_PASSWORD='gmail_app_password'
-
-  </TabItem>
-
-  <TabItem value="Office365" label="Office365">
-
-    Keep in mind that if you have 2FA enabled, you will need to provision an [App Password](https://support.microsoft.com/en-us/account-billing/manage-app-passwords-for-two-step-verification-d6dc8c6d-4bf7-4851-ad95-6d07799387e9).
-    - EMAIL_SMTP_HOST=smtp.office365.com
-    - EMAIL_SERVER_PORT=587
-    - EMAIL_SERVER_USER=office365_email_address
-    - EMAIL_SERVER_PASSWORD='office365_password'
-
-  </TabItem>
-
-  <TabItem value="Smtp4dev" label="Smtp4dev">
-
-    **smtp4dev** is a fake SMTP email server for development and testing.
-    - Run the smtp4dev image: `docker run --rm -it -p 8090:80 -p 2525:25 rnwood/smtp4dev`
-    - Access the smtp4dev ui here: [http://localhost:8090](http://localhost:8090)
-    - Set the following env variables:
-      - EMAIL_SERVER_HOST=localhost
-      - EMAIL_SERVER_PORT=2525
-
-  </TabItem>
-
-</Tabs>
-
-### Storage
-
-<OptionTable options={[
-    ['STORAGE_TYPE', 'local', "Storage driver: 'local' or 's3'"],
-    ['STORAGE_S3_REGION', '', 'Storage Region'],
-    ['STORAGE_S3_NAME', '', 'Bucket Name'],
-    ['STORAGE_S3_ENDPOINT', '', 'Use if a different Endpoint is needed (for example Google)'],
-    ['STORAGE_LOCAL_PATH', '.local-storage', 'data path (local storage)'],
-    ]}></OptionTable>
-
-### Message Queue
-
-<OptionTable options={[
-    ['MESSAGE_QUEUE_TYPE', 'pg-boss', "Queue driver: 'pg-boss' or 'bull-mq'"],
-    ]}></OptionTable>
-
-### Logging
-
-<OptionTable options={[
-    ['LOGGER_DRIVER', 'console', "The logging driver can be: 'console' or 'sentry'"],
-    ['LOG_LEVELS', 'error,warn', "The loglevels which are logged to the logging driver. Can include: 'log', 'warn', 'error'"],
-    ['EXCEPTION_HANDLER_DRIVER', 'sentry', "The exception handler driver can be: 'console' or 'sentry'"],
-    ['SENTRY_DSN', 'https://xxx@xxx.ingest.sentry.io/xxx', 'The sentry logging endpoint used if sentry logging driver is selected'],
-    ]}></OptionTable>
-
-
-### Data enrichment and AI
-
-<OptionTable options={[
-    ['OPENROUTER_API_KEY', '', "The API key for openrouter.ai, an abstraction layer over models from Mistral, OpenAI and more"]
-    ]}></OptionTable>
-
-
-### Support Chat
-
-<OptionTable options={[
-    ['SUPPORT_DRIVER', 'front', "Support driver ('front' or 'none')"],
-    ['SUPPORT_FRONT_HMAC_KEY', '<secret>', 'Suport chat key'],
-    ['SUPPORT_FRONT_CHAT_ID', '<id>', 'Support chat id'],
-    ]}></OptionTable>
-
-### Telemetry
-
-<OptionTable options={[
-    ['TELEMETRY_ENABLED', 'true', 'Change this if you want to disable telemetry'],
-    ['TELEMETRY_ANONYMIZATION_ENABLED', 'true', 'Telemetry is anonymized by default, you probably don\'t want to change this'],
-    ]}></OptionTable>
-
-### Debug / Development
-
-<OptionTable options={[
-    ['DEBUG_MODE', 'true', 'Activate debug mode'],
-    ['SIGN_IN_PREFILLED', 'true', 'Prefill the Signin form for usage in a demo or dev environment'],
-    ]}></OptionTable>
-
-### Workspace Cleaning
-
-<OptionTable options={[
-  ['WORKSPACE_INACTIVE_DAYS_BEFORE_NOTIFICATION', '', 'Number of inactive days before sending workspace deleting warning email'],
-  ['WORKSPACE_INACTIVE_DAYS_BEFORE_DELETION', '', 'Number of inactive days before deleting workspace'],
-  ]}></OptionTable>

packages/twenty-docs/docs/start/self-hosting/self-hosting.mdx

@@ -4,29 +4,180 @@ sidebar_position: 1
 sidebar_custom_props:
   icon: TbServer
 ---
-Right now, Docker containers are the only hosting option available, with more simple options to self-host Twenty coming soon. 
-Feel free to open issues on [GitHub](https://github.com/twentyhq/twenty/issues/new) if you want support for a specific cloud provider.
-
-## Production docker containers
-
-Prebuilt images for both front and back-end can be found on [docker hub](https://hub.docker.com/r/twentycrm/).
-
-For correct operation your will need to set [environment variables](environment-variables), a example configuration can be found [here](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/.env.example).
 
 
-## Render
+import DocCardList from '@theme/DocCardList';
 
-[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/twentyhq/twenty)
+import OptionTable from '@site/src/theme/OptionTable'
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 
-## AWS Elastic Beanstalk (Coming soon)
+# Setup Server
 
-A joint Docker image - containing both the frontend and server - that you can deploy using [AWS Elastic Beanstalk](https://aws.amazon.com/elasticbeanstalk/) is in the works. 
+<DocCardList/>
+
+# Setup Environment Variables
+
+## Frontend
+
+<OptionTable options={[
+    ['REACT_APP_SERVER_BASE_URL', 'http://localhost:3000', 'Url of backend server'],
+    ['REACT_APP_SERVER_AUTH_URL', 'http://localhost:3000/auth', 'Auth Url of backend server'],
+    ['REACT_APP_SERVER_FILES_URL', 'http://localhost:3000/files', 'Files Url of backend server'],
+    ['GENERATE_SOURCEMAP', 'false', 'Generate source maps for debugging'],
+    ['CHROMATIC_PROJECT_TOKEN', '', 'Chromatic token used for CI'],
+    ]}></OptionTable>
 
 
-<!--
+## Backend
 
-## Railway 
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/YWGqza?referralCode=3CLObs)
+### Config
 
--->
+<OptionTable options={[
+    ['PG_DATABASE_URL', 'postgres://user:pw@localhost:5432/default?connection_limit=1', 'Database connection'],
+    ['REDIS_HOST', '127.0.0.1', 'Redis connection host'],
+    ['REDIS_PORT', '6379', 'Redis connection port'],
+    ['FRONT_BASE_URL', 'http://localhost:3001', 'Url to the hosted frontend'],
+    ['SERVER_URL', 'http://localhost:3000', 'Url to the hosted server'],
+    ['PORT', '3000', 'Port'],
+    ]}></OptionTable>
+
+### Tokens
+
+<OptionTable options={[
+    ['ACCESS_TOKEN_SECRET', '<random>', 'Secret used for the access tokens'],
+    ['ACCESS_TOKEN_EXPIRES_IN', '30m', 'Access token expiration time'],
+    ['LOGIN_TOKEN_SECRET', '<random>', 'Secret used for the login tokens'],
+    ['LOGIN_TOKEN_EXPIRES_IN', '15m', 'Login token expiration time'],
+    ['REFRESH_TOKEN_SECRET', '<random>', 'Secret used for the refresh tokens'],
+    ['REFRESH_TOKEN_EXPIRES_IN', '90d', 'Refresh token expiration time'],
+    ['REFRESH_TOKEN_COOL_DOWN', '1m', 'Refresh token cooldown'],
+    ['API_TOKEN_EXPIRES_IN', '1000y', 'Api token expiration time'],
+    ]}></OptionTable>
+
+### Auth
+
+<OptionTable options={[
+    ['MESSAGING_PROVIDER_GMAIL_ENABLED', 'false', 'Enable Gmail API connection'],
+    ['MESSAGING_PROVIDER_GMAIL_CALLBACK_URL', '', 'Gmail auth callback'],
+    ['AUTH_GOOGLE_ENABLED', 'false', 'Enable Goole SSO login'],
+    ['AUTH_GOOGLE_CLIENT_ID', '', 'Google client ID'],
+    ['AUTH_GOOGLE_CLIENT_SECRET', '', 'Google client secret'],
+    ['AUTH_GOOGLE_CALLBACK_URL', '', 'Google auth callback'],
+    ['FRONT_AUTH_CALLBACK_URL', 'http://localhost:3001/verify ', 'Callback used for Login page'],
+    ['IS_SIGN_UP_DISABLED', 'false', 'Disable sign-up'],
+    ['PASSWORD_RESET_TOKEN_EXPIRES_IN', '5m', 'Password reset token expiration time'],
+    ]}></OptionTable>
+
+### Email
+
+<OptionTable options={[
+    ['EMAIL_FROM_ADDRESS', 'contact@yourdomain.com', 'Global email From: header used to send emails'],
+    ['EMAIL_FROM_NAME', 'John from YourDomain', 'Global name From: header used to send emails'],
+    ['EMAIL_SYSTEM_ADDRESS', 'system@yourdomain.com', 'Email address used as a destination to send internal system notification'],
+    ['EMAIL_DRIVER', 'logger', "Email driver: 'logger' (to log emails in console) or 'smtp'"],
+    ['EMAIL_SMTP_HOST', '', 'Email Smtp Host'],
+    ['EMAIL_SMTP_PORT', '', 'Email Smtp Port'],
+    ['EMAIL_SMTP_USER', '', 'Email Smtp User'],
+    ['EMAIL_SMTP_PASSWORD', '', 'Email Smtp Password'],
+  ]}></OptionTable>
+
+#### Email SMTP Server configuration examples
+
+<Tabs>
+
+  <TabItem value="Gmail" label="Gmail" default>
+
+  You will need to provision an [App Password](https://support.google.com/accounts/answer/185833).
+  - EMAIL_SMTP_HOST=smtp.gmail.com
+  - EMAIL_SERVER_PORT=465
+  - EMAIL_SERVER_USER=gmail_email_address
+  - EMAIL_SERVER_PASSWORD='gmail_app_password'
+
+  </TabItem>
+
+  <TabItem value="Office365" label="Office365">
+
+    Keep in mind that if you have 2FA enabled, you will need to provision an [App Password](https://support.microsoft.com/en-us/account-billing/manage-app-passwords-for-two-step-verification-d6dc8c6d-4bf7-4851-ad95-6d07799387e9).
+    - EMAIL_SMTP_HOST=smtp.office365.com
+    - EMAIL_SERVER_PORT=587
+    - EMAIL_SERVER_USER=office365_email_address
+    - EMAIL_SERVER_PASSWORD='office365_password'
+
+  </TabItem>
+
+  <TabItem value="Smtp4dev" label="Smtp4dev">
+
+    **smtp4dev** is a fake SMTP email server for development and testing.
+    - Run the smtp4dev image: `docker run --rm -it -p 8090:80 -p 2525:25 rnwood/smtp4dev`
+    - Access the smtp4dev ui here: [http://localhost:8090](http://localhost:8090)
+    - Set the following env variables:
+      - EMAIL_SERVER_HOST=localhost
+      - EMAIL_SERVER_PORT=2525
+
+  </TabItem>
+
+</Tabs>
+
+### Storage
+
+<OptionTable options={[
+    ['STORAGE_TYPE', 'local', "Storage driver: 'local' or 's3'"],
+    ['STORAGE_S3_REGION', '', 'Storage Region'],
+    ['STORAGE_S3_NAME', '', 'Bucket Name'],
+    ['STORAGE_S3_ENDPOINT', '', 'Use if a different Endpoint is needed (for example Google)'],
+    ['STORAGE_LOCAL_PATH', '.local-storage', 'data path (local storage)'],
+    ]}></OptionTable>
+
+### Message Queue
+
+<OptionTable options={[
+    ['MESSAGE_QUEUE_TYPE', 'pg-boss', "Queue driver: 'pg-boss' or 'bull-mq'"],
+    ]}></OptionTable>
+
+### Logging
+
+<OptionTable options={[
+    ['LOGGER_DRIVER', 'console', "The logging driver can be: 'console' or 'sentry'"],
+    ['LOG_LEVELS', 'error,warn', "The loglevels which are logged to the logging driver. Can include: 'log', 'warn', 'error'"],
+    ['EXCEPTION_HANDLER_DRIVER', 'sentry', "The exception handler driver can be: 'console' or 'sentry'"],
+    ['SENTRY_DSN', 'https://xxx@xxx.ingest.sentry.io/xxx', 'The sentry logging endpoint used if sentry logging driver is selected'],
+    ]}></OptionTable>
+
+
+### Data enrichment and AI
+
+<OptionTable options={[
+    ['OPENROUTER_API_KEY', '', "The API key for openrouter.ai, an abstraction layer over models from Mistral, OpenAI and more"]
+    ]}></OptionTable>
+
+
+### Support Chat
+
+<OptionTable options={[
+    ['SUPPORT_DRIVER', 'front', "Support driver ('front' or 'none')"],
+    ['SUPPORT_FRONT_HMAC_KEY', '<secret>', 'Suport chat key'],
+    ['SUPPORT_FRONT_CHAT_ID', '<id>', 'Support chat id'],
+    ]}></OptionTable>
+
+### Telemetry
+
+<OptionTable options={[
+    ['TELEMETRY_ENABLED', 'true', 'Change this if you want to disable telemetry'],
+    ['TELEMETRY_ANONYMIZATION_ENABLED', 'true', 'Telemetry is anonymized by default, you probably don\'t want to change this'],
+    ]}></OptionTable>
+
+### Debug / Development
+
+<OptionTable options={[
+    ['DEBUG_MODE', 'true', 'Activate debug mode'],
+    ['SIGN_IN_PREFILLED', 'true', 'Prefill the Signin form for usage in a demo or dev environment'],
+    ]}></OptionTable>
+
+### Workspace Cleaning
+
+<OptionTable options={[
+  ['WORKSPACE_INACTIVE_DAYS_BEFORE_NOTIFICATION', '', 'Number of inactive days before sending workspace deleting warning email'],
+  ['WORKSPACE_INACTIVE_DAYS_BEFORE_DELETION', '', 'Number of inactive days before deleting workspace'],
+  ]}></OptionTable>

packages/twenty-docs/docs/start/self-hosting/upgrade-guide.mdx

@@ -0,0 +1,8 @@
+---
+title: Upgrade guide
+sidebar_position: 3
+sidebar_class_name: coming-soon
+sidebar_custom_props:
+  icon: TbServer
+---
+