better docs

docs/frontend.md

@@ -1,23 +1,10 @@
-The current Front-end of Lychee is 100% JS generated. In order to modify it you will need to recompile it.
-
-### Git Submodule
-
-At the moment, the current strategy of Lychee is to separate the front-end from the back-end.
-This allowed us to easily develop the version 4 while having the version 3 still live.
-It also kept the consistency of the GUI between the two major versions.
-
-As a result you will find the front-end files in the `public/Lychee-front` directory after you initialized it as follows:
-
-```bash
-git submodule init
-git submodule update
-```
+The current Front-end of Lychee is using [Tailwindcss][1], [AlpineJS][2], [TypeScript][3] and [Blade templates][4]. In order to modify it you will need to recompile it.
 
 ### Dependencies
 
 In order to compile the front-end, you have to install the following dependencies:
 
-- `node` [Node.js](http://nodejs.org) v10.0.0 or later
+- `node` [Node.js](http://nodejs.org) v20.0.0 or later
 - `npm` [Node Packaged Modules](https://www.npmjs.org)
 
 After installing [Node.js](http://nodejs.org) you can use the included `npm` package manager to download all dependencies:
@@ -28,11 +15,29 @@ npm install
 
 ### Build
 
-The Gulpfile is located in `public/Lychee-front/` and can be executed using the `npm run compile` command.
-This will take care of concatenating and minimizing the files.
+In order to generate the front-end visual you will need to run the following:
+
+```bash
+npm run dev
+```
+This will create the files required to run Lychee.
+
+When running in production, you should be used instead:
+```bash
+npm run build
+```
+This will create a `public/build` folder with the associated files.
+
+### Points of attention
 
-Do not forget to clear your cache in order to see the change done.
+To ease your development, some pain points are to be considered:
 
-### Creating Pull Requests
+- variables names (attributes) in blade templates must use camelCase.
+- try to keep the alpine components code in the `.ts` files.
+- TailwindCSS is doing tree-shaking, this means that any unused css class will not be provided in the production build.
+  When using classes programatically (e.g. in php), make sure to add them to `tailwind.config.js`
 
-Please be sure to submit any front end pull requests to [LycheeOrg/Lychee-front](https://github.com/LycheeOrg/Lychee-front).
+[1]: https://tailwindcss.com/docs/utility-first
+[2]: https://alpinejs.dev
+[3]: https://www.typescriptlang.org/
+[4]: https://laravel.com/docs/blade