I know you’re all very upset that I didn’t put up a Week 3 post last week, but trust me, I have a very good reason…
I just completed my first Project Week!
Yeah, Project Week kicked my ass, but before I dive too deep into it let me just give you a quick recap of Week 3:
Week 3 was all about using complicated branching logic, local storage, and URL search parameters to create a Choose Your Own Adventure-style game. We spent Monday learning different ways to access object properties, then took Tuesday through Friday to mob a full CYOA game — twice.
Here’s what we learned that week:
- More DOM manipulation and local storage work
- Accessing deeeeeply nested object properties
- Lots of logic work, conditional statements, and loops
- Working on a much larger, multi-day, multi-page project with a group
It was somewhat frustrating trying to figure out how to store and access the info we needed for each quest’s outcome, but I created a diagram (see below) that helped us visualize all the logic branches we were working with and allowed us to work backwards from the object property we were trying to access. It was a hard week for sure, but I had a lot of fun, especially since one full day was essentially writing Bob’s Burgers fanfic. It also really helped prepare us for Project Week.
Speaking of…
On to Week 4!
I’ve worked on development teams as a producer before, so the task of ideating, creating, and releasing an app didn’t seem too daunting at first. Of course, managing other people’s work and doing all the work yourself are two completely different beasts, and I learned that fast this past week.
If I’m being 100% honest, I found the concept of Project Week both incredibly valuable and entirely unrealistic. Having been in management positions in the tech field for years now, I know firsthand that there is (almost) never an instance when a small group of developers are asked to play every role in the app creation process, from producer to UX to designer to dev to dev-ops. That being said, I think forcing us to play all those roles on a small project with a tight timeline really underscored how much is involved in producing a client- or public-ready application. It also got everyone involved thinking about time-management, feature prioritization, and the look and feel of the end product.
I feel very lucky about the team I ended up on. My teammates and I were all ambitious and optimistic about what we wanted to build, but were also grounded and realistic when it came to the restrictions we were facing. We dreamt big at the beginning, then prioritized and paired down the actual end product as we were making it. I also found everyone in the group to be excited about our project and eager to learn new things.
I know you’re all champing at the bit to see what we built, so let’s waste no more time and take a look at the final product!
Code in Action
My team built a film noir CYOA-style detective game that incorporated puzzle games and a final “shoot-out” with the villain at the end. Had I been doing Project Week by myself I probably wouldn’t have chosen something so dark in both narrative and visual tone. However! I really loved making this app, and pushing myself out of my aesthetic comfort zone.
Here’s what we built:
Before the Week Ends, An Interactive Whodunnit
GitHub Repo Here | Live Site Here (best viewed on Chrome)
- What it is: A vanilla JavaScript web-app that is part shooter, part puzzle game, and part choose-your-own adventure, all set in a thrilling film-noir narrative.
- What it demonstrates: Everything we learned in Boot Camp 1 (and then some): DOM access and manipulation, event listeners, setting and getting objects from local storage, URL search params and all the fancy things you can do with them, TDD, importing/exporting functions, setInterval animations, CSS animations and keyframes, using images, video, and audio, CSS, Flexbox, and CSS Grid.
- Hardest part: Styling the app for sure, especially in a group setting and especially using styling techniques (Flexbox and Grid) I hadn’t used before.
- Easiest part: Writing the basic logic for the individual mini-games turned out to be a lot easier than I expected.
Where I Struggled
- Figuring out the logic for score tracking: Keeping track of where the player had visited and the outcomes of those visits was essential to the story we were trying to tell. Writing the code for each of those different elements wasn’t too hard, but first understanding their interdependencies was tricky.
- TDD and the *right* way to write tests: My team started writing our first test on Monday, and there was a moment at the beginning when I was getting very upset because I didn’t understand why we were doing it the way we were. Essentially, we’d written out the test (‘if dice roll number is equal to or less than 6 return true’) and then written a function that only contained return true. I didn’t understand why we were basically writing a function that tested “is true true?”, and got frustrated and a bit confrontational with my teammates. When they had us move on to the next test I could see how setting that initial test-pass helped us write out the function logic for passing the next test ad it all finally clicked for me. I understood why that original test was necessary and helpful. Big thanks to my teammates for being patient with me on that!
- Styling (using Flexbox more and CSS Grid for the first time): Styling is hard, and styling as a group is even harder, and styling as a group when you haven’t really been taught how to do it explicitly is even harder still. We tried to mob the CSS on Wednesday, but that ended up being a nightmare, so we delegated different pages to different people and came together Thursday to compare our work and put it all together.
- Not bulldozing people: I have strong opinions and often think those opinions are the right opinions, so this week was definitely an exercise in listening to and accepting other people’s viewpoints. When I began to take my ego out of the picture and recognized the project for what it was — a group project — I was able to let go of some of the feelings of responsibility for every aspect of the final project and actually calmed down quite a bit.
- Eating healthy and exercising: I’m noticing a trend in myself lately: when I’m feeling stressed out or overworked, I use that as an excuse to eat crap and not get any exercise. It’s an upsetting thing to realize, but I’m glad I at least can admit it now and make efforts to change. I don’t expect this course to get any easier, and using stress as an excuse to not take care of myself is a bad habit to get into regardless of my school or work situation.
Where I Succeeded
- Using my past producer experience to help us manage our time and tasks: I was quickly able to write out the steps we needed to take to get our project done and the timetable we should try to stick to to meet our Friday deadline. We fell off this schedule just a bit at the end of the week, but overall I think I helped considerably in keeping our team on schedule and focused on our top feature priorities.
- Learning CSS animations and keyframes: Part of the project requirements was to have an “About Us” page, and since our project was inspired by film noir I immediately wanted ours to be a scrolling end credits-style page. This meant having to learn about CSS animations and keyframes. I found it fascinating and relatively easy once I understood the core concept. I am looking forward to using it for other transition effects and fun animations in future projects.
- Putting together a pretty fun and informative presentation: We finished our final product in time to put together what I thought was a pretty fun presentation. I wrote a script for our group product demo that was part infomercial and part movie pitch, and my teammates pulled it off nicely. We also gave individual tech talks about different parts of the app, and I think they all touched on interesting things and flowed nicely into each other.
Closing Thoughts
I’ve written a lot in this post about my work on the project and the app that my team and I were able to produce, but equally impressive and inspiring were the apps that other groups came up with. From a simple yet addictive tic-tac-toe game, to a Tamagotchi-style friend-creator, to an uber-professional trail-running app, the teams in this class turned it out. I can’t wait to work with them on cool stuff in the future.
I’ll leave you with a picture that pretty much sums up how my dogs felt about Project Week. Joe, the one facing the camera, had tried so hard to stay awake and watch me work, but a post-walk evening nap was just too tempting and he fell asleep with his head on the armrest. 😍😍😍
Until next week, here codes nothing!
Here Codes Nothing! 