Fruit-Flower-Encyclopedia-Mrn

๐ŸŒฟ Fruit & Flower Encyclopedia

A modern and interactive MERN stack web application that allows users to explore, compare, bookmark, and review various fruits and flowers โ€” with support for multilingual interface, dark mode, voice search, and external API integration.

๐ŸŒŸ Features

๐Ÿงฐ Tech Stack

Frontend Backend Database External APIs
React, Bootstrap 5 Express.js, Node.js MongoDB Spoonacular, Wikipedia

๐Ÿงฑ Folder Structure

fruit-flower-encyclopedia/ โ”œโ”€โ”€ client/ โ”‚ โ”œโ”€โ”€ src/ โ”‚ โ”‚ โ”œโ”€โ”€ components/ โ”‚ โ”‚ โ”œโ”€โ”€ pages/ โ”‚ โ”‚ โ”œโ”€โ”€ App.jsx โ”‚ โ”‚ โ”œโ”€โ”€ index.jsx โ”‚ โ”‚ โ””โ”€โ”€ assets/style.css โ”œโ”€โ”€ server/ โ”‚ โ”œโ”€โ”€ controllers/ โ”‚ โ”œโ”€โ”€ models/ โ”‚ โ”œโ”€โ”€ routes/ โ”‚ โ”œโ”€โ”€ utils/ โ”‚ โ”œโ”€โ”€ config/db.js โ”‚ โ””โ”€โ”€ app.js โ”œโ”€โ”€ data/ โ”‚ โ”œโ”€โ”€ fruits.json โ”‚ โ””โ”€โ”€ flowers.json โ”œโ”€โ”€ .env โ””โ”€โ”€ package.json

๐Ÿงช Local Setup

1. Clone the Repo

git clone https://github.com/your-username/fruit-flower-encyclopedia.git
cd fruit-flower-encyclopedia

### 2. Backend Setup

```bash
cd server
npm install

Create .env file

MONGO_URI=mongodb://localhost:27017/fruitFlowerDB
SPOONACULAR_KEY=your_spoonacular_api_key
PORT=5000

Then run:

npm run dev

3. Frontend Setup

cd ../client
npm install
npm start

๐Ÿš€ Live Demo

๐Ÿ”— View Live Site

๐Ÿ–ผ๏ธ Screenshots

Add 2โ€“3 screenshots showcasing:

Home Page Dark mode UI Page

๐Ÿ“ค API Routes

๐Ÿ”น Fruits

๐Ÿ”น Flowers

๐Ÿ”น Reviews

โœ๏ธ Author

๐Ÿ”ธ Resham Yadav ๐ŸŒ Portfolio ๐Ÿ’ผ LinkedIn ๐Ÿ“ GitHub