added image placeholders

Author: gbanaag

projects/create-a-doodle-gallery/create-a-doodle-gallery.mdx

@@ -4,8 +4,8 @@ author: Gabriela Banaag
 uid: 
 datePublished: 
 description: Learn how to build a gallery of drawings that any user can contribute to
-header: https://i.imgur.com/VKm4oPJ.gif
-bannerImage: https://i.imgur.com/lfbCFid.gif
+header: 
+bannerImage: https://github.com/codedex-io/projects/blob/6c55e0553d4d94c26add4bdf0a78afac3c4988fc/projects/create-a-doodle-gallery/images/doodle-gallery-banner.gif?raw=true
 published:
 readTime: 2 hours
 prerequisites: JavaScript, Node.js, some SQL helpful
@@ -23,7 +23,7 @@ courses:
 
 I miss the days of the internet when people built cool stuff for the sake of making fun things. There were a lot of random sites that were heavily in circulation during my younger years, like [Google Doodles](https://doodles.google/search/?form_tags=interactive%20game), that embraced creativity and play. [insert an image of some examples here] Here’s a project tutorial that might help bring us back to these days — you’ll be building a website where anyone can draw a doodle for a public virtual museum exhibit! 
 
-[add an image previewing what they'll be making here]
+<img src="">
 
 To make this project, we’ll be using the classic web dev tools HTML, CSS, and JavaScript, and will be storing our drawings in [Supabase](http://supabase.com/). We’ll also be using [Vite](https://vite.dev/) to get a local server running our website,  that way you can run local servers with Node.js. I picked Vite because it handles imports  cleanly, refreshes your website automatically with any changes, and is structured  to better handle a project with a realtime database! 
 
@@ -39,9 +39,9 @@ I’ll be using [VS Code](https://code.visualstudio.com/) for this project, but
 
 ## ## Supabase setup
 
-1. Create a project by clicking on **New Project**.
+1. Create a project by clicking on **New Project**. Name it whatever you'd like.
 2. Find the Storage Menu and click on it. Then create a new bucket, and name it "drawings". Make sure this bucket is set to public so your gallery is viewable!
-3. Open up the SQL Editor, and run this code:
+3. Open up the SQL Editor on the lefthand menu (it pops up when you hover on it), and run this code:
 
 ```sql
 create table if not exists public.drawings (
@@ -51,10 +51,15 @@ create table if not exists public.drawings (
   created_at timestamptz not null default now()
 );
 ```
+The interface should look like this:
+<img src="">
+
+## ## **Adding your API Keys**
+We need to add API keys to our project for it to connect to our storage bucket - API keys authenticate the usage of coding tools like Supabase.
 
 1. Go to the API menu under Project Settings. Find your Project URL and API key. They should look something like this:
 
-[add an example of a sample Project URL and API key so they know what format to look for]
+<img src="">
 
 ## ## **Clone Template**
 
@@ -85,12 +90,16 @@ Make sure you have the latest version of [Node.js](https://nodejs.org/en/downloa
 
 Run this command in the terminal: `npm create vite@latest`, and then answer the prompts as follows. You can name your project however you like. When prompted, pick `Vanilla` as your framework and `JavaScript` as your variant. Your terminal should look like this at the end of completing the steps:
 
+<img src="">
+
 This might look different depending on what kind of computer you’re using — in my case, I’m on a Macbook.
 
 ## ## Running your server
 
 To start up a server with your webpage running, type `npm run dev` in the Terminal. It’ll give you a url that looks something like: `http://localhost:3000/`  — but the numbers in the URL can vary. Copy the link and paste it in your browser, and you should see something like this:
 
+<img src="">
+
 ## ## **.env File and API Keys**
 
 In your root folder, create a new file called `.env`. An `.env` file is used to keep sensitive information like API keys and credentials secret, and use substitute names in your code instead of the actual keys or data. This is helpful if your code is publicly shared, like on GitHub for example, since it hides the API keys automatically!
@@ -350,6 +359,8 @@ We want our big gallery to load random drawings, so everyone’s drawings have a
 
 Then we’re going to add our batch of drawings to our marquee. If you don’t know what a marquee is, it’s a scrolling gallery, or set of text that seems to scroll infinitely!
 
+<img src="">
+
 We’ll write out our function header for `repeatMarquee()`, limiting the number of drawings picked to 200. Our marquee has two rows, and if neither of them render, it’ll stop the function through the `if` statement.
 
 ```jsx