Simple Vanilla Node Site

A minimalist Treehouse Profile Viewer built with vanilla Node.js. This educational web application demonstrates fundamental Node.js concepts including HTTP server creation, routing, templating, and external API integration without any external frameworks.

Features

Zero Dependencies - Built entirely with Node.js built-in modules
Custom Templating - Simple variable substitution template engine
API Integration - Fetches profile data from Treehouse's public API
Event-Driven Architecture - Uses EventEmitter for asynchronous operations
Profile Search - Search and display Treehouse user profiles
Error Handling - Graceful error display for invalid usernames

Technology Stack

Runtime: Node.js (vanilla JavaScript)
HTTP Server: Node.js built-in http module
Template Engine: Custom template rendering system
API Client: Node.js built-in https module
Frontend: HTML5, CSS3, Google Fonts
Architecture: Event-driven with EventEmitter pattern

Installation & Setup

Prerequisites

Node.js (any modern version)
Internet connection (for external API calls and CDN resources)

Installation Steps

Clone the repository:

git clone https://github.com/whiletrace/simple-vanilla-node-site.git
cd simple-vanilla-node-site

Run the application:
```
npm start
# or directly:
node server.js
```
Access the application: Open your browser to http://localhost:3000

Usage

Search for Treehouse Profiles

Navigate to the homepage at http://localhost:3000
Enter a Treehouse username in the search form
Submit the form to view the user's profile
View their avatar, badge count, and JavaScript points

Example URLs

Homepage: http://localhost:3000/
User Profile: http://localhost:3000/chalkers
Another Profile: http://localhost:3000/username

Project Structure

simple-vanilla-node-site/
├── server.js              # HTTP server initialization
├── router.js              # Route handlers for home and user routes
├── profile.js             # EventEmitter class for API integration
├── render.js              # Custom template rendering engine
├── example_profile.js     # Demo script for Profile class
├── package.json           # Project metadata (zero dependencies)
├── views/                 # HTML template components
│   ├── header.html        # HTML head, CSS styles, opening body tag
│   ├── search.html        # Search form with username input
│   ├── profile.html       # User profile display template
│   ├── error.html         # Error message template
│   └── footer.html        # Closing body and html tags
└── designs/               # Static design mockups
    ├── index.html         # Home page design reference
    ├── profile.html       # Profile page design reference
    └── error.html         # Error page design reference

Core Architecture

Server Configuration (`server.js`)

Creates HTTP server on port 3000
Routes all requests to router module
Minimal server setup with request forwarding

Routing System (`router.js`)

// Route Handlers
GET /                    # Homepage with search form
POST /                   # Process search and redirect
GET /{username}          # Display user profile

EventEmitter API Client (`profile.js`)

class Profile extends EventEmitter {
  constructor(username) {
    // Inherits from EventEmitter
    // Makes HTTPS request to Treehouse API
    // Emits: 'data', 'end', 'error' events
  }
}

Template Engine (`render.js`)

Custom templating with {{variable}} syntax
File-based template loading from views/ directory
Variable substitution for dynamic content

API Integration

Treehouse API

Endpoint: https://teamtreehouse.com/{username}.json
Method: GET
Authentication: None required (public API)
Response Format: JSON

Expected API Response

{
  "gravatar_url": "https://...",
  "profile_name": "User Name",
  "badges": [/* array of badges */],
  "points": {
    "JavaScript": 1234
  }
}

Profile Data Extraction

Avatar: gravatar_url field
Display Name: profile_name field
Badge Count: Length of badges array
JavaScript Points: points.JavaScript field

Template System

Template Files

header.html - Document structure, CSS, Google Fonts
search.html - Username search form
profile.html - User profile display with placeholders
error.html - Error message display
footer.html - Closing HTML tags

Template Variables

<!-- In profile.html -->
{{avatarUrl}}        <!-- User's Gravatar image -->
{{username}}         <!-- User's display name -->
{{badges}}           <!-- Badge count -->
{{javascriptPoints}} <!-- JavaScript skill points -->

<!-- In error.html -->
{{errorMessage}}     <!-- Error description -->

Event Flow

User Search Flow

User submits search form via POST /
Router extracts username from form data
Router redirects to GET /{username}
Profile class created with username
HTTPS request made to Treehouse API
Events emitted based on response
Template rendered with profile data or error

Event Handling

// Profile events
profile.on('data', (profileData) => {
  // Render profile template with user data
});

profile.on('error', (error) => {
  // Render error template with error message
});

External Resources

CDN Dependencies

Google Fonts: Varela Round font family
Normalize.css: CSS reset for cross-browser compatibility
Search Icon: Imgur-hosted search icon image

Browser Support

Modern browsers with CSS3 and HTML5 support
Responsive design adapts to different screen sizes
Graceful degradation for older browsers

Development

No Build Process

Direct file serving with Node.js modules
No transpilation or bundling required
Immediate deployment capability

Running Examples

# Test the Profile class directly
node example_profile.js

# Start the web server
node server.js

# Using npm script
npm start

Configuration

{
  "name": "simple_vanilla_node_site",
  "version": "1.0.0",
  "description": "app consumes an api from tree-house pulls user information",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "author": "Trace Harris",
  "license": "MIT"
}

Error Handling

Error Scenarios

Invalid Username: User not found on Treehouse
API Unavailable: Treehouse API down or unreachable
Network Issues: Connection problems
Malformed Response: Invalid JSON or missing fields

Error Display

User-friendly error messages
Consistent error page styling
Clear indication of what went wrong

Educational Value

This project demonstrates:

Pure Node.js Development - No external frameworks
HTTP Server Creation - Manual server and routing setup
Template Engines - Custom templating system implementation
API Integration - External service consumption
Event-Driven Programming - EventEmitter usage patterns
Web Fundamentals - Request/response handling

Use Cases

Learning Node.js - Understand core concepts without framework abstractions
Educational Tool - Teaching web server fundamentals
Profile Lookup - Quick Treehouse user information access
Proof of Concept - Minimal viable web application

Limitations

No Database - Stateless application with no data persistence
Basic Routing - Simple path-based routing only
Minimal CSS - Basic styling with external CDN resources
No Authentication - Public access only
Single API - Only integrates with Treehouse API

Performance

Lightweight - No external dependencies to load
Fast Startup - Minimal initialization overhead
Memory Efficient - Small memory footprint
Quick Response - Direct API passthrough with simple templating

Contributing

Fork the repository
Create a feature branch
Maintain zero-dependency approach
Test with various usernames
Submit a pull request

License

MIT License

Author

Trace Harris

A pure Node.js educational project demonstrating web server fundamentals, API integration, and custom templating without external dependencies.

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
designs		designs
views		views
README.md		README.md
example_profile.js		example_profile.js
package.json		package.json
profile.js		profile.js
render.js		render.js
router.js		router.js
server.js		server.js

whiletrace/simple-vanilla-node-site

Folders and files

Latest commit

History

Repository files navigation