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