create chapter 1 tutorial

tutorials/getting-started.mdx

@@ -0,0 +1,102 @@
+# Chapter One 
+
+## Getting Started
+
+To create a new **Waku** project run the following command
+
+```
+npm create waku@latest
+```
+
+Follow the cli instructions and name the project `waku-tutorial` 
+
+Open the project, install dependencies, and run the development server 
+
+```
+cd waku-tutorial
+npm install
+npm run dev
+```
+
+Open up your browser and go to [https://localhost:3000](https://localhost:3000/) 
+
+You should see a simple web page with an **interactive** **counter**! (?possibly insert image here?)
+
+*Lets take a look* at the code/files that we were given
+
+- `/src/pages` contains our [routes and layouts](https://waku.gg/#routing)
+- `/src/components` contains our reusable [UI components](https://react.dev/learn/your-first-component)
+- `/public` contains our [static assets](https://waku.gg/#static-assets)
+
+## Server Components
+
+If we take a deeper look at `/src/pages/index.tsx` we see our component is an `async` [server component](https://waku.gg/#server-components)
+
+```tsx
+// line 5
+export default async function HomePage() { 
+ const data = await getData();
+ // ...rest of the file
+}
+```
+
+that allows us to make an `async` call to get some data that happens on the server. 
+
+**Server components** can access our **db** directly, keep the client bundle size smaller, and other server-side logic!
+For example you might want to *(insert a good example here)*
+
+Keep in mind with **server components** we *can’t* use a lot React’s API that we’ve come to love (…or hate); such as `useEffect` and `useState` . That’s because they only run once on the server (ie: they don’t re-render)
+
+Don’t worry though we can still use those APIs with **client components**! These are the exact same React Components we’ve been using forever. The only difference is that they now have a `'use client'` directive at the top of the file.
+
+## Client Components
+
+Go ahead and open up `/src/components/counter.tsx` .
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+
+export const Counter = () => {
+ const [count, setCount] = useState(0);
+ // ...rest of the file
+}
+```
+
+As you can see on top of the file it contains `'use client'` and we’re using `useState` ; so this is a **client component**. They will be 
+
+## Routing
+
+To handle routing in **Waku**, there is a familiar **[Pages Router](https://waku.gg/#routing)**. 
+
+Everything that is inside our `/src/pages` abides by the router’s rules
+
+- `/pages/index.tsx` **index route**
+- `/pages/_layout.tsx` **[layout](https://waku.gg/#layouts)**
+- `/pages/about.tsx` **single route**
+
+Theres two ways to create a page route.
+
+1. use an `index` file. (eg: `/pages/contact/index.tsx`)
+2. use a single named route (eg: `/pages/contact.tsx`)
+
+Either of these would render under https://localhost:3000/contact
+
+**Layouts** are how we create a shared *layout* for a route and its inner routes.
+
+In our project `/pages/_layout.tsx` is the [root layout](https://waku.gg/#root-layout) for all of our routes currently.
+
+## And that’s all you need to get started using Waku!
+
+In the next Chapters we will go deeper into everything so you get a good understanding of how powerful but simple **Waku** is 🙂
+
+---
+
+## Next Steps
+
+In **Chapter 2** we will start building a small **Todo Application** to get some hands on experience with **Waku**. 
+
+You’ll learn more about the **Server Components**, **Client Components**, **Routing**, **Navigation**, and more!
+
+*Insert Link To Next Chapter*