index.md (11331B)
1 --- 2 title: "StackStash: Taking Bookish Musings to the Next Level" 3 date: 2024-04-09T00:00:00+00:00 4 draft: false 5 needs_review: true 6 canonical_url: https://www.viget.com/articles/stackstash-taking-bookish-musings-to-the-next-level/ 7 --- 8 9 We have many book lovers at Viget. Our #books Slack channel has a wealth 10 of information about what books people have read and how they felt about 11 them. While it's great to have access to that data, Slack doesn't 12 provide the type of exploratory, visual browsing experience that would 13 be most useful when trying to make decisions about what we might want to 14 read next. 15 16 We might wonder: 17 18 - Has anyone read Tana French's The Likeness? How did they feel about 19 it? 20 - Liz has shared books that I've enjoyed in the past. What other 21 titles have they enjoyed? 22 - What has everyone been reading lately? 23 24 During our latest Pointless Palooza, a team of 10 folks at Viget built 25 an app that would help us answer those types of questions in a more 26 engaging way. Rather than digging through a bunch of disparate threads 27 in Slack, we can now use the StackStash app to browse consolidated 28 information. It's easy to look at a book and see all of the people who 29 have mentioned it (and how they felt about it) or look at a person and 30 see all of the books they've mentioned (and how they felt about them). 31 32 {{<dither Group-9_2024-04-08-184917_kfjg.png "800x">}}StackStash mobile screens showcase browsing features: a curated “next great read” feed, searchable library, detailed book spotlight, and Viget staff recommendations.{{</dither>}} 33 34 ## Behind the Scenes 35 36 When we build software for clients, their business needs typically drive 37 decisions around technical architecture, which then informs who works on 38 the project and their role. Pointless Palooza gives us an opportunity to 39 try out new technologies the team is excited about, and flex outside our 40 traditional roles. With a team of six (!) engineers slated to build 41 StackStash together, we needed to decide *how* to build the application 42 before we got started. This decision was guided by a few high-level 43 goals: 44 45 - Get a working end-to-end version of StackStash live on the Internet 46 on Day 1 47 - Ensure everyone on the technical team could work on something that 48 was interesting to them 49 - Distribute the workload so that we wouldn't step on each other's 50 toes 51 52 Much like everything that happens in the software development lifecycle, 53 arriving at our final tech plan was an iterative process. In the days 54 leading up to kickoff, we worked collaboratively to settle on a fun mix 55 of technologies that play to our strengths while also giving us the 56 chance to try some new things: 57 58 - [Laravel](https://laravel.com/) for back-end data management, 59 integrations with third-party sources ([Open 60 Library](https://openlibrary.org/developers/api) and 61 [OpenAI](https://openai.com/)) and the API layer 62 - [OpenAPI](https://www.openapis.org/) and 63 [TypeSpec](https://typespec.io/docs/getting-started/getting-started-http) 64 to define our API schema 65 - [Remix](https://remix.run/) + [React](https://react.dev/) as the 66 view layer 67 - [PandaCSS](https://panda-css.com/) to style the React components and 68 views 69 - [Docker](https://www.docker.com/) for local development and 70 deployment 71 72 {{<dither CleanShot-2024-04-08-at-14.01.35.png "800x">}}Browser talks to a Caddy-powered Remix app inside Docker, which hits a Laravel service to reach the DB plus external APIs (Slack, OpenAI, OpenLibrary).{{</dither>}} 73 74 ## What We Learned 75 76 Bringing this concept to life was not only a fun experience but also 77 provided the team with the chance to learn new skills and technologies. 78 Here are some of the highlights that stood out to us: 79 80 ### [Chris](https://www.viget.com/about/team/cmanning/) 81 82 **My favorite part of creating StackStash** was getting a chance to work 83 with Laravel, which was new to me on this project. I was surprised how 84 easy it was to find most information I was looking for right in the 85 main [Laravel documentation](https://laravel.com/docs/11.x). Overall, it 86 was a pleasant experience coming from other popular web frameworks like 87 Rails and Django. 88 89 **Something I learned** was a lot more about Slack API data. There were 90 a lot of little lessons I learned along the way---how message data is 91 generally structured, that [\`ts\` timestamps are kind of 92 IDs](https://api.slack.com/messaging/retrieving#:~:text=field.-,The,value%20is%20essentially%20the%20ID%20of%20the%20message,-%2C%20guaranteed%20unique%20within), 93 etc.---but the biggest surprise was that [the conversation history 94 API](https://api.slack.com/methods/conversations.history) we were 95 using [didn't include message 96 replies](https://www.bakejam.com/slacks-conversationshistory-api-ignores-replies/). 97 You can 98 retrieve [replies](https://api.slack.com/methods/conversations.replies) 99 via a similar endpoint, but as you might imagine, there are a lot more 100 API requests to account for. 101 102 ### [Claire](https://www.viget.com/about/team/catwell/) 103 104 **My favorite part of creating StackStash** was working with a big team 105 of engineers to divide technical roles and responsibilities. Based on 106 experience from past client projects, we leveraged the "pods" concept, 107 assigning devs in teams of two to larger focus areas. I also enjoyed 108 queuing up work for everyone in a shared gist of our data spec vs. 109 breaking everything out into individual tickets. This was a huge 110 time-saver on the PM side and helped everyone collaborate more easily. 111 112 **Something I learned** was how to write Migrations, Factories, and 113 Database Seeders in Laravel! 114 115 ### [Danny](https://www.viget.com/about/team/dbrown/) 116 117 **My favorite part of creating StackStash** was seeing similarities 118 between Laravel and other web frameworks. Even though the syntax was 119 pretty different, the general ideas for doing things was familiar enough 120 that it was easy to pick up and understand. 121 122 **Something I learned** was the interplay between Typespec, OpenAPI, and 123 TypeScript. I enjoyed learning with those three tools and how they work 124 together in such an enjoyable way. 125 126 ### [David](https://www.viget.com/about/team/deisinger/) 127 128 **My favorite part of creating StackStash** was getting to do some 129 modern PHP. It was the first language I used for web development (in the 130 late 90s 😯) but I haven't done a great job keeping up on its progress 131 over the last decade. The language, frameworks, and tooling have come a 132 long way. Laravel's slick, and having a language server to remind me the 133 argument order to \`implode\` was pretty clutch. 134 135 **Something I learned** was how to write defensive PHP code. I was 136 working on a lot of the API integrations, and I took inspiration from Go 137 to be careful and explicit around failure. Also, a LOT 138 about [ISBN](https://en.wikipedia.org/wiki/ISBN)s. 139 140 ### [Emily](https://www.viget.com/about/team/emcdonald/) 141 142 **My favorite part of creating StackStash** was designing new screens 143 based on the visual language and feature definition that were already 144 established. 145 146 **Something I learned** was how to create animations in Figma! 147 148 ### [Jackson](https://www.viget.com/about/team/jfox/) 149 150 **My favorite part of creating StackStash** was getting more comfortable 151 using AI platforms like Google's Gemini and Anthropic's Claude for data 152 processing. I finally had a good reason to explore tools like Google's 153 AI Studio to help prototype prompts that became important components in 154 our data pipeline. 155 156 **Something I learned** was that AI tools can do some amazing things --- 157 we pulled JSON data out of Slack and had Gemini (and later GPT-4) doing 158 some very impressive data extraction and summarization --- but they're 159 also infuriatingly mysterious at times. Gemini and GPT both excel at 160 fuzzy tasks like summarization and sentiment analysis, but completely 161 fell down on lookup tasks, like gathering ISBNs for books. We eventually 162 switched to GPT-4 because we couldn't get consistently valid JSON out of 163 Gemini. 164 165 ### [Laura](https://www.viget.com/about/team/lsweltz/) 166 167 **My favorite part of creating StackStash** was the opportunity to take 168 bookish joy at Viget to the next level. I hope that StackStash will help 169 my fellow book lovers find a great read the next time they're on the 170 hunt for a new book. 171 172 **Something I learned** was how to feel more comfortable and confident 173 when using Figma to create high-fidelity designs. As a researcher, I 174 primarily leverage Figma when conducting testing with prototypes. Things 175 like components, variants, and autolayout can feel intimidating to 176 someone who doesn't typically do in-the-weeds design work. This project 177 gave me an excuse to spend dedicated time learning how to use Figma 178 effectively for design production. 179 180 ### [Max](https://www.viget.com/about/team/mmyers/) 181 182 **My favorite part of creating StackStash** was seeing all the different 183 pieces come together to create something meaningful. Everyone was 184 working on their specific area and seeing it all intersect was really 185 cool. 186 187 **Something I learned** was OpenAPI and TypeSpec. It was a new 188 experience for me to work with OpenAPI to develop a spec for our API and 189 use that to test our API endpoints against. It really helped to make 190 sure everyone was able to be on the same page with the data we expected 191 in both the backend and frontend. I also got to dabble with TypeSpec to 192 generate the OpenAPI spec which was also a learning experience for me. I 193 enjoyed stepping out of PHP and into some new concepts. 194 195 ### [Nathan](https://www.viget.com/about/team/nschmidt/) 196 197 **My favorite part of creating StackStash** was exploring all the 198 different AI models that are out there and testing which one would work 199 best for our project. 200 201 **Something I learned** was... Laravel, AI, Remix, and Panda CSS. Worked 202 with Laravel when it first came out (8+ years ago) so there was a lot of 203 brushing up and relearning. Overall really like it and would love to use 204 Laravel again in another project. We went with Gemini AI to start with 205 as it had a really good free tier and it seemed to return what we needed 206 in a JSON format pretty consistently. But as we got more into 207 integrating it into our app data we noticed that Gemini did not return 208 perfect JSON every time. So we decided to change over to OpenAI as we 209 can set it to format the response into valid JSON. Also learned a lot 210 about Remix and Panda CSS as it was my first time working in both. There 211 was a learning curve but having worked with React it was pretty easy to 212 pick up. 213 214 ### [Nick](https://www.viget.com/about/team/ntelsan/) 215 216 **My favorite part of creating StackStash** was rapidly building a bunch 217 of UI in a familiar, but not too familiar, framework. 218 219 **Something I learned** was.... Laravel, Remix, more Docker magic, 220 TypeSpec, and more. I spent some time working with animations, which is 221 always both a treat and a slog. Getting everything set up and 222 it *mostly* just working for everyone was also a nice learning 223 experience. 224 225 ------------------------------------------------------------------------ 226 227 We learned quite a bit during Pointless Palooza --- and had fun while 228 doing so. In a short amount of time, our team successfully brought the 229 concept of StackStash to life. We're excited to see how the book lovers 230 at Viget make use of the tool and to potentially evolve it over time.