You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: projects/create-a-doodle-gallery/create-a-doodle-gallery.mdx
+2-10Lines changed: 2 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,8 +23,6 @@ courses:
23
23
24
24
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!
25
25
26
-
<imgsrc="">
27
-
28
26
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!
29
27
30
28
# # About Supabase
@@ -43,7 +41,7 @@ I’ll be using [VS Code](https://code.visualstudio.com/) for this project, but
43
41
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!
44
42
3. Open up the SQL Editor on the lefthand menu (it pops up when you hover on it), and run this code:
45
43
46
-
```sql
44
+
```
47
45
create table if not exists public.drawings (
48
46
id uuid primary key default gen_random_uuid(),
49
47
path text not null,
@@ -90,23 +88,19 @@ Make sure you have the latest version of [Node.js](https://nodejs.org/en/downloa
90
88
91
89
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:
92
90
93
-
<imgsrc="">
94
-
95
91
This might look different depending on what kind of computer you’re using — in my case, I’m on a Macbook.
96
92
97
93
## ## Running your server
98
94
99
95
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:
100
96
101
-
<imgsrc="">
102
-
103
97
## ## **.env File and API Keys**
104
98
105
99
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!
106
100
107
101
Create two variables, `VITE_SUPABASE_URL` and `VITE_SUPABASE_ANON_KEY` and set their values to the URL and API values you found in your Supabase Project Settings.
108
102
109
-
```sql
103
+
```
110
104
VITE_SUPABASE_URL=https://[string of characters].supabase.co
@@ -359,8 +353,6 @@ We want our big gallery to load random drawings, so everyone’s drawings have a
359
353
360
354
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!
361
355
362
-
<img src="">
363
-
364
356
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.
0 commit comments