Project 1: A rundown of Nerd Review
Previously on Capstone Project 1 Week at Digital Crafts…There was group work. It went pretty well. But what did we actually make? I took the liberty of jotting down a few project ideas before our first group meeting, and my entire strategy for this was “when I use the internet, what things piss me off? — and can I do them better?” The other group members contributed, we brainstormed for a bit, and we finally settled on the idea of on a cross-community site for niche and expert product reviews. The idea came about because sometimes I’m purchasing a product and I want to learn everything about it, but it isn’t the typical product purchase that you would expect people to “nerd out” over. Sometimes there are great Amazon reviews, sometimes they are far from helpful. For some such scenarios, I’ve been through a purchase in a similar subject area before, so I know which blogs to consult to get that additional info, but others the experts are few and far between or non-existent. Sometimes I want to hear a review of product from someone who analyzed the purchase backwards and forwards, but maybe not necessarily from someone who is a professional user doing their evaluation based on extreme use cases. So we fleshed out the idea of Nerd Review, a review site where reviews are only posted by users with a membership, and there is no commerce component or affiliate content built in.
First — here is the final result: nerdreview.co
(See the README for additional technical details and challenges)
Second — MVP/basic components:
We did a significant amount of planning for this project in the 2 days before the official start, so we knew fairly early on that we would be able to at least build a site with basic functionality (reach our Minimum Viable Product). As I mentioned earlier, this also led to us fading working on some of our stretch goals simultaneously. We also decided early on that we wanted a simple clean interface with a vertical fixed left navbar and grid tiles in the main content area (a la this template that our front-end lead found) because we knew the navigation pathway on our site would be through a hierarchical product classification system. The sort of “retro videogame” vibe we have going on was something that our front-end guy tried, the rest of us liked, and then we just had a good time taking it and running with it.
Initial MVP
- The following pages: individual review, individual project (with all reviews), list of all reviews, list of all brands, list of all users
- Products organized into a category hierarchy at least three levels deep
- Consistent formatting for all pages including a vertical fixed-right nav bar and a main content area displaying items as grid tiles
- User session tracking (log in, log out, sign up)
As we started building out the MVP, we realized there were some items we needed to tackle that fell somewhere in between MVP and advanced stretch goal features. For example, many of our pages were displaying a large grid, and we really didn’t want to do that without including a sort feature. Or that in order to make our hierarchy menu work, we needed to supplement the browser back button with one of our own.
Third — Challenges:
One of the main challenges I took the lead on tackling during this project was customizing HTML select elements and their option elements to act as a drop-down sort or a drop-down filter. We needed the sort on all of our grid tile pages, and the drop-down filter on our “add a review” page. The biggest thing to work around is that we haven’t covered JavaScript yet. I can mostly understand the syntax, having worked in both Python and Java, but I haven’t spent any time using it. So while I hear this can be accomplished more easily (or at least more efficiently) with JavaScript, we needed to avoid it. After some internet/Stack Overflow searching, I figured out that I could use one line of JS in the “onchange” attribute of the select element to resubmit the form every time the dropdown was changed. If I fed the select element a list of sort or filter choices from the Flask render on the back-end, then I could use nest some Jinja within the select element to iterate through them and render an option element for each one.
Then I handled the sort within the route for the form submission by grabbing the value from the currently selected option element in the form and setting that to a “current_sort_method”, then using a conditional statement and hard-coded values to set string values for that method that could be substituted into the SQL query after “order-by.”
I will only layout a portion of the code for the custom drop-down filters here, but the challenge was very similar.
I needed to grab the currently selected option, and submit the form to a route, but instead of altering the order by section of an SQL query, I needed to substitute it in for a where condition. However, we were implementing several drop-downs in a row where what we are really doing is filtering the drop-down options as well. So if you are adding a product, selecting a main category then changes the next drop down to only show options for secondary categories that exist in that main category. Another wrench thrown into the mix is that one of the option elements needed to be ADD NEW and trigger the appearance of a text input. So the code ended up being a lot longer, though conceptually it was the same problem.
Each form group was customized, but here is the HTML for the first one as an example:
This project also presented one challenge personally, one I have experience with, but a challenge nonetheless. We spent a lot of time on it, working well past our class end time each night and on the weekend. No all-nighters were pulled, but we got close. I am truly happy to have a reason to spend that much time on something, but this is the first time since undergrad that I’m doing it while not living in my own apartment/home, and with a 45+ minute commute one-way. My group was very dedicated, which is the sole reason for our level of success, but even with my anticipation of and whole-hearted participation in all the extra hours, I still found myself trying to balance needing to prove to them that I was game for serious work sessions while still going home to guilt about how long I had been gone. Think I need to accept that that is just something that is likely to happen often from here on out. The long hours did give me the chance to crash with a friend who lives closer to Atlanta Tech Village one night, who fed me, let me play with her puppy, and helped tremendously; so that’s my advice to others embarking on a similar path: temporarily lean on those people who you can call in favors from and not have to repay them back until you’ve graduated!
Fourth —New Things:
Definitely encountered some new things running something from start to finish. We were trying to build in some validation on 3 of our forms (log in, sign up, and add a review) both to increase the aesthetic of our site and to decrease the potential that the submitted data would break our route handler for that form. We initially did it with the attributes of HTML input elements and CSS for invalid and valid states. However, I later found this Validator add on to Bootstrap designed particularly for this purpose. It made it much easier for us to display error and feedback messages on user input without requiring a lot of time dedicated to reading documentation.
Other new things I got to pick up on: the UPPER() transformation in SQL, some of the finer ins-and-outs of SELECT DISTINCT statements, forcing two action URLs on the same form element, IonIcons, sizing an image element using markdown, HTML select elements and their “onchange” attribute, and the zip() function in Python.
Summary:
This project went almost as well as I dared to hope for, and much better than the worst-case scenarios that crossed my over-active mind before we started. We finished with a functional site based off an original idea, handled the front-end from scratch, and had a great addition to our individual portfolio = SUCCESS
