DEV Community

Melissa Bennett-Holt
Melissa Bennett-Holt

Posted on • Updated on

A Very Potter React App

This app has been years in the making! My journey through Flatiron School's Software Engineering program has been an unconventional one, and I want to take a moment to acknowledge that here. I first came to Flatiron some months after my younger sister was killed. During that trying time, I found myself searching for more out of life, feeling that life was too short to just get by.

After studying the social sciences in college, retraining my brain to be more technical was quite a challenge, and took longer than I originally expected. After all is said and done, getting through this program is my proudest achievement to date, because there were many moments when I didn't think I ever would. That said, let's get into it!

The main function of this app is to show a representation of the Hogwarts sorting ceremony (all recognizable characters and names of the wizarding world of Harry Potter are the property of J.K. Rowling). It also displays all students, as well allowing for the addition and deletion of students.

Pre-sorting Post-sorting

I enjoyed getting familiar with React, it was more intuitive than anything I've encountered so far, and the framework is both highly customizable and user-friendly out of the box. I know I've only scratched the surface of what it can do! React Router and the Form from "semantic-ui-react" were wonderful tools. No more worrying about including the preventDefault() method!

In fact, this Form is so user-friendly and handles so much behind the scenes that I actually had some trouble with articulating what makes a "controlled form". With a controlled form, the React component that renders a form also manages user input with state. This also allows for us to clear forms upon submit by updating the state.

I always like to highlight one "silly" mistake from each one of my projects, and this one's was forgetting to assign ids to my database items, and wondering why my POST request wasn't working!

https://media.giphy.com/media/xT5LMzIK1AdZJ4cYW4/giphy.gif

Homer Simpson gif

It was important to me to include the carousel feature in this app, because I wanted a sense of the queue that students must wait in. This turned out to be trickier than I could have imagined, but this tutorial really helped me out.

This is one app that I'm not quite ready to shelf just yet, I look forward to improving the styling and adding more features, but for now, that's a wrap!

React App

See the repo here.

Top comments (0)