A modern, decentralized e-commerce platform built with Next.js 15 and Web3 technologies. EtherLuxe offers a seamless shopping experience for premium fashion items with cryptocurrency payment integration.
Live Demo: https://www.etherluxe.store/
- Web3 Integration: Connect wallet functionality for cryptocurrency payments
- Modern UI/UX: Clean, minimalist design with smooth animations and transitions
- Product Categories: Browse through multiple categories including Jackets, Footwear, Accessories, and Bags
- Product Details: Comprehensive product pages with size selection, color options, and quantity management
- Shopping Cart: Full-featured cart with add/remove functionality and real-time updates
- Responsive Design: Fully responsive layout optimized for all device sizes
- Newsletter Signup: Stay updated with the latest collections and offers
- Coming Soon Products: Preview upcoming product launches with waitlist functionality
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Icons: Lucide React
- Web3: Ethereum integration for wallet connectivity
- Animations: Framer Motion (optional)
- Node.js 18+ installed
- npm or yarn package manager
- MetaMask or compatible Web3 wallet (for testing wallet features)
-
Clone the repository: ```bash git clone https://github.com/ck2010317/EtherLuxe---Web3.0-Ecommerce-.git cd EtherLuxe---Web3.0-Ecommerce- ```
-
Install dependencies: ```bash npm install
yarn install ```
- Set up environment variables:
Create a
.env.localfile in the root directory and add necessary environment variables: ```env
NEXT_PUBLIC_SITE_URL=http://localhost:3000 ```
- Run the development server: ```bash npm run dev
yarn dev ```
- Open http://localhost:3000 in your browser to see the application.
``` EtherLuxe/ ├── app/ # Next.js app directory │ ├── products/ # Product pages │ ├── cart/ # Shopping cart page │ ├── layout.tsx # Root layout │ └── page.tsx # Homepage ├── components/ # React components │ ├── ui/ # shadcn/ui components │ ├── hero-section.tsx # Hero section component │ ├── product-categories-grid.tsx │ ├── category-section.tsx │ └── ... ├── lib/ # Utility functions │ └── utils.ts ├── public/ # Static assets │ └── images/ # Product images ├── styles/ # Global styles └── tailwind.config.ts # Tailwind configuration ```
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
Browse through various product categories:
- Jackets: Leather, Denim, Winter, and Suede jackets
- Footwear: Designer sneakers and premium shoes
- Accessories: Fashion accessories and complementary items
- Bags: Premium bags and leather goods
- Add products to cart with size and color selection
- View cart with real-time price calculations
- Adjust quantities or remove items
- Seamless checkout process with Web3 wallet integration
- Connect MetaMask or compatible wallets
- View wallet address and balance
- Cryptocurrency payment support (ETH)
- Secure blockchain transactions
The easiest way to deploy your Next.js app is to use the Vercel Platform:
- Push your code to GitHub
- Import your repository on Vercel
- Vercel will automatically detect Next.js and configure the build settings
- Deploy with one click
-
Build the application: ```bash npm run build ```
-
Deploy the
.nextfolder to your hosting provider
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with Next.js
- UI components from shadcn/ui
- Icons from Lucide
- Styled with Tailwind CSS
- Live Site: https://www.etherluxe.store/
- GitHub Repository: https://github.com/ck2010317/EtherLuxe---Web3.0-Ecommerce-.git
Made with ❤️ using Next.js and Web3 technologies