DEV Community

connor miller
connor miller

Posted on

An Attempt to Make a Tiny Social Site for Stoners

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. 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.

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.

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:

[ ... ]

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.

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

Google Maps Platform Documentation | Geocoding API | Google Developers

[ ... ]

Alright, now we are jumping into passwordless sign in.

A screenshot of an error message: "Invalid Link Domain".

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 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

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 and wrote a snippet of code in the +layout.js file of my routes.

Setting pre-render to true.

Using the svelte static adapter.

I will also need to read this:

Using Environment Variables With SvelteKit

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.

Screenshot of completed project.

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.

Top comments (0)