Let’s Build a Web App! Week 12 out of 30
In which I wrap up the login process, add a load more feature to user statuses, and dig around for adding sort functionality to my queries.
Hey strangers and friends!
Here’s my weekly breakdown for what’s gone down most recently in my web dev journey. It’s Week 12 out of 30, and I’m in the middle of my development phase for my project (hooray!).
What’s that? You don’t know what I’m talking about and would like to? Well, for context, here are the previous posts for this blog series:
- Let’s Build a Web App! A blog series by someone starting their web dev journey
- Let’s Build a Web App! Week 2 out of 30
- Let’s Build a Web App! Week 3 out of 30
- Let’s Build a Web App! Lo-fi Edition / Week 4 out of 30
- Let’s Build a Web App! Week 5 out of 30
- Let’s Build a Web App! Week 6 out of 30
- Let’s Build a Web App! Week 7 out of 30
- Let’s Build a Web App! Week 8 out of 30
- Let’s Build a Web App! Week 9 out of 30
- Let’s Build a Web App! Week 10 out of 30
- Let’s Build a Web App! Week 11 out of 30
What did I set out to do?
This would be the third week of ‘Block 3’ (the second month on this project in particular). In this block I’m aiming to finish an MVP (a minimal homepage view, a minimal reader view, a minimal user dashboard view, and a minimal database view, all functioning and usable).
Considering that it’s the third week and I only have one week left after this week, it’d be good to get at least two views done this week. Here are a few items I wanted to get done:
- separate my frontend and backend into separate git repos
- finish my login components so that filling out the login form would fetch a token from my JWT (json web token) endpoint and store in local storage to log the user in.
- add components for a sign up process (and link it to the Django backend for creating a user)
- add a confirmation step for creating a user with an email address
- create models to add an article content type to my backend, + their respective classes as graphql-relay nodes, fields and mutations
- create components to display a list of articles on the site’s homepage, and populate these components with article data stored in my backend
- add a ‘create user status’ feature to the site (React-Apollo components which send mutations to my GraphQL server)
- add a ‘load more’ feature for user statuses and articles on my site
- clean up all my code and create coherent pull requests for my mentors to look over
What did I end up getting done?
As usual, I only got a fraction of what I hoped to do done. That’s okay for now, but I probably have to speed up, either by putting more time in or working more quickly. At this rate I expect to have some features available by the end of this block, but not the whole MVP I set out to get done.
Here’s the list of items updated with statuses:
- separate my frontend and backend into separate git repos
🙆 This is done. - finish my login components so that filling out the login form fetches and stores a token from my JWT into local storage.
🙆 This is done. - add components for a sign up process (and link it to the Django backend for creating a user)
🙅 Got skipped. - add a confirmation step for creating a user with an email address
🙅 Got skipped. - create models to add an article content type to my backend, + their respective classes as graphql-relay nodes, fields and mutations
🙅 Got skipped. - create components to display a list of articles on the site’s homepage, and populate these components with article data stored in my backend
🙅 Got skipped. - add a ‘create user status’ feature to the site (React-Apollo components which send mutations to my GraphQL server)
🙆 This is done. - add a ‘load more’ feature for user statuses and articles on my site
🐢 This is mostly done, but there’s a detail about the order in which the statuses are being fetched that I have to figure out. - clean up all my code and create coherent pull requests for my mentors to look over
🙅 Got skipped. Well, I’m hoping to work on this today, but there are one or two other items that have cropped up as well.
Although I originally imagined working on the Home (site articles) and Reader views this week, I ended up pivoting more to the User Dashboard view since I already had my user statuses models and schema objects to work with there. I mostly got a feature to submit a user status and have that update the list of user statuses on the profile done; plus the feature to fetch older statuses. On the plus side, now that I’ve done that for the first time, I can implement similar auto-loading logic elsewhere faster.
What went well:
Being able to locate the source of a number of bugs and my first attempt at creating Apollo components with loadMore[data type] and refetch calls, which went smoothly enough. (If you’re interested in details, you can check out this log I keep.) Actually, what I’ve been glad about recently is having enough intuition to sense what functionality is offered by different libraries I’m using and being able to search for that functionality quickly, then use it. Granted if I’d read through all the documentation for each library, I wouldn’t have to rely on intuition, but I’ve only done that for some of the libraries I’m using.
I also feel that I kept a good balance between work and social things this week, making sure to stay lean on my commitments.
What was difficult:
I probably spent the last day’s worth of work looking into the sort/order by functionality that django-graphene USED to have — the key words being ‘used to’, because, as I eventually figured out, that functionality’s been removed for various reasons. Now I’m looking to make a pull request to add it back in (pretty cool, right?)— which I think should be fairly simple (I believe I can simply rely on the sort_by logic that django already has available for query set objects) but still takes me a lot of time because I often don’t know what I’m doing. What I mean when I say that is that I have to resolve a lot of knowledge gaps in the process of doing simple tasks, things like the details of Javascript class inheritance, identifying how and where a connection resolver is being invoked, exactly, and how might I pass the attributes of a class instance to a class method. For people with experience, figuring out details like these would be swift and a piece of cake, but I’m in the process of gaining that experience, it seems, and I can’t help but perceive the slow and fumbling nature of my work sometimes.
I would like to read a book/core documentation on Python, Javascript, and Linux each to help me be more swift, but for now I mostly work with my working knowledge and look things up as I go along.
Some days I work a good amount and other days I feel like I only get a few solid hours of work in, in between my inefficiencies. (Making sure I work in the morning when I haven’t had a successful night’s sleep has been a recent challenge!) This is something I’m perpetually working on.
What I would do differently next time (next time typically meaning from now on :P):
If I decide to work from home, rely more on Forest (great mobile app!) to make sure I don’t get derailed by distracting apps.
Add a run to my morning schedule and see if that helps with my sleeping issues (though it could backfire since exercising typically makes me want to nap, too..)
Skim through more of the Apollo docs before starting dev.
Read documentation in the evenings if I’m not up to much else anyway.
Check Github commits early on when I’m dealing with new open source technology and am trying to figure out what happened to a feature that isn’t working like I expect.
One cool thing I learned about:
Django comes with default configuration for various loggers for you to use in your project, which you can modify in a logger spec in your project settings.
Misc links for your browsing pleasure:
- My twitter: https://twitter.com/ronachng
- My Github repo for kusamochi: https://github.com/ronachong/kusamochi/commits/master
- My Github repo for moshi-moji:
https://github.com/ronachong/moshi-moji - My Paper doc for documenting some travails and clearups during development:
https://paper.dropbox.com/doc/travailsvictory-log-in-dev-stuff-urw9F3oeUadSzjULXWYiM - My Paper doc for brainstorming/planning my web projects:
https://paper.dropbox.com/doc/different-ideas-mnesHVM2GY2Fwb05iN2fW - My Paper doc for logging my Google queries (obsessive, I know):
https://paper.dropbox.com/doc/resource-log-rOGTRd8hygvwJ4NCGglpm