Mogged

I am a huge gym rat. Something about going to the gym, racking up an absurd ammount of weight and trying to lift it speaks to me. But one thing I don't enjoy, is writing complex, heavy code. So I decided to learn ReactJS. I knew going in that React would allow me to write lighter, easier to read code and I had a brilliant idea: why not use the power of lightweight code to build a website about jacking heavy weights? And just like that, the Mogged Supplement Company was born. Read on to see how I combined two of my passions into one epic project:

The Full Story

To begin the design process, I booted up Adobe XD and got to work building some prototypes. I wanted this project to be brand focused, so I made sure that all of the pages conveyed the image and message of the company to the best of their ability. Over the top styling was the name of the game and I ended up using a lot of flashy fonts and bright colors to really bring a feeling of epicness into the design.

Next, It Was Time To Get Building

Mogged was project I used as a functional (get it?) means of learning ReactJS. Because of this, I wanted to make sure that I took full advantage of the features React has to offer. These included:

JSX

One of the amazing things about ReactJS is JSX, a language which allows Javascript and HTML to be written in the same page. I was able to take use JavaScript's functionality to come up with all sorts of nifty tools, like using the .map() method to generate the product cards on the shop page.

Single Page Design

Using React's react-router-dom library, I was able to quickly turn my website into a single page web app. Time to snag those lightning fast load times.

UseRef

Another great React hook, I used useRef to capture the information in the contact form and clear it. If this was a website for a real company, this is how I would have manipulated and connected the information, probably with an email api.

State

To track the quantities of items in the shopping cart, I used React's useState. Using state allowed me to quickly and easily adjust the quantities displayed on the screen, as well as track and manage the total price of the order.

Areas To Improve

As proud as I am of the shopping cart system, I'll be the first to admit that it could use some work. One issue I ran into was updating components as items were added or removed from the cart, since this required each component to be re-rendered. I did this using window reloads, but I probably should have used React's useEffect hook to re-render the page when the shooping cart was changed. I had to write all of my functions for the shopping cart in the App component and pass them using props, but there's a better solution out there that uses React's useContext. Not using context also caused me to use localStorage instead of useState, since I needed a variable that could be accessed from multiple components.

Takeaways

Through Mogged I learned loads about React and I've never been more excited about a library in my entire coding career. In particular, I really love how easy it is to combine programmatic functionality with style and design. One of the major areas I'm going to have to improve on is my website information architecture and design. This project taught me that I not only have to design systems to pass and manipulate information, but that I have to spend time thinking about how these systems connect and interact with one another. React heavily rewards those that take the time to plan out their paths before they build them and its going to take some time before I fully master the art of thinking ahead in React.

I also learned how important it is to conduct research on the libraries you're using and the methods that come with them. React is a very feature diverse library and Mogged really only scratches the surface of what it can do. In the future, I look forward to unlocking its full capabilities and really seeing what React can do.