An Attempt to Make a Tiny Social Site for Stoners
Tags: svelte, firebase, beginners, codenewbie
Published: 2022-12-24 16:56:24

_As I continue to work on my code projects, I started to keep notes alongside my work so I can talk through problems and identify when it is time to walk away from the computer. This is not a tutorial, but instead a peek into my thought process as I educate myself._

We are going to make a tiny social media site for stoners using Svelte and Firebase. Here are some baseline ideas: 

- **Authentication.** I want people to be able to sign in through Twitter, but i may get more users if authentication is as anonymous as possible, especially with a throwaway app like this one. So, as much as I want to get fancy, let’s use e-mail link authentication (passwordless).
- **Behavior.**  I like the idea of seeing an anonymized heatmap of where people are stoned. This requires asking for location data which I am not too familiar with. Maybe there is a way to do this even more simply. We also could have people just log timestamps as to when they are high, and it would be like a Downdetector type thing showing times of day people are stoned.

Now that I write this, it is entirely possible to make this with something like a Google Sheet. How would we render the heatmap information in real time, though? 

So, the most valuable information we can get is time and anonymized location. 

## Data Structure

- Users
- Sessions
    - Session Location
    - Session Time

## Quick Test on AppSheet

This feels like something I can potentially prototype in [Google Appsheet](https://about.appsheet.com/home/). Let’s try that first. 

What’s funny is that right now I know more about Svelte and Firebase than I do AppSheet. I’m not sure if I have as much control as I’d like considering how much AI magic is being used. I cannot guarantee that I am going to get the output I want. 

![A screenshot of the Google AppSheet UI.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfi2c6l1d0p09l2zig3t.png)

Ok, this definitely does not look like what we want. 

Let’s just go back to Svelte. I think we know enough of what we want to do. However, I think I should definitely watch some videos of people using AppSheet to see what kind of social apps I can make. 

[ ... ]

Hours later and I still find myself in AppSheet because it intrigues me and I feel like I should be able to make what I’m imagining here. I know I would probably make more progress if I switched to Svelte but I have the luxury of spending time to familiarize myself with AppSheet.  

![Another screenshot of the Google AppSheet UI.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28l4q5dvphvinq9651ml.png)

This is looking a little bit better. 

Unfortunately, it looks like this is optimized for individual use. I don’t think it’s the best for doing the social things that I’m hoping to accomplish. Unless I’m missing something. 

We are yak shaving at this point so I think it’s finally time to pivot to Svelte. 

## Svelte

My worry about Svelte is UI, but I guess I can worry about that later. We are definitely equipped enough to build front end first, which is what I think I’m going to do. Once we have that dummy app up and running, I think it will be a better time to apply Firebase to the backend. So, let’s focus primarily on frontend **first**. 

This video inspired me to get started today:

{% embed https://youtu.be/gUYBFDPZ5qk %}

[ ... ]

Initial frontend is looking good. 

![A screenshot of my site, a work in progress. There is no CSS styling, though there are users and posts.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpsxv4y03svzfk2dr2y4.png)

Location may have to come later, but it will look something like this:

[Google Maps Platform Documentation | Geocoding API | Google Developers](https://developers.google.com/maps/documentation/geocoding/?csw=1#ReverseGeocoding)

[ ... ]

Alright, now we are jumping into [passwordless sign in](https://firebase.google.com/docs/auth/web/email-link-auth). 

![A screenshot of an error message: "Invalid Link Domain".](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v509q36r2j3hjin8br7v.png)

This is the error I’ve been stuck on for a couple hours. Can’t figure it out. This may be the time to gut the things that don’t work and to consider a different way for folks to log in. 

[ ... ]

The good news is that [anonymous login](https://firebase.google.com/docs/auth/web/anonymous-auth) works, but this does not offer the functionality I am looking for.

[ ... ]

Anonymous login is working well enough, the thing I want to do to end today is to get Firestore up and running. 

[ ... ]

We have Firestore functionality! I am on a roll. I think this is enough for today, as I will have to eat dinner soon. 

For shits and giggles let’s try to deploy. 

LATER

Deploying turned out to be a shit show, spent two hours running around trying to figure that out. It looks like the main problem is that my app has server-side-rendering (SSR) which means I need to host some Firebase Cloud Functions in order for my app to run. This sounds involved so I’m going to wait to do this another time. 

[https://github.com/jthegedus/svelte-adapter-firebase](https://github.com/jthegedus/svelte-adapter-firebase)

This github provides what I think is the most likely solution to my problem. 

LATER

Came home after smoking weed and drinking wine and solved the deploy issue immediately. Lmao, we have a silly little prototype up and running. 

[ ... ]

And now it doesn’t work again. 

LATER

Fixed it. Basically I had to disable SSR for the compile, allowing me to upload a static site. I implemented the svelte [static site adapter](https://kit.svelte.dev/docs/adapters) and wrote a snippet of code in the +layout.js file of my routes. 

![Setting pre-render to true.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6i984y1wetomcau5oubj.png)

![Using the svelte static adapter.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxxpoc1mpxowsk7jasgi.png)

I will also need to read this: 

[Using Environment Variables With SvelteKit](https://joyofcode.xyz/sveltekit-environment-variables)

TO DO: 

- [ ]  Give users the ability to delete their own posts.
- [ ]  Create functionality to only be able to post three times every hour.

12/22/22

We finally added the custom url, which was bugging because the instructions from Firebase are out of date (or simply just different for Namecheap?). Once I started writing “@” in the “Host” field on Namecheap instead of the typed out url, the connection went through. How am I supposed to know this? I say this as I clearly remember the few other times I’ve tried to use a custom URL and have experienced the same problem.

![Screenshot of completed project.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhbiwtk11zlq67uleik4.png)

![Screenshot of completed project.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ub1l2qvls9wttffvfq7.png)

I'd share the final result, but this project is neither secure nor scalable. I learned a lot, and while I will probably be sharing this silly little toy with my friends, I think I need to tighten the security and make sure I'm not paying out the ass for services like the Google Maps Geocoding.