#115 Docs - Create Developer Guide (#126)

Added content to Developer Guide
Added assets to Developer Guide
Followed storybook mdx formatting for the majority of content
Used some html syntax for either code snippets, images, or layout
formatting
Used rules of separation to apply light CSS5 to Developer Guide
documentation



https://github.com/LetsGetTechnical/gridiron-survivor/assets/66279068/2b0a7937-7636-4c39-8819-e3544201282a

---------

Co-authored-by: Shashi Lo <[email protected]>

stories/About/Developer Guide.mdx

@@ -0,0 +1,76 @@
+import Image from "next/image";
+import Link from "next/link";
+import '../styles.css';
+
+import supabase from '../assets/supabase_gridIron.png';
+import server from '../assets/supabase_server.png';
+import client from '../assets/client_component.png';
+
+## Developer Guide
+
+### Table of Contents
+ - [Getting Started](#getting-started)
+ - [Pushing local branch to remote branch](#pushing-local-branch-to-remote-branch)
+ - [Connecting to Supabase](#connecting-to-supabase)
+ - [Query Supabase data from Next](#query-supabase-data-from-next)
+
+
+## Getting Started
+
+  <code>git clone --single-branch --branch develop https://github.com/LetsGetTechnical/gridiron-survivor.git</code>
+
+  Install the required packages with pnpm (NOT npm or yarn!)
+
+  <code>pnpm install</code>
+
+  Create a new branch for whatever you’re working on in the format firstname/feature-description, then check out your new branch. For example:
+
+  <code>git branch richard/user-picks-page && git checkout richard/user-picks-page</code>
+
+  Code your feature! 🤓
+
+## Pushing local branch to remote branch
+
+  For the first push from local to remote, use --set-upstream origin along with the name of your local branch, like so:
+
+  <code>git push --set-upstream origin richard/user-picks-page</code>
+
+  Subsequent pushes will now go to your remote upstream branch.
+
+## Connecting to Supabase
+
+  In the project’s root folder, create an .env.local file:
+
+  <Image src={supabase} alt={""}/>
+
+  Place the following into your .env.local file:
+
+  <code>NEXT_PUBLIC_SUPABASE_URL=https://izumnfxsfrtbpyfptbeo.supabase.co</code>
+
+  <code>NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmF
+zZSIsInJlZiI6Iml6dW1uZnhzZnJ0YnB5ZnB0YmVvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDEzMTA0MjgsImV4cCI6MjAxNjg4N
+jQyOH0.hMNzXxIWrVMJjwwvC0tLuAwHGx8MzBXWIOTlkPTd-N8</code>
+
+
+## Query Supabase data from Next
+
+  To create a Supabase client and query data from an Async Server Component, create a new page.tsx file like the example below.
+
+  This example queries all entries stored in a hypothetical “notes” table from the database:
+
+  <Link href='https://codepen.io/choir27/pen/zYXaVGY?editors=0010'>
+    <Image src={server} alt={"Snapshot Code example of an asynchronous Server Component"}/>
+  </Link>
+  Alternatively, using a Client Component:
+
+  <Link href = "https://codepen.io/choir27/pen/oNOyrjz?editors=0010">
+  <Image src={client} alt={"Snapshot Code example of an asynchronous Client Component"}/>
+  </Link>
+
+  <ol className="doc_nav_links">
+    <li>[Welcome](?path=/docs/welcome--docs)</li>
+    <li>[Documents](?path=/docs/documents--docs)</li>
+  </ol>
+
+
+

stories/Documents/Documents.mdx

@@ -1,4 +1,4 @@
 <h1>Documents</h1>
 
-[Developer Guide](?path=/docs/about-developerguide--docs)
+[Developer Guide](?path=/docs/about-developer-guide--docs)
 [Richard](?path=/docs/documents-richard--docs)

stories/Welcome.mdx

@@ -1,3 +1,3 @@
 <h1>Welcome</h1>
 
-[Developer Guide](?path=/docs/about-developerguide--docs)
+[Developer Guide](?path=/docs/about-developer-guide--docs)

stories/styles.css

@@ -0,0 +1,11 @@
+.doc_nav_links {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 2rem;
+  align-items: center;
+  max-width: 100%;
+}
+
+.doc_nav_links li {
+  font-size: 2rem;
+}