Feat/front docs (#3)

* docs: frontend setup

* docs: add frontend app_startup content

docs/src/04_01_setup.md

@@ -0,0 +1,166 @@
+# Setup
+
+This guide outlines the steps necessary to set up a frontend development environment using Dioxus and Tailwind.
+
+## Dioxus Configuration
+
+Dioxus, a Rust framework, allows you to build responsive web applications. To use Dioxus, you need to install the Dioxus Command Line Interface (CLI) and the Rust target `wasm32-unknown-unknown`.
+
+### Step 1: Install the Dioxus CLI
+
+Install the Dioxus CLI by running the following command:
+
+```bash
+cargo install dioxus-cli
+```
+
+### Step 2: Install the Rust Target
+
+Ensure the `wasm32-unknown-unknown` target for Rust is installed by running:
+
+```bash
+rustup target add wasm32-unknown-unknown
+```
+
+### Step 3: Create a Frontend Crate
+
+Create a new frontend crate by executing:
+
+```bash
+cargo new --bin demo
+cd demo
+```
+
+### Step 4: Add Dioxus and the Web Renderer as Dependencies
+
+Add Dioxus and the web renderer as dependencies to your project. This step modifies your `Cargo.toml` file:
+
+```bash
+cargo add dioxus
+cargo add dioxus-web
+```
+
+## Tailwind Configuration
+
+Tailwind CSS is a utility-first CSS framework that can be used with Dioxus to build custom designs.
+
+### Step 1: Install Node Package Manager and Tailwind CSS CLI
+
+Install [Node Package Manager (npm)](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) and the [Tailwind CSS CLI](https://tailwindcss.com/docs/installation).
+
+### Step 2: Initialize a Tailwind CSS Project
+
+Initialize a new Tailwind CSS project using the following command:
+
+```bash
+npx tailwindcss init
+```
+
+This command creates a `tailwind.config.js` file in your project's root directory.
+
+### Step 3: Modify the Tailwind Configuration File
+
+Edit the `tailwind.config.js` file to include Rust, HTML, and CSS files from the `src` directory and HTML files from the `dist` directory:
+
+```json
+module.exports = {
+    mode: "all",
+    content: [
+        // Include all Rust, HTML, and CSS files in the src directory
+        "./src/**/*.{rs,html,css}",
+        // Include all HTML files in the output (dist) directory
+        "./dist/**/*.html",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}
+```
+
+### Step 4: Create an Input CSS File
+
+Create an `input.css` file and populate it with the following content:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+## Linking Dioxus with Tailwind
+
+To use Tailwind with Dioxus, create a `Dioxus.toml` file in your project's root directory. This file links to the `tailwind.css` file.
+
+### Step 1: Create a `Dioxus.toml` File
+
+The `Dioxus.toml` file should contain:
+
+```toml
+[application]
+
+# App (Project) Name
+name = "rusty-films"
+
+# Dioxus App Default Platform
+# desktop, web, mobile, ssr
+default_platform = "web"
+
+# `build` & `serve` dist path
+out_dir = "dist"
+
+# Resource (public) file folder
+asset_dir = "public"
+
+[web.app]
+
+# HTML title tag content
+title = "🦀 | Rusty Films"
+
+[web.watcher]
+
+# When watcher trigger, regenerate the `index.html`
+reload_html = true
+
+# Which files or dirs will be watcher monitoring
+watch_path = ["src", "public"]
+
+[web.resource]
+
+# CSS style file
+style = ["tailwind.css"]
+
+# Javascript code file
+script = []
+
+[web.resource.dev]
+
+# serve: [dev-server] only
+
+# CSS style file
+style = []
+
+# Javascript code file
+script = []
+```
+
+## Additional Steps
+
+### Step 1: Install the Tailwind CSS IntelliSense VSCode Extension
+
+The [Tailwind CSS IntelliSense VSCode extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) can help you write Tailwind classes and components more efficiently.
+
+### Step 2: Enable Regex Support for the Tailwind CSS IntelliSense VSCode Extension
+
+Navigate to the settings for the Tailwind CSS IntelliSense VSCode extension and locate the experimental regex support section. Edit the `setting.json` file to look like this:
+
+```json
+"tailwindCSS.experimental.classRegex": ["class: \"(.*)\""],
+"tailwindCSS.includeLanguages": {
+    "rust": "html"
+},
+```
+
+This configuration enables the IntelliSense extension to recognize Tailwind classes in Rust files treated as HTML.
+
+After completing these steps, your frontend development environment should be ready. You can now start building your web application using Dioxus and Tailwind CSS.

docs/src/04_02_app_startup.md

@@ -0,0 +1,89 @@
+# Starting the Application
+
+Before we proceed, let's ensure that your project directory structure is set up correctly. Here's how the `front` folder should look:
+
+```bash
+front
+├── Cargo.toml
+├── src
+│   └── main.rs
+├── public
+│   └── ... (place your static files here such as images)
+├── input.css
+├── tailwind.config.js
+└── Dioxus.toml
+```
+
+Let's detail the contents:
+
+- `Cargo.toml`: The manifest file for Rust's package manager, Cargo. It holds metadata about your crate and its dependencies.
+
+- `src/main.rs`: The primary entry point for your application. It contains the main function that boots your Dioxus app and the root component.
+
+- `public`: This directory is designated for public assets for your application. Static files like images should be placed here. Also, the compiled CSS file (`tailwind.css`) from the Tailwind CSS compiler will be output to this directory.
+
+- `input.css`: An input file for the Tailwind CSS compiler, which includes the basic Tailwind directives.
+
+- `tailwind.config.js`: The configuration file for Tailwind CSS. It instructs the compiler where to find your source files and other configuration details.
+
+- `Dioxus.toml`: This configuration file for Dioxus stipulates application metadata and build configurations.
+
+## Image resources
+
+For this workshop, we have prepared a set of default images that you will be using in the development of the application. Feel free to use your own images if you wish.
+
+The images should be placed as follows:
+
+```bash
+public
+├── image1.png
+├── image2.png
+├── image3.png
+└── ... (rest of your images)
+```
+<img src="./assets/bcnrust.png" width="80" height="auto" />
+<img src="./assets/devbcn.png" width="140" height="auto" />
+<img src="./assets/ferris.png" width="80" height="auto" />
+
+
+Now that we've confirmed the directory structure, let's proceed to initialize your application...
+
+To initialize your application, modify your `main.rs` file as follows:
+
+```rust
+#![allow(non_snake_case)]
+// Import the Dioxus prelude to gain access to the `rsx!` macro and the `Scope` and `Element` types.
+use dioxus::prelude::*;
+
+fn main() {
+    // Launch the web application using the App component as the root.
+    dioxus_web::launch(App);
+}
+
+// Define a component that renders a div with the text "Hello, world!"
+fn App(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            "Hello, world!"
+        }
+    })
+}
+```
+
+With this setup, we've created a basic Dioxus web application that will display "Hello, world!" when run.
+
+To launch our application in development mode, we'll need to perform two steps concurrently in separate terminal processes. Navigate to the `front` crate folder that was generated earlier, and proceed as follows:
+
+1. **Start the Tailwind CSS compiler**: Run the following command to initiate the Tailwind CSS compiler in watch mode. This will continuously monitor your `input.css` file for changes, compile the CSS using your Tailwind configuration, and output the results to `public/tailwind.css`.
+
+```bash
+npx tailwindcss -i ./input.css -o ./public/tailwind.css --watch
+```
+
+2. **Launch Dioxus in serve mode**: Run the following command to start the Dioxus development server. This server will monitor your source code for changes, recompile your application as necessary, and serve the resulting web application.
+
+```bash
+dioxus serve
+```
+
+Now, your development environment is up and running. Changes you make to your source code will automatically be reflected in the served application, thanks to the watching capabilities of both the Tailwind compiler and the Dioxus server. You're now ready to start building your Dioxus application!

docs/src/04_03_components.md

@@ -0,0 +1 @@
+# Components

docs/src/04_frontend.md

@@ -0,0 +1,9 @@
+# Frontend
+
+In this guide, we'll be using [Dioxus](https://dioxuslabs.com/) as the frontend for our project. Dioxus is a portable, performant, and ergonomic framework for building cross-platform user interfaces in Rust. Heavily inspired by React, Dioxus allows you to build apps for the Web, Desktop, Mobile, and more. Its core implementation can run anywhere with no platform-dependent linking, which means it's not intrinsically linked to WebSys like many other Rust frontend toolkits. However, it's important to note that Dioxus hasn't reached a stable release yet, so some APIs, particularly for Desktop, may still be in flux​1​.
+
+As for styling our app, we'll be using [Tailwind CSS](https://tailwindcss.com/). Tailwind is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. You can set it up in your project, build something with it in an online playground, and even learn more about it directly from the team on their channel. Tailwind also offers a set of beautiful UI components crafted by its creators to help you speed up your development process​2​.
+
+This combination of tools will allow us to concentrate our energy on frontend development in Rust, rather than spending excessive time on styling our app.
+
+In our guide, we'll be providing hints on how to use Tailwind classes with our Dioxus components. This way, you can focus on the logic of your components, while still being able to apply responsive, modern styles to them.

docs/src/SUMMARY.md

@@ -6,5 +6,7 @@
 
 - [Prerequisites](./01_prerequisites.md)
 - [Project structure](./02_project_structure.md)
-
-<!-- # Getting started -->
+- [Frontend](./04_frontend.md)
+  - [Setup](./04_01_setup.md)
+  - [Starting the Application](./04_02_app_startup.md)
+  - [Components](./04_03_components.md)