Looking Back on Dexter’s Challenge
It’s been a while. I’ve graduated from Flatiron and have slowly been gathering myself from the experience. To start, I journeyed into Software Engineering as a novice looking to get a better grasp at crafting my own magic via code. While challenging, I walked out with the inner workings of the syntax and logic behind building my own apps via editor, which is what I wanted in the beginning. What I didn’t expect was sense of community I would develop and the friendships with people that never would have crossed my path, if not for the crossroads of my bootcamp experience. Ultimately, I walked away with far more than I ever expected. A deep reflection brought on by my capstone project which I titled Dexter’s Challenge. So as I reminiscence, I wanted to take a look back on what I set out to build and the features I put into my final project.
Welcome to Dexter’s Challenge, a trivia application inspired by the Cartoon Network’s Boy Genius. In terms of build, this project is:
- The Frontend is built in React Js, using React Router, Styled Components and React Rating Stars
- The Backend of my application is a Rails Api, which uses Faraday, Active Model Serializers, Dot Env, Bcrypt and JWT.
- The Data is provided by the Open Trivia Database API https://opentdb.com/
Prior to it all coming together, I set a few goals in mind when building my final project. I wanted to integrate an API, so I searched through this wonderful listing of many free API for use for developers https://github.com/public-apis/public-apis . I also wanted to employ something a bit more interactive, being a gamer myself, it made sense to build a game. After looking through the json data, and the flexibility of the available APIs, the Trivia Database was set(although, the dad jokes database was tempting).
My initial demo before the project fair was essentially a log in screen with authentication, a few multiple choice quizzes and various stats on your scores/quizzes taken. My stretch goals were to expand the categories, and possibly introduce a True or False quiz. While the scope of this project was a bit small, I wanted to ensure my timeline gave me enough time to not only debug any issues, but also address my lack of experience with css and styling. This is still before the theme came into the picture. While conservative, the timeline I set up gave me enough time to deliver my MVP (minimal viable product) early and then start on my stretch goals. During the mvp demo, my lead instructor gave me a really deep suggestion, which applauded my reaching the mvp (css needed work haha) but asked me to think of my user and continue to refine and add the very bare application I had presented. In that moment, I was feeling the burn out and felt a bit dry in terms of inspiration. During that weekend, I spoke to a friend via text about the project and of course just bantering, as good friends do. I sent a gif of Mandark laughing, which is one of my favorite character details of Mandark from Dexter’s Laboratory. Suddenly, like a switch, I smiled and realized Dexter was the perfect theme to provide user with a bit of that nostalgia I enjoy and tie it all together. I immediately got to work and started to crush my stretch goals and make it fit to my theme.
So let’s talk features, my first one is the authentication on the login form. I will say that using rails, I do have Active Record Validations in the background but I wanted to implement that red ink seen on so many sites.
This achieved using logic and Regex in the form component. This was a quick blip during the live demo, but really gave an extra touch of feedback for the user when creating an account or logging in.
Once you log in, you are redirected to a user profile complete with stats. I employed stat cards, modeled after the log in form.
The entirety of this data was provided by my rails api. Using serializers, I was able to parse my json data, and limit any chaos when fetching, which was super nice. Also, you will see that the Navigation Bar now has a few options for us. So let’s look at Mandark’s Quiz.
You will see a search bar, to cycle through the categories, since getting to television or movies would be more scrolling. Also each one has a level is which is based on difficulty. Each tile has a button to take a quiz, or rate that specific quiz, which flips over the tile and shows the current overall score by everyone that has taken the quiz, which isn’t needed but a feature for those who like to see how another person might rate a quiz. To get started, click on “Take a Quiz”.
Once started, Mandark is there to take joy in asking you 10 questions in 90 seconds. You will also see how many questions remain.
Once you select an answer, your choice and the action button will highlight.
Once finished, you will see a results screen (Not my best work : / ). This will give you an idea of how much time you had left and how many you got right. You will also see a button to redirect you to the main page with all the quizzes. Finally, a gif of Dexter break dancing with his robot pals. Next, let’s look at Dee Dee’s True or False.
Dee Dee presented a few more challenges. I noticed early on that not as many categories existed and fewer quizzes based on difficulty. Thanks to the buffer time I set up in my schedule I was able to test a lot of the API data I was pulling from the Open Trivia Database. Thankfully, I had enough for the same setup, search bar, quizzes and ratings. Also, to get started just click on “Take the Quiz”.
This specific quiz was intended to be a bit more friendly, being True or False, having the same 90 seconds and only 5 questions.
Once done, a User would see the number of correct answers, time left, a redirect button and a gif of Dexter jamming out on a turntable. Should you finish up for the time being, selecting Log Out , will redirect you to the Log in page. That’s all, Folks =)
Looking back at the start, I never imagined putting this together. I barely knew React, or building Full Stack. So it was a pleasant surprise, that it all came together. Even better, other than updating dependencies, both my back and front end start up just fine.
I received a lot of great questions and feedback at the end of my demo. I had a bit of a self-revelation with one of the questions. What was the story or the inspiration for this app? While I had a quick simple response in the moment, my mind has chewed on this question since then, like an oyster forming a pearl. I would say now that the actual story is we are all creators. We take our ideas and illustrate them into digital mediums. With that affirmation now set, I’m eyes are looking forward aiming to illustrate ideas via editor.
To close this out, more ideas are coming and so do their challenges. I’m not quite done with Dexter. I’d like to scale this app up and down, to see what comes out. The plan is to build a lighter version for public demo purposes and a much larger version, with the features that I was not able to implement in the moment. Should be fun.