SoundWave | Headset Shop

Soundwave was a personal project created to simulate a professional-grade online store. My goal was to design a responsive, visually appealing, and secure platform where anyone interested in buying audio devices could shop confidently.

I also wanted to challenge myself by integrating third-party services like Stripe for payments and Supabase for authentication and data management.

Tech Stack & Tools

• Frontend: Next.js, Redux Toolkit, Tailwind CSS, Shadcn/UI
• Backend: Supabase (database, auth, and storage)
• Payments: Stripe
• Hosting: Vercel
• Development Tools: VS Code, GitHub for version control

Each tool was chosen intentionally — Next.js for its server-side rendering and performance, Supabase for its fast integration with authentication and storage, and Stripe for secure, production-ready payment handling.

Design & UX

I aimed for a modern and professional aesthetic that matched the sleek feel of audio tech products.Using Tailwind CSS and Shadcn/UI, I built reusable and consistent UI components that made styling fast and scalable.

Development Process

1. Building the Frontend

I used NextJS due to the use of server components to give the website SEO coverage and allow bots and crawlers like google to index the website. Tailwind css and Shadcn was used for reusability and ease of development when building the website. I no longer need to create and manage multiple CSS files since Tailwind is an inline styling framework.

when building the products page, I encountered difficulties managing the state components of the product items and the cart button in the navbar. I decided to use Redux as a state management library instead of relying with the native ReactJS context hooks since I already had experience dealing state management with Redux prior to this project.

Redux allowed me to easily manage the state of my products and cart in a singular store accessible to any part of the website. This made it easier for react components to respond to any state changes regardless of how far or deep they are in the React tree.

2. Building the Backend

After building the Dashboard and products page, I configured the supabase backend to provide the website authentication and data storage. Supabase is a different yet similar experience to Firebase, a backend I was used to building before, and it made it easier for me to work around the project.

The supabase api alse made it easier to setup NextJS protected routes using a middleware script that verifies the cookie attached to every request when visiting a route in a page. I also included a google provider for the authentication to allow users to log in to the website with their google accounts. This was easily done by using an api key from the google console platform.

3. Connecting the Frontend and Backend

After configuring the backend, I connected it to a frontend using the available supabase package. I first built the api section of the website in NextJS to provide a way for the website to interface with the backend.

3. Stripe Integration

I proceeded to integrate Stripe into the website using their packages and api. Since I was new to Stripe, I only used the default payment portal provided by stripe when accepting payment from users. It is a page provided by stripe with a custom link that they generate for web applications to redirect their users to when making payments. I had difficulties with this method since at first since I had no knowledge how to inform the backend if the user made a successful payment since the payment occurred in a separate page. While stripe did allow an option to redirect the user to any location after making a payment but I cannot use this since it does not provide a safe way to pass data through the URL. I then learned of webhooks and luckily Stripe provides this in their dashboard to set up. This allows an option for the backend to receive updates of successful payments by having the stripe directly communicate to any endpoint when an event is triggered.

Outcome and Reflection

If I were to continue developing Soundwave, I’d add an admin dashboard for product management, refine the checkout flow, and enhance mobile performance. The products page could also be enhanced by using pagination in fetching the products from the database. This avoids the website from fetching large amounts of data at once when the number of products reached a higher volume.

Overall, Soundwave helped me grow significantly as a full-stack developer — from handling UI design systems to backend integrations and deployment pipelines.