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.
I write my journals and to-do lists in a very specific way in Evernote. It would be cool to use this opportunity to learn Svelte.
12/12/22
This is a first stab at what I want the front end to look like, but I realize I need an editable carousel of cards in order for this to function how I want it to.
Right now I am having trouble making the connection between Svelte and Firebase. I think next time I need to get an example (I know I can probably find some on Glitch).
[ ... ]
Next thing I need to do is figure out how to set up authentication, which I think will be a little bit easier now that I know where the bits and bobs go.
To Do:
- [ ] Set up authentication
- [ ] Submit blog posts to Firestore properly
12/13/22
MORNING
Helpful Firebase auth video w/ Svelte that I should look at tonight.
Right now I am looking at YouTube videos that will help me when I revisit this project later in the evening.
Though I would like to get creative with Logins, for now I will just be using email and password because it is standard.
Here are the weeds that I was expecting, and the thing I need to be careful about before going to work - setting up the hierarchies of my components so that I can use Firebase when needed. Where should I put my Firebase config file? How can I make sure it is not redundant? Worried about breaking something.
It looks like I will import what I need from the Firebase.js file using the import functions that look like this:
import { auth, userDoc } from './Firebase' //tweak as needed
Figuring out all these routes will take some troubleshooting that I currently don’t have time for, so I’ll save this for the evening.
To Do:
- [ ] Consolidate Journal.svelte so that the Firebase config information is moved to a more global location where both Journal.svelte and Login.svelte can access it.
AFTERNOON
I have pieced together some code that logs in with a username and password, and it posts to the Firestore database. This is great, and a miracle it was done in my current state. I currently can’t log out, nor can I create new accounts. This isn’t too pressing to me, as long as we have me, the main user, to build out the rest of the functionality of this project. And that, is the journal UI.
[ ... ]
Okay, so it got way too complicated and I had to start from scratch, and now I am so confused and nothing seems to be working the way I need it to. So! Time for a break. I think in order to get the information that I need, I NEED to block out an hour or so just to follow this tutorial:
I think where I am getting tripped up is that I am trying to keep my code tidy and modular and the files aren’t communicating with each other very well from component to component. There is probably some syntax or something I’m missing since I don’t really know how files relate to each other, or it’s just convoluted. I think following the tutorial tomorrow might help at least a little bit.
12/14/22
EARLY MORNING
Holy shit it’s 2am and I found the error - I had capitalized “Svelte” in “.svelte” when I shouldn’t have.
And now I have successfully logged in because I put the code in the right order, lmao.
And now we have assembled it in such a way that we can log in and out of my account! Success success and it’s only 3am!
I think this needs to be a place to stop since we have achieved our win. This is something for another time, but I think we can refine it further if we learn about stores.
AFTERNOON
Trying to figure out the simplest way to move forward. It would be cool to have a WYSIWYG editor but I may just stick with a textarea now just to keep things simple. We can always refine and add complexity later.
[ ... ]
Success! We can write to the database, no problem. Now on puzzling how I want to read my previous entries. I can visualize it in my mind, but I am not sure what the easiest solution would be.
[ ... ]
Okay, we are getting there! We can see our old entries, though they stay on the screen even after you log out. It’s now a matter of figuring out stores and states, which I think may be beyond my purview for today.
This blog post has been turning out to be useful:
Building a CRUD application using Svelte and Firebase - LogRocket Blog
12/15/22
Self-educating on stores before I try to mess with them too much.
This video is actually really helpful and gives me a clearer idea of how I am going to use stores to handle user sessions in my project. Basically the components will need to react to when the user is logged in.
12/16/22
MORNING
Things are getting a little bit hairy as the app becomes more complex. My current problem is properly using stores - my data is doubling, I’m not rendering things to the DOM properly and I am losing steam on troubleshooting this.
In the interest of completing something, or at least operating within my wheelhouse, I am not thinking in “simplify” mode. That is, how can I create a workable product with the things I know how to build and troubleshoot, without introducing the complexity of stores.
[ ... ]
We have success! Using stores, I am now able to reactively update my posts and things in the app. When I post a submission, the page updates since the store is updated. This is a huge win! I think we are in the tidying mode, since core functionality exits.
The major thing on my mind now is a delete function, specifically for my own peace of mind especially as I am in development. Ugh, let’s write some to do’s:
TO DO:
- [x] Delete old posts
- [x] Order posts by submission time and date
- [x] Show submission timestamp
12/17/22
A reasonable thing to fix this evening is to figure out how to get new posts to display and behave properly. Right now if I put a new submission, it comes up as undefined, and if I try to delete it, it gets jammed. Let’s take a look!
[ ... ]
Yay, we fixed it! It works! We had to write some redundant code, but I think I can live with it.
[ ... ]
Alright, we are half an hour in and I have successfully added timestamps, and we are beginning to figure out how to order and sort them. It’s a bit messy, but I know how to make queries that are ordered by timestamp. Right now, similar to the problem above, there are just some machinations that aren’t displaying the data in the order I want. JS management problem.
[ ... ]
Alright, we sorted out that problem (the problem was redundant code), which we can probably consolidate at another time. I think we got a surprising amount of work done in 40 minutes.
12/19/22
Ok this project feels done. Next one I am going to try is to make a tiny social networking site for cannabis.
Top comments (0)