royal-mushrooms-frontend

🍄 Royal Mushrooms - Premium Mushroom E-commerce Platform

🌿 Freshly Harvested Premium Mushrooms, Delivered to Your Door 🌿

Discover a world of flavor with our exquisite selection of organic and wild-foraged fungi

✨ Features

🛒 E-commerce Functionality

Interactive shopping cart with real-time updates
Product catalog with detailed descriptions and pricing
Responsive design optimized for all devices

👤 User Experience

Intuitive user interface with smooth animations
User authentication simulation (login/logout)
Admin panel for product management
Professional consultation services integration

🎨 Modern Design

Built with Tailwind CSS for responsive styling
Custom animations and hover effects
Clean, modern interface with green nature-inspired theme
Mobile-first responsive design

🚀 Tech Stack

Framework: Next.js 15.4.6 - React-based full-stack framework
Styling: Tailwind CSS 3.4.17 - Utility-first CSS framework
Runtime: React 19.1.0 - JavaScript library for building user interfaces
Database Ready: Firebase 12.1.0 - Backend services integration
Development: PostCSS and Autoprefixer for CSS processing

📋 Prerequisites

Before running this project, make sure you have:

Node.js (version 18.0 or higher)
npm, yarn, pnpm, or bun package manager
Modern web browser (Chrome, Firefox, Safari, Edge)

⚡ Quick Start

1. Clone the Repository

git clone https://github.com/RavinduWanasinghe0524/royal-mushrooms-frontend.git
cd royal-mushrooms-frontend

2. Install Dependencies

npm install
# or
yarn install
# or
pnpm install
# or
bun install

3. Run the Development Server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

4. Open Your Browser

Navigate to http://localhost:3000 to see the application in action! 🎉

📁 Project Structure

royal-mushrooms-frontend/
├── pages/
│   ├── _app.js          # App wrapper with global styles
│   ├── _document.js     # Custom document structure
│   └── index.js         # Main homepage component
├── styles/
│   ├── globals.css      # Global CSS with Tailwind
│   └── Home.module.css  # Component-specific styles
├── public/
│   └── [assets]         # Static assets (images, icons)
├── tailwind.config.js   # Tailwind CSS configuration
├── postcss.config.js    # PostCSS configuration
└── package.json         # Project dependencies

🛍️ Product Features

Premium Mushroom Selection

Forest Shiitake - Rich umami flavor, perfect for stir-fries
Pearl Oyster Mushrooms - Delicate texture, seafood alternative
Giant Portobello Caps - Meaty, robust flavor for grilling
Royal Lion’s Mane - Unique texture with cognitive benefits
Golden Chanterelles - Gourmet favorite with fruity aroma

Shopping Experience

Add/remove items from cart with quantity management
Real-time price calculation
Responsive cart modal with smooth animations
Currency display in LKR (Sri Lankan Rupees)

🎨 UI/UX Features

Responsive Design: Optimized for desktop, tablet, and mobile
Smooth Animations: Custom CSS animations and transitions
Interactive Elements: Hover effects and button animations
Color Scheme: Nature-inspired green palette
Typography: Inter font family for modern readability

🔧 Development Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run ESLint
npm run lint

🌐 Deployment

Deploy on Vercel (Recommended)

Push your code to a Git repository
Visit Vercel
Import your repository
Deploy with one click! 🚀

Deploy on Netlify

Build the project: npm run build
Deploy the out folder to Netlify

Deploy on Traditional Hosting

Run npm run build
Upload the generated files to your web server

🤝 Contributing

We welcome contributions! Here’s how you can help:

Fork the repository
Create a 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

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Support & Contact

Email: consult@royalmushrooms.com
GitHub: RavinduWanasinghe0524
Issues: Report a bug

🙏 Acknowledgments

Built with ❤️ using Next.js and Tailwind CSS
Icons from Heroicons
Images from placeholder services
Inspired by modern e-commerce design principles

🍄 Royal Mushrooms - Where Quality Meets Nature 🍄