DEV Community

Amanda H
Amanda H

Posted on

I Just Built My First Official React/Redux Website

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.

Top comments (0)