Like the mythical creature, this frontend has been reborn from the ashes... but instead of turning people to stone, it turns visitors into customers!
Welcome to the Medusa.js Restored Frontend - a sleek, modern e-commerce storefront that combines the power of Medusa's headless commerce backend with the blazing-fast Next.js 15! Think of it as the Swiss Army knife of online stores, but shinier and with better TypeScript support.
- Product Detail Pages - Because first impressions matter (and so do the second, third, and fourth ones)
- Product Overview Pages - Where window shopping gets an upgrade
- Product Collections - Like Netflix categories, but for things you can actually touch
- Shopping Cart - The digital equivalent of "hold my beer"
- Stripe Checkout - Money talks, and we speak fluent credit card
- User Accounts - Your customers' digital home away from home
- Order Details - Receipts that don't fade in your pocket
- App Router - Navigation so smooth, it's practically butter
- Server Components - Faster than your morning coffee kicks in
- Server Actions - Like regular actions, but with a cape
- Streaming - Not the Netflix kind, the "ridiculously fast loading" kind
- Static Pre-Rendering - Pages that load before you even click them (almost)
- Node.js (the newer, the better - we don't judge vintage though)
- Yarn (because npm is so last Tuesday)
- A Medusa backend running on port 9000 (like a well-behaved server should)
-
Summon your Medusa backend:
npx create-medusa-app@latest
This creates your backend faster than you can say "headless commerce"
-
Clone this beauty:
git clone https://github.com/Xjectro/medusajs-restored-frontend cd medusajs-restored-frontend -
Environment variables dance:
mv .env.template .env.local
Don't forget to fill in your actual values - lorem ipsum won't pay the bills
-
Install dependencies (the fun part):
yarn install
Time to grab a coffee while the internet downloads itself
-
Launch into orbit:
yarn dev
Your store is now live at http://localhost:8000 - prepare for takeoff! 🚀
Add this magical incantation to your .env.local:
NEXT_PUBLIC_STRIPE_KEY=your-stripe-public-key-goes-hereRemember: With great payment power comes great responsibility (and hopefully great revenue)
- Next.js 15 - The React framework that makes developers happy
- Medusa.js - Headless commerce that doesn't lose its head
- TypeScript - JavaScript's smarter, more organized sibling
- Tailwind CSS - Making things pretty without the CSS headaches
- Stripe - Turning "I want this" into "Payment successful"
This isn't just another e-commerce template - it's a restored frontend that brings together the best of modern web development:
- Performance - Loads faster than your customer's patience runs out
- Scalability - Grows with your business (and your ambitions)
- Developer Experience - Because happy developers make better products
- Modern Architecture - Built for 2024 and beyond, not 2004
Found a bug? Have an idea? Want to make this even more awesome?
- Fork it (the repo, not the road)
- Create your feature branch (
git checkout -b feature/amazing-new-thing) - Commit your changes (
git commit -m 'Add some amazing new thing') - Push to the branch (
git push origin feature/amazing-new-thing) - Open a Pull Request and let's make magic happen!
- Medusa.js Documentation - Your best friend for backend mysteries
- Next.js Documentation - Everything you need to know about the frontend magic
- Stripe Documentation - The money-handling manual
Remember: E-commerce is not just about selling products - it's about creating experiences. This frontend helps you create experiences so smooth, your customers will think they're shopping in the future!
Now go forth and build something amazing! 🚀
Made with ❤️, ☕, and probably too much TypeScript
P.S. - If you make millions using this, we won't say no to a coffee donation! ☕💰