Inspired by this Tweet
I want to make something small but workable, probably like a single React component application
Meaning it should only be one file application, all code should be written using React and other npm modules
If the application is a multi-page then use Modal, Drawers, Sidebars, so overlays
For example, how my e-commerce product will be rendered
Account page inside account modal
Blog page, subscribe page inside Blog modal
legal, privacy, faq inside Help modal
Each product's details are inside the drawers/modal. I prefer a modal
each blog is again inside a modal (but can't cover SEO)
landing page contains tabs, product listing, search feature, footer and company social links
account page: user address details, cart and payment
login form is also a modal with Google login and email-password login (same can be done for signup)
The subscribe form is a newsletter form inside a modal
I've added basic methods and functions, serving images and data from an array (which will be replaced by an API)
This gives me the smallest but workable e-commerce application/website,
This code helps one of our clients to quickly launch and run any e-commerce brand to test the idea ASAP
And soon I will put it live on gettemplate.website
Top comments (2)
Really cool concept — building a fully functional e-commerce flow inside a single React component setup is a great way to validate ideas fast. I like how you’re using modals and drawers instead of routing; keeps the UX lightweight and consistent.
Would love to see how you handle state management (like cart and user data) within that one-file structure — maybe with Context API or Zustand? Sounds like a perfect fit for MVP testing.
Yes, it's really cool not only for MVP but for a production-ready application. Quick to set up, build and deploy, manage and solve errors. State management becomes easy when we deal with a single file component using any state management library, such as Redux, Zustand, Jotai, Context API, or XState.
A single React component gives Freedom to go with anything of your choice, but I'll provide custom state management like Tanstack query that can cache the data using Browser IndexedDB or cookies, in this way, the code remains quite lightweight with fewer dependencies.
The concept was quite clear, be minimal but should cover almost everything an E-commerce platform should have.