Skip to content

Like the mythical creature, this frontend has been reborn from the ashes... but instead of turning people to stone, it turns visitors into customers!

License

Notifications You must be signed in to change notification settings

Xjectro/medusajs-restored-frontend

Repository files navigation

🐍 Medusa.js Restored Frontend - The Phoenix of E-commerce!

Like the mythical creature, this frontend has been reborn from the ashes... but instead of turning people to stone, it turns visitors into customers!

🎭 What's This All About?

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.

✨ Features That'll Make You Go "Whoa!"

🛍️ Full E-commerce Arsenal

  • 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

🚀 Next.js 15 Superpowers

  • 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)

🎪 Quick Setup - The "I Want It Now" Edition

Prerequisites (The Boring But Important Stuff)

  • 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)

The Magic Spell (Installation)

  1. Summon your Medusa backend:

    npx create-medusa-app@latest

    This creates your backend faster than you can say "headless commerce"

  2. Clone this beauty:

    git clone https://github.com/Xjectro/medusajs-restored-frontend
    cd medusajs-restored-frontend
  3. Environment variables dance:

    mv .env.template .env.local

    Don't forget to fill in your actual values - lorem ipsum won't pay the bills

  4. Install dependencies (the fun part):

    yarn install

    Time to grab a coffee while the internet downloads itself

  5. Launch into orbit:

    yarn dev

    Your store is now live at http://localhost:8000 - prepare for takeoff! 🚀

💳 Payment Integration - Show Me The Money!

Stripe Setup (Because Everyone Loves Getting Paid)

Add this magical incantation to your .env.local:

NEXT_PUBLIC_STRIPE_KEY=your-stripe-public-key-goes-here

Remember: With great payment power comes great responsibility (and hopefully great revenue)

🏗️ Tech Stack - The Dream Team

  • 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"

🎨 What Makes This Special?

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

🤝 Contributing

Found a bug? Have an idea? Want to make this even more awesome?

  1. Fork it (the repo, not the road)
  2. Create your feature branch (git checkout -b feature/amazing-new-thing)
  3. Commit your changes (git commit -m 'Add some amazing new thing')
  4. Push to the branch (git push origin feature/amazing-new-thing)
  5. Open a Pull Request and let's make magic happen!

📖 Documentation & Resources

🎉 Final Words

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! ☕💰