🌽 Node Farm 🥦

A modern, elegant Node.js web application showcasing fresh organic produce with a beautiful, responsive design. This project demonstrates fundamental Node.js concepts including HTTP server creation, file system operations, URL routing, modular architecture, and template rendering with a clean separation of concerns.

📋 Table of Contents

• Overview
• Features
• Project Architecture
• Installation
• Usage
• API Endpoints
• Code Analysis
• Module System
• Technologies Used
• Learning Objectives
• Development Scripts

🌟 Overview

Node Farm is a full-stack web application built with pure Node.js that showcases an organic produce marketplace. The project emphasizes clean architecture, modular design, and fundamental web development concepts without external frameworks.

✨ Features

• 🏠 Product Overview Page: Displays all available fresh produce in an attractive card layout
• 📋 Individual Product Pages: Detailed view of each product with comprehensive information
• 🔌 JSON API: RESTful API endpoint for product data
• 📱 Responsive Design: Beautiful CSS styling with gradient backgrounds and hover effects
• 🎨 Template System: Dynamic HTML generation using placeholder replacement
• 🌱 Organic Product Highlighting: Special styling for organic products
• ⚡ Error Handling: Custom 404 page for invalid routes
• 🔄 Hot Reload: Development server with nodemon for automatic restarts
• 📦 Modular Architecture: Clean separation of concerns with organized modules

🏗️ Project Architecture

Node Farm/
├── index.js                 # Main server file & routing logic
├── package.json            # Project configuration & dependencies
├── data.json              # Product database (JSON)
├── README.md              # Project documentation
├── Modules/               # Core application modules
│   ├── dataLoader.js      # Data loading & parsing utilities
│   ├── templateEngine.js  # Template rendering engine
│   └── templateLoader.js  # Template file loading utilities
└── templates/             # HTML template files
    ├── overview.html      # Main page template
    ├── product.html       # Individual product page template
    └── productCard.html   # Product card component template

🚀 Installation

1. Clone or download the project
2. Navigate to the project directory

   cd "Node Farm"

3. Install dependencies

   npm install

💻 Usage

Development Mode (with auto-reload)

npm run dev

Production Mode

npm start

Manual Start

node index.js

Access the application:

• Open your browser and go to: http://127.0.0.1:5000
• Or use: http://localhost:5000

Navigate the application:

• 🏠 Home/Overview: / or /overview - View all products
• 📋 Product Details: /product?id=0 - View specific product (replace 0 with product ID)
• 🔌 API Access: /api - Get JSON data of all products

🔌 API Endpoints

Endpoint	Method	Description	Response Type	Status Code
/ or /overview	GET	Homepage with all products	HTML	200
/product?id={id}	GET	Individual product page	HTML	200/404
/api	GET	All products data	JSON	200
*	GET	404 Not Found page	HTML	404

🔍 Code Analysis

🏗️ Architecture Overview

The application follows a modular architecture with clear separation of concerns:

1. 🎯 Main Server (index.js): Request handling and routing
2. 📁 Data Layer (Modules/dataLoader.js): Data management
3. 🎨 Template Engine (Modules/templateEngine.js): HTML generation
4. 📄 Template Loader (Modules/templateLoader.js): Template file management

📊 Core Components

1. 🚀 Server Setup (index.js)

const server = http.createServer((req, res) => {
  const { pathname, query } = url.parse(req.url, true);
  // Route handling logic
});

Key Features:

• Uses Node.js built-in http module
• Listens on port 5000 with IP 127.0.0.1
• URL parsing with query parameter support
• Comprehensive error handling

2. 🗄️ Data Management (Modules/dataLoader.js)

const products = JSON.parse(fs.readFileSync("./data.json", "utf-8"));

Product Schema:

{
  "id": 0,
  "productName": "Fresh Avocados",
  "image": "🥑",
  "from": "Spain",
  "nutrients": "Vitamin B, Vitamin K",
  "quantity": "4 🥑",
  "price": "6.50",
  "organic": true,
  "description": "Detailed product description..."
}

3. 🎨 Template System (Modules/templateEngine.js)

Core Functions:

• createProductCard(template, product): Individual product card generation
• createProductCards(): All product cards compilation
• createOverviewTemplate(): Complete overview page assembly
• createProductTemplate(product): Individual product page generation

Template Processing:

• Uses placeholder replacement ({{placeholder}})
• Supports global replacements with regex patterns
• Dynamic content injection

4. 📄 Template Loader (Modules/templateLoader.js)

const overviewTemplate = fs.readFileSync("./templates/overview.html", "utf-8");
const productCardTemplate = fs.readFileSync(
  "./templates/productCard.html",
  "utf-8"
);
const productTemplate = fs.readFileSync("./templates/product.html", "utf-8");

Template Files:

• overview.html: Main layout with product cards container
• productCard.html: Reusable product card component
• product.html: Detailed product page layout

5. 🎨 Styling & Design

Modern CSS Features:

• 🌈 Gradient Backgrounds: Beautiful green gradients (#9be15d to #00e3ae)
• 🎭 Typography: Google Fonts (Megrim for headers, Nunito Sans for body)
• 📱 Responsive Design: Flexbox and CSS Grid layouts
• ✨ Visual Effects: Skewed elements, shadows, smooth transitions
• 🎯 Interactive Elements: Hover effects and smooth animations
• 🌿 Organic Theme: Green color scheme representing freshness

CSS Architecture:

• Embedded styles in HTML templates
• Consistent design system across all pages
• Mobile-first responsive approach

6. 📦 Product Catalog

The application showcases 5 fresh produce items:

Product	Emoji	Origin	Price	Organic	Nutrients
Fresh Avocados	🥑	Spain	€6.50	✅	Vitamin B, Vitamin K
Goat and Sheep Cheese	🧀	Portugal	€5.00	❌	Vitamin A, Calcium
Apollo Broccoli	🥦	Portugal	€5.50	✅	Vitamin C, Vitamin K
Baby Carrots	🥕	France	€3.00	✅	Vitamin A, Vitamin K
Sweet Corncobs	🌽	Germany	€2.00	❌	Vitamin C, Magnesium

🧩 Module System

📁 Modular Architecture Benefits:

• 🔄 Reusability: Components can be reused across the application
• 🛠️ Maintainability: Easy to update and debug individual modules
• 📏 Scalability: Easy to add new features and modules
• 🧪 Testability: Individual modules can be tested in isolation

🔗 Module Dependencies:

index.js
├── Modules/dataLoader.js
├── Modules/templateEngine.js
│   ├── Modules/templateLoader.js
│   └── Modules/dataLoader.js
└── Modules/templateLoader.js

📋 Module Responsibilities:

🗄️ dataLoader.js

• Loads and parses JSON data
• Provides centralized data access
• Handles data format conversion

🎨 templateEngine.js

• Template processing and rendering
• Placeholder replacement logic
• Dynamic content generation

📄 templateLoader.js

• Template file management
• Synchronous file reading
• Template caching

🛠 Technologies Used

🏗️ Core Technologies:

• Node.js: Runtime environment
• HTTP Module: Web server creation
• File System (fs): File operations
• URL Module: URL parsing and routing

🎨 Frontend Technologies:

• HTML5: Semantic markup structure
• CSS3: Modern styling and responsive design
• JavaScript: Dynamic content manipulation

📊 Data & Configuration:

• JSON: Data storage and configuration
• NPM: Package management
• Nodemon: Development server with auto-reload

🔧 Development Tools:

• Slugify: URL slug generation (available but not used in current code)
• Package.json: Project configuration and scripts

📚 Learning Objectives

This project demonstrates essential Node.js concepts:

🎯 Core Concepts:

1. 🚀 HTTP Server Creation: Building web servers from scratch
2. 📁 File System Operations: Reading files synchronously
3. 🔀 URL Routing: Handling different endpoints and query parameters
4. 🎨 Template Rendering: Dynamic HTML generation
5. 🗄️ JSON Data Handling: Working with structured data
6. ⚠️ Error Handling: Managing invalid requests and 404 errors

🏗️ Architecture Concepts:

7. 🧩 Modular Design: Code organization and separation of concerns
8. 🔄 Code Reusability: Creating reusable components
9. 📦 Module System: Node.js CommonJS modules
10. 🎭 Template Systems: Dynamic content generation

� Web Development Concepts:

11. 📱 Responsive Design: Mobile-first CSS approach
12. 🎨 Modern CSS: Gradients, transitions, and animations
13. 🔌 RESTful APIs: JSON endpoint creation
14. 🧪 Development Workflow: Scripts and automation

🔧 Development Scripts

📋 Available Scripts:

{
  "scripts": {
    "dev": "npx nodemon index.js", // Development with auto-reload
    "start": "node index.js" // Production start
  }
}

🔧 Dependencies:

{
  "dependencies": {
    "slugify": "^1.6.6" // URL slug generation
  },
  "devDependencies": {
    "nodemon": "^3.1.10" // Development server
  }
}

🎨 Design Features

🌈 Visual Design:

• 🌱 Nature-inspired: Green gradient backgrounds
• 🎭 Modern Typography: Clean, readable fonts
• 📱 Responsive Cards: Flexible product display
• ✨ Smooth Animations: Polished user experience
• 🏷️ Organic Badges: Special highlighting for organic products

🎯 User Experience:

• 🔄 Intuitive Navigation: Clear routing structure
• ⚡ Fast Loading: Efficient template rendering
• � Mobile-friendly: Responsive design
• 🎨 Consistent UI: Unified design system

🚀 Getting Started

⚡ Quick Start:

1. ✅ Prerequisites: Ensure Node.js is installed
2. 📥 Installation: Run npm install
3. 🚀 Development: Run npm run dev
4. 🌐 Access: Open http://127.0.0.1:5000
5. 🎉 Explore: Navigate through the product catalog!

🔧 Development Tips:

• Use npm run dev for development with auto-reload
• Check console for server status and errors
• Modify data.json to add/update products
• Edit templates in templates/ folder for UI changes

---

📄 License

This project is licensed under the ISC License.

👨‍💻 Author

Ahmed Esam

• GitHub: @AhmedEsam2002
• Repository: Node-Farm

---

This project is part of a Node.js learning course, demonstrating fundamental web development concepts with a focus on server-side JavaScript programming and modern web architecture.