DEV Community

Cover image for Project 32 of 100 - Ecommerce Frontend Prototype in React
James Hubert
James Hubert

Posted on

23 2

Project 32 of 100 - Ecommerce Frontend Prototype in React

Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to today's deployed app: Link
Link to the repo: github

It's always fun working with a non-technical person to build a website. You realize what you've learned, and remember the challenges of the technical side of things to those outside of the development world. The other advantage is that you get exposed to ideas outside of the narrow world of prim and proper user-friendly ideas that a developer might prefer.

In this case, the client liked the aesthetic of the popular online store for young women "Dolls Kill". Here is a preview of their homepage:

Alt Text

For this project I'm following Michael Siebel's (of Y Combinator) advice to just launch your MVP as fast as possible. This isn't my company, but still I wanted to deliver an e-commerce site the customer could use as fast as possible.

The client is Mexican and will be selling products internationally. For that reason it was important to hand-code the website and bypass the payment challenges that developing the website on something like Shopify would present. For payments, we are directing customers (via a chat bubble) to an already-active Whatsapp business chat where my client can receive payment directly without the hefty transaction fees imposed by payment processors such as Shopify, Stripe, or for international payments- Ebanx.

The site is now visible and usable, at a minimum level. Tomorrow I'll deliver the rest of the bells and whistles to make this a full-fledged ecommerce site with additional images and in-depth descriptions as well as prices.

Looking forward to it!

AI Agent image

How to Build an AI Agent with Semantic Kernel (and More!)

Join Developer Advocate Luce Carter for a hands-on tutorial on building an AI-powered dinner recommendation agent. Discover how to integrate Microsoft Semantic Kernel, MongoDB Atlas, C#, and OpenAI for ingredient checks and smart restaurant suggestions.

Watch the video →

Top comments (1)

Collapse
 
leibnizwang profile image
Rahan Bouess

Hi , like it ! I would like you to help me out if you , can , I’m also developing an e-commerce but can’t to use the payement processors like PayPal or stripe for my client is in Africa ! Our so you redirect them and make them pay on WhatsApp as you have mentioned in your post ? Thank you

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

DEV works best when you're signed in—unlocking a more customized experience with features like dark mode and personalized reading settings!

Okay