Cassie. Profile picture
Aug 28, 2018 20 tweets 9 min read Twitter logo Read on Twitter
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.
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:
It's a labor of #love, if not skill.

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Cassie.

Cassie. Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!


0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy


3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!