})
+
+P.S: If you decided to build an app on your own - we'd love to see it! If it's simple enough, let's turn it into a tutorial! Please check our [contribution guide](contributing) for detailed instructions and reach us on Discord.
\ No newline at end of file
diff --git a/web/docs/tutorials/dev-excuses-app.md b/web/docs/tutorials/dev-excuses-app.md
new file mode 100644
index 000000000..c6263b0e9
--- /dev/null
+++ b/web/docs/tutorials/dev-excuses-app.md
@@ -0,0 +1,25 @@
+---
+title: Introduction
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import DiscordLink from '../../blog/components/DiscordLink';
+
+:::info
+Make sure you've set up Wasp! Check out [Getting Started](/getting-started.md) first for installation instructions, and then continue with the tutorial. In case of any issues - please, ping us on })
\ No newline at end of file
diff --git a/web/docs/tutorials/dev-excuses-app/01-creating-the-project.md b/web/docs/tutorials/dev-excuses-app/01-creating-the-project.md
new file mode 100644
index 000000000..ac67ae1f8
--- /dev/null
+++ b/web/docs/tutorials/dev-excuses-app/01-creating-the-project.md
@@ -0,0 +1,28 @@
+---
+id: 01-creating-the-project
+title: Creating the project
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+By now you've already learned [how to install Wasp and create a new project](/getting-started.md). So let’s create a new web app appropriately named `ItWaspsOnMyMachine`.
+
+```
+wasp new ItWaspsOnMyMachine
+```
+
+Changing the working directory:
+```
+cd ItWaspsOnMyMachine
+```
+
+Starting the app:
+```
+wasp start
+```
+
+Now your default browser should open up with a simple predefined text message. That’s it! 🥳 For now – the codebase consists of only two files! `main.wasp` is the config file that defines the application’s functionality. And `MainPage.js` is the front-end. You can delete `Main.css`, we won't use that. And don't forget to remove `import './Main.css'` from `MainPage.js` file.
+
+})
\ No newline at end of file
diff --git a/web/docs/tutorials/dev-excuses-app/02-modifying-main-wasp-file.md b/web/docs/tutorials/dev-excuses-app/02-modifying-main-wasp-file.md
new file mode 100644
index 000000000..a7fe93871
--- /dev/null
+++ b/web/docs/tutorials/dev-excuses-app/02-modifying-main-wasp-file.md
@@ -0,0 +1,103 @@
+---
+id: 02-modifying-main-wasp-file
+title: Modifying main.wasp file
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+First and foremost, we need to add some dependencies and introduce operations to our project. We’ll add Tailwind to make our UI prettier and Axios for making API requests.
+
+Also, we’ll declare a database entity called `Excuse`, queries, and action. The `Excuse` entity consists of the entity’s ID and the text.
+
+`Queries` are here when we need to fetch/read something, while `actions` are here when we need to change/update data. Both query and action declaration consists of two lines – a reference to the file that contains implementation and a data model to operate on. You can find more info [in the docs section below](/docs/language/features#queries-and-actions-aka-operations). Let's move on!
+
+Let's add the following code to the `main.wasp` file's `app` section:
+
+```js title="main.wasp | Adding dependencies"
+ head: [
+ ""
+ ],
+
+ dependencies: [
+ ("axios", "^0.21.1")
+ ]
+```
+
+Next, we'll add an Excuse entity to the bottom of the file. You'll also need to define queries and an action that operates on nit.
+
+```js title="main.wasp | Defining Excuse entity, queries and action"
+entity Excuse {=psl
+ id Int @id @default(autoincrement())
+ text String
+psl=}
+
+query getExcuse {
+ fn: import { getExcuse } from "@ext/queries.js",
+ entities: [Excuse]
+}
+
+query getAllSavedExcuses {
+ fn: import { getAllSavedExcuses } from "@ext/queries.js",
+ entities: [Excuse]
+}
+
+action saveExcuse {
+ fn: import { saveExcuse } from "@ext/actions.js",
+ entities: [Excuse]
+}
+```
+The resulting `main.wasp` file should look like this:
+
+```js title="main.wasp | Final result"
+
+// Main declaration, defines a new web app.
+app ItWaspsOnMyMachine {
+
+ // Used as a browser tab title.
+ title: "It Wasps On My Machine",
+
+ head: [
+ // Adding Tailwind to make our UI prettier
+ ""
+ ],
+
+ dependencies: [
+ // Adding Axios for making HTTP requests
+ ("axios", "^0.21.1")
+ ]
+}
+
+// Render page MainPage on url `/` (default url).
+route RootRoute { path: "/", to: MainPage }
+
+// ReactJS implementation of our page located in `ext/MainPage.js` as a default export
+page MainPage {
+ component: import Main from "@ext/MainPage.js"
+}
+
+// Prisma database entity
+entity Excuse {=psl
+ id Int @id @default(autoincrement())
+ text String
+psl=}
+
+// Query declaration to get a new excuse
+query getExcuse {
+ fn: import { getExcuse } from "@ext/queries.js",
+ entities: [Excuse]
+}
+
+// Query declaration to get all excuses
+query getAllSavedExcuses {
+ fn: import { getAllSavedExcuses } from "@ext/queries.js",
+ entities: [Excuse]
+}
+
+// Action to save current excuse
+action saveExcuse {
+ fn: import { saveExcuse } from "@ext/actions.js",
+ entities: [Excuse]
+}
+```
+
+Perfect! We've set up all the architecture of our app. Now let's add some logic.
diff --git a/web/docs/tutorials/dev-excuses-app/03-adding-operations.md b/web/docs/tutorials/dev-excuses-app/03-adding-operations.md
new file mode 100644
index 000000000..cba4300f0
--- /dev/null
+++ b/web/docs/tutorials/dev-excuses-app/03-adding-operations.md
@@ -0,0 +1,35 @@
+---
+id: 03-adding-operations
+title: Adding operations
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Now you'll need to create two files: `actions.js` and `queries.js` in the `ext` folder.
+
+Let’s add `saveExcuse()` action to our `actions.js` file. This action will save the text of our excuse to the database.
+
+```js title=".../ext/actions.js | Defining an action"
+export const saveExcuse = async (excuse, context) => {
+ return context.entities.Excuse.create({
+ data: { text: excuse.text }
+ })
+}
+```
+
+Then we need to create two queries in the `queries.js` file. First, one `getExcuse` will call an external API and fetch a new excuse. The second one, named `getAllSavedExcuses`, will pull all the excuses we’ve saved to our database.
+
+```js title=".../ext/queries.js | Defining queries"
+import axios from 'axios';
+
+export const getExcuse = async () => {
+ const response = await axios.get('https://api.devexcus.es/')
+ return response.data
+}
+
+export const getAllSavedExcuses = async (_args, context) => {
+ return context.entities.Excuse.findMany()
+}
+```
+
+That’s it! We finished our back-end. 🎉 Now, let’s use those queries/actions on our UI.
diff --git a/web/docs/tutorials/dev-excuses-app/04-updating-main-page-js-file.md b/web/docs/tutorials/dev-excuses-app/04-updating-main-page-js-file.md
new file mode 100644
index 000000000..a216a66cd
--- /dev/null
+++ b/web/docs/tutorials/dev-excuses-app/04-updating-main-page-js-file.md
@@ -0,0 +1,74 @@
+---
+id: 04-updating-main-page-js-file
+title: Updating MainPage.js file
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+This is the most complex part, but it really comes down to mostly writing React. To make our life easier - let’s erase everything we had in the `MainPage.js` file and substitute it with our new UI markup.
+
+```js title=".../ext/MainPage.js | Updating the UI"
+import React, { useState } from 'react'
+import { useQuery } from '@wasp/queries'
+import getExcuse from '@wasp/queries/getExcuse'
+import getAllSavedExcuses from '@wasp/queries/getAllSavedExcuses'
+import saveExcuse from '@wasp/actions/saveExcuse'
+
+const MainPage = () => {
+ const [currentExcuse, setCurrentExcuse] = useState({ text: "" })
+ const { data: excuses } = useQuery(getAllSavedExcuses)
+
+ const handleGetExcuse = async () => {
+ try {
+ setCurrentExcuse(await getExcuse())
+ } catch (err) {
+ window.alert('Error while getting the excuse: ' + err.message)
+ }
+ }
+
+ const handleSaveExcuse = async () => {
+ if (currentExcuse.text) {
+ try {
+ await saveExcuse(currentExcuse)
+ } catch (err) {
+ window.alert('Error while saving the excuse: ' + err.message)
+ }
+ }
+ }
+
+ return (
+ })
+
+Now you can click the “Get excuse” button to receive an excuse. You should also be able to save the ones you like with the “Save excuse” button. Our final project should look like this:
+
+})
+
+Now we can think of some additional improvements. For example:
+
+- Add a unique constraint to Entity’s ID so we won’t be able to save duplicated excuses.
+- Add exceptions and edge cases handling.
+- Make the markup prettier.
+- Optimize and polish the code
+
+So, we’ve been able to build a full-stack application with a database and external API call in a couple of minutes. And now we have a box full of excuses for all our development needs.
+
+})
+
+
+P.S: now you're familiar with Wasp and can build full-stack apps, horaay! 🎉 How did it go? Was it fun? Drop us a message at our