DEV Community: Amanda H

I Just Built My First Official React/Redux Website

Amanda H — Fri, 02 Sep 2022 18:49:55 +0000

My journey has taken me through programming fundamentals with Python to basic front-end work utilizing HTML, CSS, and vanilla Javascript. I then moved into the world of back-end programming with a full-stack project called BenjiKnows. Each step has been filled with a bit of frustration and a whole lot of excitement, but the day we began using React I saw myself within reach of a truly polished, professional application.

For my React project, I decided to focus my efforts on building an application that would expand my understanding of front-end design and functionality. I honestly struggled at first with learning React and Redux in the beginning and was a little nervous to tackle this project. Despite it all, The Hardy Grove was born and is now officially complete (aside from adding potential features later on, of course).

"The Hardy Grove" is an Irish pub that is located in the Connemara region of Ireland, outside the city of Westport. While this particular restaurant is totally made-up, the website demonstrates the practical importance of visual design and functionality for a potential business. Users can easily navigate a myriad of tabs, including the menu, an online order tab and a contact section with hours and location information, as well as the homepage. You can add food items to your cart, remove them, and upon complete order you are given a thank you page that says that your order will be ready shortly.

"The Hardy Grove" is a React.js application that utilizes redux, TypeScript, SCSS and react-router. All SCSS for this project is custom-made and no frameworks were used. For demo purposes, the information for the menu and shop items (name, description, and images) is stored locally in the initial state of the application, but the site can easily be converted to reading these items from a database. When users provide and submit input, the information is sent to the store where it can be rendered onto the page. I also chose to follow traditional organizing standards for the files in this application, allowing future edits to be made quickly and cleanly.

While this project was an interesting one, I am really glad that I did it. Tackling React is one of those very big hurdles before being able to take on professional and legitimate applications, and so I feel like this experience really helped to cement my knowledge for the better. The only blocker that I truly had was time, and that was for several reasons. There were so many ideas that I had that I wanted to implement, but you can only do so much in a week. If I had unlimited time, this application would have looked differently than it does now, but I am happy with the results that I ended up with.

Now that that's over with, I can now officially begin to tackle the big kahuna of this entire experience: The Capstone Project.

I Just Created My First Frontend Project

Amanda H — Fri, 15 Jul 2022 11:23:48 +0000

For my first frontend project, I decided to look towards my personal hobbies and create a resource website for the UFC, the organization that hosts MMA events and is probably the most recognizable brand out there for the sport:

I'm not going to lie, I put my heart and soul into this website. I wanted to try and make something as professional as possible while also trying to put a spin on the visual aesthetics. I was constantly referencing the official UFC site, some news sites, and so many sites out there just didn't look as modern as I would have assumed. So, I tried my best to make my own modern take.

I made this website using vanilla Javascript, HTML and CSS. I also used three APIS, which were the Wikipedia API, the Sports Data API from Rapid API, and the UFC Current Rankings API from Rapid API as well. It took much longer than I would have liked to get these APIs since there weren't many out there to pull from, so these three allowed me to at least be creative about making a one-stop resource.

The Rankings page is essentially where you select a specific weight class and when you submit, it reveals all 15 fighters in order and will highlight the champion or number 1 fighters.

Then, the schedule page will show you the upcoming events on the horizon, such as a Fight Night or a PPV:

And finally. the fighter's page will allow you to search any fighter in the UFC that you desire. Just one click will give you their UFC profile link, their wikipedia page and a little snippet of that wikipedia article so that you know what you're getting into:

The majority of my time was spent styling and trying to get the layouts and designs how I wanted them to be. I tried to build it as I went along, but at the end of the day my creative side was itching too much, so I spent a while just drawing up ideas. The JavaScript portion of the code was not as involved in this project, but I did have to carry out some logic in order to get the results from the Wikipedia API to print out correctly. I did, however, use LOADS of DOM manipulation, which was necessary for the APIs to do their jobs.

Overall, I am pretty satisfied with what I came up with. It honestly has taught me so much about designing a website and how to implement certain components in CSS, without all of the bells and whistles. I truly think that this website gave me a breakthrough in regards to how much really goes into building a website from scratch, from ideas to application.

If you would like to check out the project for yourself, head over to my GitHub and follow the installation guide. Thanks for reading!

I Made an RPG Game in Python For The First Time

Amanda H — Fri, 17 Jun 2022 05:45:05 +0000

Building and coding an RPG game, or any video game in general for that matter, felt like a dream to me a few months back. I have played all sorts of video games since I was little, but none of those games gave me the euphoria that creating this game made me feel. Benji's Escape honestly gave me the boost that I needed in regards to feeling like a legitimate programmer (a beginner one at least) and being able to understand the process of building a text-based game in the terminal.

Benji's Escape is a story based on my pet bearded dragon, Benji, who I love and have had for 3 years at this moment in time. You play as Benji, a young but determined bearded dragon that was just adopted by a loving family and realize that the son, a 6 year old named Timothy, is your new owner and essentially has no idea what he's doing or how to take care of you (fun fact: bearded dragons require very specific needs that need to be known before you buy one!). Your goal is to follow the story, fight each member of the family in their home, and escape off into the wild and finally be free or risk being taken back to your tank to most likely meet a horrible fate.

Benji has his own class with name and health attributes, along with methods that give him actions like bite, run, and scratch. Each enemy that he faces (Timothy, Mom, and Dad) have their own attributes stored in their own dictionaries, and this information along with the Benji's class information are passed into each fighting function that occurs. The story progresses with functions that either follow one another or are triggered from within another function, each one being carefully placed so that the sequence of events are correct. When you battle one of the family members, you are given the options that are within the methods of the Benji class and the user must type in the action. The attack damage is randomly generated and decrements the health in a turn-based battle style between you (Benji) and the enemy you are facing. If your health goes to zero, then it's game over, but can play again if you like; if the enemy's health goes to zero, then the story continues. When you beat all 3 enemies, you officially win the game and a screen pops up asking you if you'd like to play again or quit. You can also quit at any point in time, whether it be during battle or at the title screen.

Thankfully I managed to fix a multitude of bugs as I built this game and finished it to my liking, but it definitely wasn't easy. The most difficult parts about Benji's Escape were the game logic and trying to make the code more efficient in terms of not having so much repetition. On the last day before this project had to be completed, I discovered a bug as I did the final test run and simply could not leave it there, and ended up becoming a whirlwind of a night because of it. The game logic that I created took hours upon hours of writing out and breaking down my thoughts, typing it up, testing it, then rinse and repeat. Despite the hardships, the bug actually allowed me to cut out some unnecessary code and made it more presentable, which I think helped me improve my debugging skills.

Honestly, I don't think that I've ever been this proud of something before. I've always wanted to make a video game as a bucket list goal and now I can finally say that I've made one! Whenever I solved a problem dealing with the game logic or getting the story to line up the way that I wanted it to, it was so exciting and made me feel more accomplished than ever before. Even Benji ran through the final test with me and he loved it(at least I think he did)!

There of course were additional features that I wanted to add, but simply couldn't because of the lack of time. If I could continue working on this project, I probably would have added more choices in decision making prompts, adding different effects for choosing an action in battle depending on who you're facing, and adding an end credits after you escape that scrolls upwards. I also would have refactored the code further so that I could find a way to make the code shorter. Who knows, maybe I will come back to this one and improve it later on!

Benji's Escape, if you'd like to try it out for yourself, is in my github repository. I hope you enjoy it just as much as I enjoyed making it!