first commit

Author: yowari

exercise/01-intialize-remix/README.md

@@ -0,0 +1,11 @@
+# 01. Initialize Remix
+
+You can initialize a Remix project using the [create-remix CLI](https://remix.run/docs/en/main/other-api/create-remix)
+
+```
+npx create-remix@latest
+```
+
+Next, go to the project directory and launch
+
+Congratulation! you have your application available on http://localhost:3000

exercise/02-deploy/README.md

@@ -0,0 +1,27 @@
+# 02. Deploy
+
+run build script for production build
+
+```
+npm run build
+```
+
+Once the project built, you can launch the server and access to the Remix web application
+
+```
+npm run start
+```
+
+Remix is **platform agnostic**. When you build a Remix application, it produces 2 folders inside the `build` folder:
+
+- **client**: it contains all public files (script, styles, assets, etc.) that can be downloaded by the browser
+- **server**: it has the modules that contains the functions handlers. It's just a brunch of JavaScript functions
+
+Remix don't produce a server! So you still need a server that calls the server handlers. `@remix-run/serve`
+provides a production ready express based server.
+
+```
+npx remix-serve ./build/server/index.js
+```
+
+And that exactly what is in the `start` command. You can find it in the `package.json`.

exercise/03-routing/README.md

@@ -0,0 +1,40 @@
+# 03. Routing
+
+Remix is a file based routing which means that the url is based on the file name. Each route is specified by
+a file located in `app/routes`. The displayed component need to be default exported.
+
+For our pizza app, we need 2 pages: the first one is where the user specify the pizza size and toppings,
+the second is used to display a confirmation message.
+
+Replace the template `app/routes/_index.tsx`
+
+```jsx
+export default function Index() {
+  return (
+    <main>
+      <h2>Remixez votre pizza</h2>
+      {/* TODO: size and toppings selection */}
+    </main>
+  );
+}
+```
+
+create a file `app/routes/confirmation.tsx`
+
+```jsx
+export default function Confirmation() {
+  return (
+    <main>
+      <h2>Merci pour votre commande</h2>
+      <p>
+        Votre pizza sera prête dans quelques minutes. Vous serez notifié une
+        fois que c&apos;est pr&ecirc;t.
+      </p>
+      <a href="/">Lancer une nouvelle commande</a>
+    </main>
+  );
+}
+```
+
+If you want to learn more on the convention used by Remix, you can check the
+[visualization](https://interactive-remix-routing-v2.netlify.app) done by Dilum Sanjaya.

exercise/04-tailwind/README.md

@@ -0,0 +1,46 @@
+# 04. Tailwind
+
+Since Remix uses Vite, most of the setup of Tailwind CSS is the same as setup it on Vite project.
+
+```
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init --ts -p
+```
+
+In `tailwind.config.ts`, add the paths of the template files
+
+```typescript
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: ['./app/**/*.{js,jsx,ts,tsx}'], // Add the template files
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config
+```
+
+Create `./app/tailwind.css` and add the tailwind directives
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+In `./app/root.tsx` import the newly-created `./app/tailwind.css` file
+
+```typescript
+import type { LinksFunction } from "@remix-run/node";
+import stylesheet from "~/tailwind.css?url";
+
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: stylesheet },
+];
+```
+
+And that's it!
+
+For more integration like css-in-js solutions, you can check the
+[examples repository](https://github.com/remix-run/examples).

exercise/05-form/README.md

@@ -0,0 +1,50 @@
+# 05. Form
+
+The customer need to select the pizza size and the toppings.
+
+The Remix way for managing user interaction is the html way of doing.
+
+In `app/routes/_index.tsx`, create a form that contains radio input for size selection and
+checkbox inputs for toppings selection.
+
+```jsx
+  <h2>Remixez votre pizza</h2>
+
+  <form method="POST">
+    <fieldset>
+      <legend>Selectionnez la taille</legend>
+
+      <label htmlFor="small">
+        <input id="small" type="radio" name="size" value="small" />
+        Small
+      </label>
+
+      <label htmlFor="medium">
+        <input id="medium" type="radio" name="size" value="medium" />
+        Medium
+      </label>
+
+      <label htmlFor="large">
+        <input id="large" type="radio" name="size" value="large" />
+        Large
+      </label>
+    </fieldset>
+
+    <fieldset>
+      <legend>Choisissez votre garniture</legend>
+
+      <label htmlFor="anchovy">
+        <input
+          id="anchovy"
+          type="checkbox"
+          name="toppings"
+          value="anchovy"
+        />
+        Anchois
+      </label>
+
+      {/* do the same and create checkboxes for: bacon, basil, chili, mozzarella, mushroom, olive, onion, pepper, pepperoni, sweetcorn, tomato */}
+
+      <button type="submit">Commander</button>
+  </form>
+```

exercise/06-action/README.md

@@ -0,0 +1,71 @@
+# 06. Action
+
+Once the form is submitted, an HTTP POST is sent to the current url but since there is a parent route
+for the index page (which is `root.tsx`) and Remix cannot just use the url to know which file should
+handle the request, we need to help Remix to figure this out.
+
+update the form tag to have `action="?index"`
+
+```jsx
+<form method="POST" action="?index">
+```
+
+Now, to handle the form submition, export a function named action. Remix will automatically call the function on
+POST call (non GET) on the corresponding url.
+
+```typescript
+export function action() {
+  console.log('form submitted !');
+  return null;
+}
+```
+
+The action function can have the request informations as argument. The request contains the user form inputs.
+
+Let use it to log the command.
+
+```typescript
+let nextOrderId = 0;
+
+export async function action() {
+  const form = await request.formData();
+  const size = form.get('size');
+  const toppings = form.getAll('toppings');
+
+  const orderId = nextOrderId++;
+
+  console.log(
+    `[order #${orderId}] Ordering a ${size} pizza` +
+      (toppings.length > 0 ? ` with ${toppings.join(', ')}!` : '')
+  );
+
+  return null;
+}
+```
+
+The returned value will be sent as an HTTP Response. We can construct and return a Response object.
+Construct and return a Response with `302` status to redirect to the confirmation page. This will interpreted
+by the browser.
+
+```typescript
+export async function action() {
+  // ...
+  return new Response(null, {
+    status: 302,
+    headers: {
+        Location: `/confirmation?orderId=${orderId}`,
+    },
+  });
+}
+```
+
+Remix provide a helper function that shorten all of this.
+
+```typescript
+export async function action() {
+  // ...
+  return redirect(`/confirmation?orderId=${orderId}`);
+}
+```
+
+TODO: validation

exercise/07-loader/README.md

@@ -0,0 +1,32 @@
+# 07. Loader
+
+```typescript
+export function loader({ request }: LoaderFunctionArgs) {
+  const url = new URL(request.url);
+  const orderId = url.searchParams.get('orderId');
+
+  if (!orderId) {
+    throw new Response('Missing orderId', { status: 400 });
+  }
+
+  return { orderId };
+}
+```
+
+```tsx
+export default function Confirmation() {
+  const { orderId } = useLoaderData<typeof loader>();
+
+  return (
+    <main>
+      <h2>Merci pour votre commande</h2>
+      <p>Commande n° {orderId}</p>
+      <p>
+        Votre pizza sera prête dans quelques minutes. Vous serez notifié une
+        fois que c&apos;est pr&ecirc;t.
+      </p>
+      <a href="/">Lancer une nouvelle commande</a>
+    </main>
+  );
+}
+```

exercise/08-progressive-enhanced/README.md

@@ -0,0 +1,18 @@
+# 09. Progressive Enhanced
+
+```jsx
+  <Form method="POST" action="?index">
+```
+
+```tsx
+export default function Confirmation() {
+  // ...
+
+  return (
+    <main>
+      {/* ... */}
+      <Link to="/">Lancer une nouvelle commande</a>
+    </main>
+  );
+}
+```

exercise/09-ui/README.md

@@ -0,0 +1,3 @@
+# 09. UI
+
+Copy `app/components` and `public` folders