🌿 Nature Daily - Wisdom & Bounty Platform

Nature Daily is a modern, interactive web platform dedicated to reconnecting people with the natural world. It features daily nature facts, a seasonal food calendar, health benefits of nature, and a beautiful gallery—all wrapped in a calm, immersive user interface.

🔴 Live Demo: Click Here to Visit Website

✨ Key Features

• Daily Facts Library: Over 1000+ searchable nature facts.
• Seasonal Food Guide: Interactive month-by-month guide for fruits and vegetables.
• Health & Wellness: Science-backed summaries of nature's impact on mental/physical health.
• Gallery: Vibrant, high-definition nature photography.
• Plant Encyclopedia: Educational cards about trees and plants.

---

🚀 Getting Started

Follow these instructions to set up the project on your local machine.

1️⃣ Prerequisites

Make sure you have the following installed:

• Node.js (v18 or higher recommended) - Download Here
• Git - Download Here

2️⃣ Installation

Open your terminal (Command Prompt, PowerShell, or Terminal) and run:

# 1. Clone the repository
git clone https://github.com/Shahiskhan/Nature-s-Daily-Wisdom-Bounty.git

# 2. Go into the project folder
cd Nature-s-Daily-Wisdom-Bounty

# 3. Install dependencies (Crucial Step!)
npm install

Note: If you see any peer dependency warnings, you can safe ignore them or use npm install --legacy-peer-deps.

3️⃣ Running the App

Start the development server:

npm run dev

• Once started, you will see a link (usually http://localhost:5173).
• Ctrl + Click that link to open the app in your browser.

4️⃣ Building for Production

To create a finalized version for deployment (Netlify, Vercel, etc.):

npm run build

This creates a dist folder containing the optimized files.

---

🛠️ Tech Stack used

• React.js (Vite) - For super-fast performance.
• Tailwind CSS - For beautiful, responsive styling.
• Framer Motion - For smooth, professional animations.
• React Router - For seamless multi-page navigation.
• Swiper.js - For touch-friendly sliders.

---

❓ Troubleshooting

Q: I see a white screen when I load the page? A: This usually happens if dependencies aren't fully installed. Try running these commands:

rm -rf node_modules package-lock.json  # (Or manually delete node_modules folder)
npm install
npm run dev

Q: Images are not loading? A: Check your internet connection. The app uses high-quality images from Unsplash which require network access.

---

📞 Contact

Developer: Muhammad Shahis Email: aliaskk8@gmail.com Phone: 0315-1387450

Created with 💚 for the love of Nature.