This application is based on a deck of cards created by the musician Brian Eno and artist Peter Schmidt. An individual card can be drawn randomly from the deck, providing a suggestion, phrase, or word that offers an alternative way to think about a problem. Other features include saving multiple cards in a layout to combine multiple strategies, and being able to save favorite strategies (persistant in localStorage) to review later when needed.
Project Purpose and Goals
A common question from students learning web development for the first time is: "What should I learn next after this course?" Usually, my answer is to learn React - and I clearly need to practice what I preach! After getting the basics down with Scrimba's excellent Learn React course, I wanted to build something from scratch to solidify what I learned.
I've used the Oblique Strategies deck with creative projects in the past, and creating an app version seemed fun and practical (they really are great at giving your brain a reboot). I wanted to create a simple design inspired by the deck, while adding some interesting features that would challenge me, like working with localStorage and adjustable frames. But mostly, I wanted to work with React without a safety net, and this project had just the right amount of difficulty and fun.
Web Stack
Since my main goal was to gain more hands-on experience with React, it was the natural choice. I also made sense since the cards, layouts, buttons, and frames would be better as reusable components, and managing state for what card and components were displayed would be easier as well.
I really wanted to work with Tailwind on this project, and with my experience with Bootstrap it was easy to just jump in. I didn't want to have to manage CSS files and class names, and Tailwind made styling less stressful while adding the benefits of a design system.
Vite allowed for fast and easy scaffolding, with straght-forward configuration of Tailwind and PostCSS. Deploying the app with Netlify was intuitive relatively frictionless - I had trouble deploying from GitHub with the CLI, but no problems doing so from the GUI.
Issues
I wanted the favorites and spread features to be on a sidebar, either as an off-canvas element or a resizable frame that could be pushed completely out of the viewport when needed. I decided on the frames approach, but it quickly added complexity to the project and was unwieldy. I settled on a minimum width, as styling it to disapear and still be able to get it back was a challenge. It also doesn't work well with mobile, and a truly responsive style would require a different structural approach to the code. I can see why this is not a feature you see often in modern web design.
The increased complexity also required more prop drilling than I would have liked, but the project was not big enough to justify using context. I would take a different approach, knowing what I know now, to make the flow of data easier to follow.
Lessons Learned
This project was my first React application without some kind of tutorial, and I learned how important design and planning are to success. Some of the questions I had to ask, like "should this be a separate component?" or "where should this state live?" made me think critically about my logic, and also appreciate how well React's features work together.
Experimenting with resizable frames, a feature I don't think I implemented very succesfully, made me look at design choices differently, and if with more time I would have done more testing before implementing in the final version.
Some refinements for future versions include changing the resizable frames to an off-canvas element (this would be a major refactor actually) and adding a dark mode.
