Thread by @HostileUX

My app is Online!
It took me ~4 weeks, maybe 35 hours/week, to make. However! I spent 2 weeks just watching courses, so 2 weeks of solid work, I think is fair to say.

It's made with #angular, #ngrx, #express, #mongodb, #mongoose, & #love.
Here's the story. (cont'd) #programming

The goal was to make a recipe/grocery list app. We have a weekly menu, and I'd want to select recipes and just get a grocery list automatically.
Sketching things initially helped a lot. Layout was never a problem, because I love #materialdesign and I'm stuck in the 90's...

#ngrx was definitely the trickiest part. @DeborahKurata & @dunchunter's course on #pluralsight is amazing, and everyone should watch it (if they need to work with ngrx, obvs).

Did I need ngrx? No. This could have been solved with services. But, I wanted to learn.

#ngrx take-aways: plan your state carefully. Initially, I had several different reducers (user, dashboard, recipes, menu, grocery-list). Except for User they all deal with recipes, so they should all just have been in Recipes. Except maybe grocery list.

#ngrx is probably what I've had to refactor the most. Lazy-loading meant that parts of the app would fire actions that weren't properly loaded, meaning that nothing happened.

I'm gonna have to refactor even more, later. For now, I will bask in how I reached my mvp.

#mvp, what was it anyway? Looking back on my trello board, it is:
Front-end: show recipes, add recipes to grocery list, show grocery list
Back-end: CRUD recipes.
Somewhere along the way, I lost track of the mvp and also added registration/login support, with ...

proper credential storage. Every tutorial on password/registration stuff is *very bad*. There are guides out there that sends the User object as a token to the user. The User object contains the password, you know. #tutorials are horrible for beginners.

I also added support for adding recipes, and form validation for that. There is some magic going on there, let me tell you (I won't, here).

The rest of the #angular stuff was pretty easy. I've probably made design mistakes there, too, but it works.

#angular, cont'd. I have a monster reducer for a part of the state, but that comes down to inexperience in writing code. #angular itself was good to me. Observables are amazing, and I don't really want to write the next project in #react after this experience. (cont'd)

Can #react even handle #observables properly? Is there something similar to the async pipe? Because the async pipe is SO. GOOD. It is basically magic.

#express was also pretty easy. I should mention that whenever I say "easy" it usually means hours and hours of reading tutorials and "trying stuff" to see if it works. Yeah. But, it comes easier to me now. For auth, I used #passportjs, which...

has, I've mentioned earlier. some (really) bad guides out there. But, I worked it out... eventually. Most guides are also very bare-bones, with all logic in one single .js file, and I didn't work that way, so I had unforeseen mistakes along the way. Example:

everyone does const passport = require(passport) up top. I did that too, in my routes. That's wrong, because that line isn't the same as the passport object in my app.js, which has been initialized and a strategy selected. I had to send the app.js passport into the route.

#mongodb was horrible to work with, eventually. At first it was fine. Easy. Adding in #mongoose and you go "oh my god it's basically magic" because it's so easy. Then, you add authentication to the mongo db on the production server and NOTHING WORKS. And you're ...

sure you've written everything correctly. You compare to the wiki. Your URL matches the wiki url.

The wiki url is wrong. It's missing a / ... haha, hilarious. 8 hours wasted on that. Yeah, I'm not great with that.

Also tried #azure sql server for this stuff, but the connection

was too dodgy for me to work with. Maybe it gets better. Might have been my vpn being dodgy, too.

So. It was a good journey.

There are so many issues still, though.

1. http, not https.
2. grocery list lacks a lot of functionality. copy to clipboard button does nothing. you can't add individual items to it. you can't remove individual recipes.
3. you can log in (over http), but not log out.
...(cont'd)

4. you can't edit your own recipes. or delete them.
5. the page title is always "Client", which ... isn't great.
6. When you create a new form field, focus isn't moved automatically.
And that's just what you can *see*. There's a lot of refactoring necessary.

To speak nothing of the backend side. What's there works, but... you can't search on anything but id (which is a mongo ObjectID, so good luck with that). You can't actually *search* on the frontend.

But, it's been a good journey. I'm gonna take a day off now, then start

working on some of these issues.

Meanwhile, if you'd like to see this trainwreck in action:
recipes.hostileux.com/#/dashboard
It's a labor of #love, if not skill.