ExploreNaija

A modern travel inspiration website showcasing Nigeria's top must-visit places with an Express backend API integrated with the Unsplash API for high-quality tourist attraction images.

Features

• Top 10 Must-Visit Places — Browse attractions with images, descriptions, and ratings.
• Search — Find places by name, location, or description.
• Contact & Suggestions — Submit contact messages and place suggestions via forms.
• Theme Toggle — Light and dark mode support.
• Responsive Design — Mobile-friendly layout.
• Unsplash Integration — Fetches real images from Unsplash API for attractions and caches them locally.

Prerequisites

• Node.js (v14+)
• npm
• Unsplash API key (free; required to fetch attraction images)

Setup

1. Get an Unsplash API Key

1. Go to Unsplash Developers
2. Sign up or log in to your Unsplash account
3. Create a new application
4. Copy your Access Key (do NOT expose this key to the frontend or commit it)

2. Configure Environment Variables

1. Copy .env.example to .env:

cp .env.example .env

2. Edit .env and add your Unsplash Access Key:

UNSPLASH_ACCESS_KEY=YOUR_UNSPLASH_ACCESS_KEY_HERE

Important: Do NOT commit .env to version control. It is listed in .gitignore.

3. Install and Run

Install dependencies:

npm install

Start the development server (with auto-reload):

npm run dev

Or start the production server:

npm start

The server will:

• Load your UNSPLASH_ACCESS_KEY from .env
• Initialize the Unsplash API client (backend-only; key is never exposed to frontend)
• Fetch images for each attraction using the Unsplash REST API
• Save images locally to Public/images/ for caching
• Generate SVG placeholders as fallbacks if image fetch fails

Open in browser:

http://localhost:3000

Image Fetching Process

1. Startup: Server runs ensureAttractionImages() for each attraction in data/attractions.json
2. Unsplash API Search: Uses authenticated Unsplash API to search for relevant images (e.g., "Olumo Rock Abeokuta Nigeria")
3. Download & Cache: Downloads the image to Public/images/ and updates data/attractions.json to point to the local file
4. Fallback: If Unsplash API fails or returns no results, generates a colorful SVG placeholder
5. Reuse: Subsequent server restarts skip images that already exist locally

API Endpoints

GET /api/attractions

Returns a JSON array of all attractions with image paths, descriptions, and ratings.

Example response:

[
  {
    "id": "...",
    "name": "Olumo Rock",
    "location": "Abeokuta, Ogun",
    "description": "Historic granite rock with panoramic views...",
    "image": "/images/olumo.jpg",
    "rating": 4.6
  },
  ...
]

POST /api/contact

Submit a contact message.
Required fields: email, message
Optional fields: name, subject

POST /api/suggestions

Suggest a new place.
Required fields: placeName, location, suggestion
Optional fields: name, email

POST /api/admin/add-attraction (Development)

Add an attraction programmatically.
Accepts: name, location, description, image, rating

Project Structure

ExploreNaija/
├── Public/
│   ├── index.html        (Homepage with Top 10)
│   ├── about.html
│   ├── contact.html
│   ├── more.html
│   ├── search.html
│   ├── suggestions.html
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── main.js
│   └── images/           (Downloaded & cached images)
├── data/
│   ├── attractions.json  (Attraction data with image paths)
│   ├── contacts.json     (Submitted contact forms)
│   └── suggestions.json  (Place suggestions)
├── server.js             (Express server & API)
├── package.json
├── .env.example          (Template for environment variables)
├── .gitignore
└── README.md

Environment Variables

• UNSPLASH_ACCESS_KEY — Required. Your Unsplash API access key. Used only on the backend to authenticate Unsplash API requests. Never exposed to the frontend.

Security & Best Practices

• ✅ API key stored in .env (backend-only)
• ✅ API key never sent to frontend
• ✅ Images cached locally after first fetch
• ✅ .env file is in .gitignore and won't be committed
• ✅ Unsplash API respects rate limits; ensure you're within free tier usage

Troubleshooting

Images are not downloading

1. Check your API key: Verify UNSPLASH_ACCESS_KEY is correct in .env
2. Check internet connection: Server needs outbound HTTPS access to Unsplash
3. Check rate limits: Free Unsplash tier has 50 requests/hour. If you exceed this, wait an hour and try again
4. Check server logs: Look for error messages in the console when the server starts

SVG placeholders appearing instead of photos

This is normal if:

• Unsplash API key is missing or invalid
• Unsplash API is down or unreachable
• Rate limit exceeded

SVG placeholders ensure the site always displays visuals.

How to clear cached images and re-fetch

Delete the Public/images/ folder (or specific .jpg files), then restart the server:

rm -r Public/images/*.jpg
npm run dev

Notes

• The Unsplash API is free and requires no credit card for the free tier
• Backend-only integration ensures your API key is never exposed to users
• Images are cached locally to minimize API calls and speed up server restarts
• For production, monitor your Unsplash API usage in your developer dashboard

License

MIT