[PATCH v1 16/16] chore: update README.md

[Muhammad Rizki <kiizuha@gnuweeb.org>]

This update tells guide how to install and contribute to this project.

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 README.md | 117 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 95 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index b5b2950..7b63918 100644
--- a/README.md
+++ b/README.md
@@ -1,38 +1,111 @@
-# sv
+<h1 align="center">
+  GNU/Weeb Mail
+</h1>
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+<h2 id="table-of-contents">
+  Table of Contents
+</h2>
 
-## Creating a project
+- [Requirements](#requirements)
+- [How to Run](#how-to-run)
+- [How to Build](#how-to-build)
+- [Code Standards](#code-standards)
+- [How to Develop or Contribute](#how-to-develop)
 
-If you're seeing this, you've probably already done this step. Congrats!
+<h2 id="requirements">
+  Requirements
+</h2>
 
-```bash
-# create a new project in the current directory
-npx sv create
+- **NodeJS** version 18+,strongly recommended to use version 20+ as this project developed using **NodeJS** version 20+
+  [Download](https://nodejs.org/en/download)
+- **TypeScript** version 5, no need to download in your OS as this project will install the TypeScript only inside this project.
+- Code Editor, of course, we recommend using your favorite IDE, for example, [VS Code](https://code.visualstudio.com/download).
+- Svelte 5 Runes knowledge.
 
-# create a new project in my-app
-npx sv create my-app
+<h2 id="how-to-run">
+  How to Run
+</h2>
+
+```sh
+# install all dependencies before running this project
+npm i
+npm run dev
 ```
 
-## Developing
+<h2 id="how-to-build">
+  How to Build
+</h2>
+
+```sh
+# install all dependencies before building this project
+npm i
+npm run build
+```
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+After build, the `dist` folder will be created, copy them to your own server, for example, [nginx](https://nginx.org/en/download.html).
 
-```bash
-npm run dev
+<h2 id="code-standards">
+Code Standards
+</h2>
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
+We use `LF` for each End of Line style and add empty newline for every End of File, you must setting all that in your IDE before contributing on this project.
 
-## Building
+<h2 id="how-to-develop">
+How to Develop or Contribute
+</h2>
 
-To create a production version of your app:
+<h3>Framework</h3>
 
-```bash
-npm run build
+If you are new to **SvelteKit** using the **Svelte 5 Runes**, we recommend to learn the framework first, you can learn it [here](https://learn.svelte.dev) or just [read the docs](https://svelte.dev/docs/kit/introduction).
+
+<h3>Base Components</h3>
+
+We used [**shadcn-svelte**](https://www.shadcn-svelte.com/) for the base components, we strongly recommended to use it for now, if you want to add components, just go [here](https://www.shadcn-svelte.com/docs/components/accordion).
+This is how you add **shadcn-svelte** component
+
+```sh
+npx shadcn-svelte@latest add <component-name>
 ```
 
-You can preview the production build with `npm run preview`.
+After installed **shadcn-svelte** component, it will generated in [$lib/components/ui](./src/lib/components/ui/), if you want to have a small edit.
+
+<h3>Custom Components</h3>
+
+If you want to create your own custom components you can create it in [$lib/components/customs](./src/lib/components/customs/).
+
+<h3>Static Files</h3>
+
+All static files were stored in [./static/](./static/).
+
+<h3>Page Routes</h3>
+
+All pages are created in [./src/routes](./src/routes/) and all protected routes (login required) are created in [./src/routes/(protected)](<./src/routes/(protected)/>).
+
+<h3>Hooks Functions</h3>
+
+All hooks are created in [$lib/hooks](./src/lib/hooks/).
+
+<h3>Form Schemas</h3>
+
+All form schemas are created in [$lib/schemas](./src/lib/schemas/).
+
+<h3>Constants</h3>
+
+All constants data are created in [$constants](./src/lib/constants/).
+
+<h3>Typings</h3>
+
+All types are created in [$typings](./src/lib/typings/).
+
+<h3>Utilities</h3>
+
+All util or helper functions are created in [$utils](./src/lib/utilities/).
+
+<h3>Styling</h3>
+
+If you want to create styles or CSS that only affects inside its page or component just write it inside that file,
+if you want to create styles or CSS that affects globally you can write it in [./src/app.css](./src/app.css).
+
+<h3>Aliases</h3>
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+You may add some import aliases, you can edit it in [svelte.config.js](./svelte.config.js), we used `$` as import alias, you must follow our standards to remain consistency.
-- 
Muhammad Rizki