triva

One day, my friends and I were looking for trivia games to play online. Throughout our search, I thought to myself, "Hmm, there aren't many free-to-play trivia platforms out there." I felt that some of the ones we tried had cluttered UIs and were confusing to navigate. I then, on a whim, decided to jot down the idea of building a "simple and intuitive trivia platform" and added it to my ever-growing list of project ideas. About a month later, right after I'd just finished the react.dev tic-tac-toe tutorial, I decided it was time to start a project from scratch, from the ground up. I felt this idea was a wonderful way to push myself to learn React and develop good foundations using the library.

What started as a simple idea slowly blossomed into the full-stack community-based trivia platform that I am truly proud of.

For the first week of this project, I decided to form a structured plan before diving into the code. This planning phase turned out to be the biggest factor in getting the MVP to a state I could be truly proud to deploy. I began by outlining the dependencies I would need. I decided to go with React for the front end, Node.js/Express.js for the back end, and MongoDB/Mongoose for the database/ODM. I also included Passport for authentication and authorization, React Router for client-side routing, and Joi for validation.

After the dependencies were settled, I worked on planning out my data models and client-to-server endpoints and interactions. I even, very ambitiously, planned some post-MVP features! Throughout the process, many questions arose: "How would these different data models interact with each other?", "What was the experience of playing a quiz going to feel like?", and "How would I translate the deck information to React state?" Once I had the basis for answering these questions, I then moved on to the design phase.

The design process began with simple, hand-drawn wireframes of all the possible pages and the initial quiz game itself. While I am no Picasso, these wireframes helped form a solid foundation for the designs to come. With these simple wireframes in place, I then decided, "Let's learn Figma as well! Why not?!"—as if I didn't already have enough new technologies on my plate.

After messing about in Figma and watching a couple of hour-long videos on both design and Figma fundamentals, I felt ready to start. Over the next couple of days, I implemented a full working design of all the components and pages I would need for the MVP. The whole process of planning and designing was honestly so much fun! I was very excited and happy to see everything fully (mostly) laid out and ready to be implemented.

It was time—time for the work I put in over the last week to come to life! Throughout the next two and a half months, my day consisted of waking up, making some coffee, and opening my to-do list (I just used Notepad...) to look at what I should work on next. It was truly a rollercoaster from start to finish. Going from being unsure of how "clean" my code was, to just focusing on improvement rather than immediate perfection. Looking back and seeing the evolution of not only the code but myself as a person, was absolutely beautiful.

Finally, it was deployment day... I was filled with nerve-wracking excitement, knowing that by the end of the day, the project would be live. Once it was up and running, I was filled with relief that deployment was a success and gained the satisfaction of seeing a project I invested months into coming to fruition (well, the MVP at least!). Once the site was live, I was thrilled to see people using it (even if they were just my friends!). I greatly appreciated the wonderful feedback they gave and the bugs they caught that slipped by me (hey, free usability testing!).

A full-stack community-based trivia platform that I am proud to call mine. The deck creation form is a feature I'm particularly fond of, allowing users to freely create, edit, and delete their decks.

Upon completing deck creation you are greeted with a preview of what your deck looks like and a URL you can share with your friends and family! Throughout the deck creation process, progress is saved automatically to ensure that, in the case of some critical error, the work put in is not lost—a frustration I experienced firsthand.

Some other notable features include account creation, search functionality, infinite scrolling, and a leaderboard to add a competitive touch to it all. Watching my friends compete for the top spot was hilariously entertaining.

Being my first from-scratch React project, the idea of components was still new to me. The most important step was just getting started. I tried my best to create what I could with my current understanding, knowing I could always go back and refactor as I got more comfortable with React's declarative component-based model.

Browsing through the commit history of this project from time to time reminds me of the days when this was all so new. It is beautiful to see just how much I grew in a couple of months working on this project. If anyone reading this is struggling with their learning in the endless rabbit hole of tutorials, my advice is to just build. Build something you can call your own. Something you truly enjoy building from start to finish. It will be hard, and it will be intimidating, but all you have to do is start and try your best! Seek help when you need it, you got this! It will provide you with unmatched confidence to say, "I CAN DO THIS!"

Now let's talk about the struggles—oh boy, did I struggle. To preface, I wanted to keep my dependencies slim for this project. Despite the abundance of powerful libraries out there, especially in the React ecosystem, I chose to implement most features myself. Knowing I could always pick up those libraries at a later time, I wanted to experience and understand what these libraries abstracted from me.

The feature that caused me the most pain was definitely the infinite scrolling found on the Leaderboard and Decks pages. The implementation relied on the fetch, Intersection Observer, and AbortController APIs, as well as React's useState and useEffect. It was only after hours upon hours of furious googling, iterating, and struggling was I finally met with a functional infinitely scrolling leaderboard. It was all worth it, as I learned so much in the process.

A pain point that haunts me to this day was getting useEffect's notoriously delicate dependency array correct, which proved especially difficult when trying to achieve infinite scrolling that just works with the combination of these APIs and hooks. I remember, after hitting save with the final change to the dependency array and seeing it just work, it felt as though I unlocked the key to the universe.

Some other notable struggles in this process that I dealt with were invalidating stale state, fetch retries and cancellations, and loading states.

The infinite scrolling was truly a glimpse into the endless number of struggles I encountered during this project. If I were to list every single struggle and bit of knowledge I learned, then the scrollbar thumb on this page would probably be as thin as a hair.

One of my favorite takeaways from this all has to be the growth in my appreciation for accessibility and data security. Performing manual accessibility testing with screenreaders, particularly NVDA and Windows Narrator, showed me how painful it can be to navigate an inaccessible website and how important accessibility truly is.

In seeing users sign up and create decks, I felt a personal responsibility grow—a responsibility to safeguard the data they are entrusting to me so as not to cause harm through my own negligence.

This project greatly helped me grow my confidence as a developer, and it showed me the satisfaction of seeing a project you've poured months into come to life. I realized that I could take what started as a simple, random project idea, flesh out an entire plan and design for it, and implement it from start to finish.

This project is far from perfect and there are probably plenty of bugs lurking around, but I feel I have built a solid foundation to continually iterate upon. From the start of this project, the biggest goal was to create a project I could always go back to and improve upon.

With there being so many forms of trivia, I will definitely come back to this project and implement more features when time allows. Features such as multiplayer lobbies and other game formats like Jeopardy, Kahoot, and potentially even other random games like hangman or sliding puzzles.

If you've stuck through this entire ramble, I just want to say thank you. Thank you for following one of the most pivotal points in my journey as a developer.