Crux Games e-commerce App: My ReactJS Project Journey
In this blog post, I’ll be sharing my experience and reflections on my journey with React JS, along with insights into my first React project, an e-commerce website for games called Crux Games.
What I’ve Learned Thus Far:
After completing the Vanilla JavaScript phase of my boot camp, I transitioned into the world of React, a JavaScript library for building user interfaces. Here, I delved into the fundamentals of React, exploring concepts such as components, state management, props, hooks, Controlled Forms, and Client-side routing. Additionally, I gained insights into advanced topics like context API, useEffect hook for side effects, and asynchronous data fetching.
As someone completely new to React, grasping the fundamental concepts was challenging. Additionally, as I progressed into more advanced topics, the complexity increased. I encountered challenges such as managing state across multiple components, handling asynchronous data fetching, and structuring the application for scalability and maintainability.
The Project Requirements:
- The application must be a single-page application, housed within a single index.html file, utilising Create React App.
- At least 5 components must be utilised to maintain a well-organised code structure.
- Implement at least 3 client-side routes using React Router, complete with a navigation bar or similar UI element facilitating seamless navigation between routes.
- The app must integrate a JSON server as a mock-up backend to persist data.
- Encourage minimal styling using CSS or incorporate UI frameworks like Bootstrap.
My React Project: Crux Games
The Crux Games project aimed to develop an e-commerce website catering to gaming enthusiasts, offering features to browse, purchase games, manage wishlists, and shopping carts.
Structuring Components:
What really helped me get started was designing a prototype of what the website visually looked like and where features would go. I used Figma for the first time to assist me in creating the draft. For those who don’t know about Figma, Figma is a collaborative design tool used for creating user interfaces, prototypes, and interactive designs. It also enables teams to work together in real-time on the same projects from anywhere.
Functionality:
The Crux Games app features a Home page showcasing a catalogue of games, each displaying essential details such as title, price, and image. Users can filter games by genre, utilise the search bar, and interact with game cards to add them to their wishlist or cart. The app simulates backend functionality using a JSON server, enabling users to manage their shopping cart and wishlist. Additionally, client-side routing facilitates navigation between the Home, Wishlist, and Cart pages.
Styling:
For styling, I employed a blend of CSS and React Bootstrap, focusing on creating a responsive design for enhanced user experience across devices. Additionally, I incorporated Google Fonts to add aesthetic appeal to the interface.
A Quick demo of the Web App:
The Challenges:
Building Crux Games presented several challenges, each contributing to valuable learning experiences:
- State Management: Managing state across multiple components and ensuring data consistency was challenging. I had to spend more time here to set up the foundations and carefully design the state structure and leverage React’s state management capabilities effectively.
- Asynchronous Operations: Implementing asynchronous operations, such as fetching game data from the server, required careful handling of promises and asynchronous functions. Understanding the lifecycle of asynchronous operations and managing side effects using useEffect hook was crucial. There were definitely a lot of errors and bugs I encountered when it came to persisting item data with wishlist and bag contents.
- Component Structure: Structuring the application’s components in a modular and reusable manner was essential for scalability and maintainability. What really helped at the beginning was spending careful thought into devising component composition, where props are used with data flow, and finally deciding where states should live.
- Styling and UI Design: Designing a visually appealing and intuitive interface posed its challenges. Experimenting with CSS styling, leveraging libraries like React Bootstrap, and focusing on responsive layout design. This project gave me more opportunities to explore using Bootstrap for the first time.
Final Thoughts — What I’ve Learned:
Completing the Crux Games project was a culmination of many long days and hours spent, yet it was a rewarding experience that helped my understanding and application of React JS. Here are some key takeaways from this project:
- Continuous Learning: React JS is a powerful and versatile library with a steep learning curve. It is okay to feel lost and frustrated, but one can definitely learn by embracing a mindset of continuous learning and exploration is essential to master React and stay updated with the latest developments. There are still many things in React I will continue to learn, hone my skills and understanding.
- Problem-Solving Skills: Projects like Crux Games sharpen problem-solving skills, fostering a systematic approach to challenges, breaking down complex problems.
- React Community: In addition to learning the content provided during the Bootcamp phase, actively participating in the React community and making use of supplementary resources like Stack Overflow, GitHub, and online tutorials enhanced my learning journey and enabled me to tackle challenges more effectively.
In conclusion, the journey with React JS and the Crux Games project has been both immensely challenging and rewarding. As I continue to explore the vast landscape of web development, I look forward to tackling new projects, honing my skills, and contributing to the vibrant React ecosystem.
