Front end web development in Rust

Add yew as a dependency (0.20) and enable client-side rendering for an admin app. Create a root function component and render it with trunk using wasm.

Explore building a login form in Rust with Yew by creating a reusable input component driven by props, wiring up labels, ids, and Bootstrap styling for accessible, modular front-end development.

Learn to handle form submissions without page refresh in a Rust frontend, using a standalone login form with onsubmit and onchange, state, and gloo-console logging before posting to an API.

Start the backend server using docker compose and ensure postgresql connectivity via migrations. Create an admin user and expose the rocket backend at port 8000 for login requests from the frontend.

Create an api module to send login requests via gloo net with a json payload, and deserialize the token from the response via serde; also implement a me endpoint.

Develop an alert component and robust error handling for login, token handling, and the me endpoint, with bootstrap styling and yew router integration.

Explore routing in front-end Rust apps using yew router to render login, dashboard, and CRUD pages for rustaceans and crates, with a switch-based route enum and redirects after login.

Redirect the login form to the home page after successful submission using the navigator and route enum, while logging the username and preparing a reusable user context for token-based requests.

Build a global user context with a yew reducer, tracking optional token and username, and expose it via a current user provider that handles login and logout actions.

Build a reusable sidebar navigation using bootstrap and yew router, with three links (home, rustaceans, crates), and implement active link highlighting via current route to improve usability.

Store the auth token in browser session storage using gloo storage to persist sessions across refreshes, verify with the me endpoint, and auto-redirect logged-in users.

Render a universal logout link in the header on every page and implement an on-click handler that dispatches login fail and clears session storage to remove the current user.

Create a rustaceans list and add workflow in a Rust frontend using Yew, with a dynamic table, add form, token-based API calls, and routing.

Prevent excessive http requests on the rustaceans page by using a use_state_eq hook and a custom use_rustaceans suspension hook with suspense, loader, and a fallback loading state.

Learn to build and refine a rustacean edit page by implementing edit and delete forms, styling with Bootstrap, handling tokens, and ensuring robust routing and error handling.

Create a rustaceans delete route and page, load rustacean, return a 404 if not found, confirm deletion, perform an HTTP delete with token, handle errors, and navigate back to rustaceans.

Implement a crates management feature in a Rust frontend by linking crates to rustacean authors, building a crates module with a list view and a create/edit form using API integration.

Build a select component in a Rust Yew frontend by loading rustaceans with use_rustaceans, rendering a dropdown, and passing it as a prop through a suspense-wrapped add form.

Create a reusable text area component for the description field in a Rust frontend app, reusing the input pattern and wiring description state and change handling in the crate form.

Implement edit and delete functionality for crates in a Rust front-end, wiring the crate show, update, and delete APIs and loading the edit form with suspense.

Learn how to copy image files into the dist directory for a yew web app using trunk, render an svg logo in a login form, and center it with bootstrap.

Ship a custom CSS file using trunk, writing Sass (style.scss) that compiles to CSS and ships to the dist folder for a unique app look with an Alice Blue background.

Learn to build a production release of a Rust wasm app with trunk, stripping development features, reducing wasm size, minifying CSS, and deploying the dist files to a web server.