🔗 Visit the live site 🎸🎹 🎷
Arpeggio Music Store is a fictional store with a wide range of musical instruments and related products to choose from.
Users can explore the catalog, filter by type, search for specific products, sort items by price, rating, brand, or name, and easily add products to their favorites or shopping cart.
arpeggio-music-store-video-demo-compressed.mp4
Watch uncompressed video on YouTube
Through this project, I had the opportunity to deepen my understanding and build confidence in using React Router, a powerful client-side routing framework that enables seamless navigation within Single Page Applications.
In addition, I explored testing methodologies in React, utilizing Vitest in conjunction with React Testing Library. This combination allowed me to effectively create both unit and integration tests, ensuring the reliability and functionality of my components. I was able to mock callbacks, components, and dependencies, which was crucial for testing more complex interactions within the application.
The first challenge I faced while planning this project was finding an appropriate API to use. I wanted my project to resemble a real online store, but most free public APIs had clearly fake products, which didn't meet my needs. Although I found some promising APIs, like Best Buy's, I was unable to obtain an API key. As a result, I decided to forgo using an external API altogether and instead opted to scrape data from Thomann's website to build my own product catalog. I went with their website specifically because I'm really into musical instruments, gear and everything related, so I end up on their website almost daily.
The second challenge I encountered, related to the aforementioned, was managing the product images. I stored all images in my assets directory, but I faced difficulties dynamically importing them using Vite. Vite's glob import feature would have been ideal for dynamically importing all images within a directory, but it doesn't support template literals or variables as the path, which I needed since the image paths were not predetermined.
To solve this, I considered using the ESM's native feature import.meta.url with the URL constructor, which allows for obtaining the full, resolved URL of a static asset. However, I didn't know the exact number of images for each product, as they varied in quantity. While I could have worked around this, I believed there was a better solution.
That's when I discovered Octokit and the GitHub REST API. With it, I was able to dynamically fetch all images within a specified path in my repository, which suited my needs perfectly. However, once implemented, this approach resulted in longer load times for the images than I was comfortable with.
Ultimately, I decided to discard this approach and, since my repository is public, use the direct URLs of the images from my repository as the source attribute for the images instead. Because the product images are named numerically, I created a function that uses a binary search to determine the number of images available for each product, ensuring I loaded the correct amount of images.
Among the many things I could've done better, one that comes to mind is state management.
As GeeksForGeeks puts it,
Prop drilling is basically a situation when the same data is being sent at almost every level due to requirements in the final level.
read full article
Or, in my own words, prop drilling is when you pass props to components that don't need them, just for them to also pass them down, and eventually reach the component that actually needs those props.
I'm aware now that I should've used contexts to get rid of unnecessary prop drilling. Likewise, I also realize now that I should've used reducers to improve state management, especially in the App component.
Despite Arpeggio Music Store being somewhat responsive and usable in mobile devices and tablets, the overall user experience in such devices could definitely be improved.
I really enjoyed building this project. It not only allowed me to practice and improve on technologies like React, Tailwind, or TypeScript, but also to learn new technologies such as React Router and React Testing Library, which I'll be using in future projects.
Overall, I'm content with the outcome.
All feedback is appreciated, feel free to reach out!