User guide & vale setup (#2260)

* refactored Storybook UI

* refactored Storybook UI

* removed extra cards from the doc, added card for ui components

* added hover behavior to doc page & made it look selected

* separate storybook docs and tests

* separating storybook tests and docs

* fixed spelling errors in docs

* Final round of edits for frontend, added backend folder architecture

* Created CODE_OF_CONDUCT.md

* Add code of conduct to contributing.md

* doc changes

* fixed broken links

* doc addition and changes

* introduce user guide & graphql api

* set up vale, added to docs

* vale config file

* revised backend best practices

* connecting zapier and twenty

* added warning for zapier

docs/docs/contributor/server/others/best-practices.mdx

@@ -0,0 +1,26 @@
+---
+title: Best Practices
+sidebar_position: 3
+sidebar_custom_props:
+  icon: TbChecklist
+---
+
+This document outlines the best practices you should follow when working on the backend.
+
+## Follow a modular approach
+
+We follow a modular approach for our backend, which is a fundamental principle when working with NestJS. Make sure you break down your code into reusable modules to maintain a clean and organized codebase. 
+Each module should encapsulate a particular feature or functionality and have a well-defined scope. This modular approach enables clear separation of concerns and removes unnecessary complexities.  
+
+
+## Expose services to be used in modules
+
+We encourage creating services that have a clear and single responsibility, which enhances code readability and maintainability. Services should be named descriptively and consistently. 
+
+We also encourage exposing services to be used in other modules. Exposing services to other modules is made possible through NestJS's powerful dependency injection system, and promotes loose coupling between components. 
+
+## Avoid using `any` type
+
+When you declare a variable as `any`, TypeScript's type checker doesn't perform any type checking, making it possible to assign any type of values to the variable. TypeScript is designed to use type inference to determine the type of variable based on the value. By declaring it as `any`, TypeScript can no longer infer the type. This makes it hard to catch type-related errors during development, leading to runtime errors and makes the code less maintainable, less reliable, and harder to understand for others.  
+
+This is why everything should be typed. So if you create a new object with a first name and last name, you should create an interface or type that contains a first name and last name that defines the shape of the object you are manipulating.

docs/docs/user-guide/connect-zapier.mdx

@@ -0,0 +1,27 @@
+---
+title: Connect Twenty and Zapier
+sidebar_position: 3
+sidebar_custom_props:
+  icon: TbBrandZapier
+---
+
+:::caution
+
+Twenty integration is currently being registered in the public Zapier repository, you may not find it until the publishing process is complete.
+
+:::
+
+Sync Twenty with 3000+ apps using [Zapier](https://zapier.com/), and automate your work. Here's how you can connect Twenty to Zapier:
+
+1. Go to Zapier and log in. 
+2. Click on `+ Create Zap` in the left sidebar. 
+3. Choose the application you want to set as the trigger. A trigger refers to an event that starts the automation. 
+4. Select Twenty as the action. An action is the event that is performed once the automation is triggered. [Learn more about triggers and actions in Zapier.](https://zapier.com/how-it-works)
+5. Once you choose the Twenty account that you want to use for your automation, you'll be prompted to authorize it by adding an API key. You can learn [how to generate your API key here.](generating-api-keys.mdx)
+6. Enter your API key and click on 'Yes, Continue to Twenty.'
+
+<div style={{textAlign: 'center'}}>
+    <img src="/img/user-guide/connect-zapier.png" alt="Connect Twenty to Zapier" />
+</div>
+
+You can now continue creating your automation!

docs/docs/user-guide/custom objects.mdx

@@ -1,9 +1,41 @@
 ---
-title: Custom Objects
+title: Creating Custom Objects
 sidebar_position: 1
-sidebar_class_name: coming-soon
 sidebar_custom_props:
   icon: TbAugmentedReality
 ---
 
-Coming soon!
+Objects are structures that allow you to store data (records, attributes, and values) specific to an organization. Twenty provides both standard and custom objects.
+
+Standard objects are built-in objects with a set of attributes available for all users. All workspaces come with three standard objects by default: People, Companies, and Opportunities. Standard objects have standard fields that are also available for all Twenty users, like Account Owner and URL.
+
+Custom objects are objects that you can create to store information that is unique to your organization. They are not built-in; members of your workspace can create and customize custom objects to hold information that standard objects aren't suitable for. For example, if you're Airbnb, you may want to create a custom object for Listings or Reservations.    
+
+## Creating a new custom object 
+
+To create a new custom object:
+
+1. Go to Settings in the sidebar on the left.
+2. Under Workspace, go to Data model. Here you'll be able to see an overview of all your existing Standard and Custom objects (both active and disabled).
+<br/>
+
+<div style={{textAlign: 'center'}}>
+    <img src="/img/user-guide/view-all-objects.png" alt="View all objects" />
+</div>
+
+<br/>
+3. Click on `+ New object` at the top, then choose Custom as the object type. Enter the name (both singular and plural) and description for your custom object and hit Save (at the top right). Using Listing as an example of custom object, the singular would be "listing" and the plural would be "listings" along with a description like "Listings that hosts created to showcase their property." 
+
+<br/>
+
+<div style={{textAlign: 'center'}}>
+    <img src="/img/user-guide/create-custom-object.gif" alt="Create custom object" />
+</div>
+
+<br/>
+
+4. Once you create your custom object, you'll be able to manage it. You can edit the name and description, view the different fields, and add more fields.
+
+<div style={{textAlign: 'center'}}>
+    <img src="/img/user-guide/manage-custom-object.png" alt="Create custom object" />
+</div>

docs/docs/user-guide/generating-api-keys.mdx

@@ -0,0 +1,26 @@
+---
+title: Generating an API Key
+sidebar_position: 2
+sidebar_custom_props:
+  icon: TbApi
+---
+
+To generate an API key: 
+
+1. Go to Settings in the sidebar on the left.
+2. Under Workspace, go to Developers. Here, you'll see a list of active keys that you or your team have created.
+3. To generate a new key, click on `+ Create key` on the top right. 
+4. Give your API key a name, an expiration date, and a logo.
+5. Hit save to see your API key. 
+6. Since the key is only visible once, make sure you store it somewhere safe. 
+
+:::caution Note
+
+You API key contains sensitive information, and shouldn't be shared with services you don't fully trust. If leaked, it can be used maliciously. If you think your API key has been compromised, make sure you disable it and generate a new one.  
+
+:::
+
+
+## Regenerating API key
+
+To regenerate an API key, simply click on the key you want to regenerate. You'll then be able to see a button to regenerate the API key. 

docs/docs/user-guide/zapier integration.mdx

@@ -1,9 +0,0 @@
----
-title: Zapier tutorial
-sidebar_position: 2
-sidebar_class_name: coming-soon
-sidebar_custom_props:
-  icon: TbBrandZapier
----
-
-Coming soon!