HikeSpace

HikeSpace is a full-stack social app, written in TypeScript/TSX and made with React, Node and Express, made for sharing hiking routes, photos, and trail stories.

Users can create route-based posts, view hiking paths on interactive maps, and explore content from other hikers in a feed-style interface.

Live Project

• Frontend: https://hikespace.vercel.app/
• Backend: https://hikespace-production.up.railway.app
• API docs: https://hikespace-production.up.railway.app/docs

Core Features

• User authentication (email/password via Better Auth).
• Post creation and management (create/read/update/delete).
• Route-based posts with geospatial trail data (LineString, EPSG:4326).
• Interactive map rendering for posts and route previewing.
• Image attachments linked to posts.
• Social interactions:
  • Likes
  • Follows
  • Participation tagging
• User profile/content views and feed pages.

Tech Stack

Frontend

• React 19 + TypeScript
• Vite 7
• React Router 7
• SWR (data fetching/caching)
• Tailwind CSS 4 + shadcn/base-ui components
• React Leaflet + Leaflet
• Sonner + Lucide React

Backend

• Node.js + Express 5 + TypeScript
• PostgreSQL
• Drizzle ORM + Drizzle Kit (migrations/generation)
• Better Auth + Drizzle adapter
• Zod + zod-openapi + Swagger UI
• Multer (multipart HTTP form uploads)
• AWS SDK S3 client/presigner (S3-compatible storage integration)
• Pino + pino-http (structured logging)

DevOps / Hosting

• Frontend deployed on Vercel
• Backend deployed on Railway

Project Structure

hikespace/
  frontend/   # React client app
  backend/    # Node/Express API + DB layer

Quick Start

Run all services at once from the project root:

npm run dev

This starts the database, backend, frontend, and Drizzle Studio in parallel via mprocs (no install needed).

Local Setup

Prerequisites

• Node.js 20+
• npm
• PostgreSQL instance

1) Backend

cd backend
npm install
cp .env.example .env

Set required values in .env:

• DATABASE_URL
• BETTER_AUTH_SECRET
• BETTER_AUTH_URL
• SWAGGER_URL
• BACK_BLAZE_KEY
• BACK_BLAZE_KEY_ID
• BACK_BLAZE_BUCKET_URL
• BACK_BLAZE_BUCKET_NAME

Run migrations and start dev server:

npm run migrate
npm run dev

Backend runs on http://localhost:3000 by default.

2) Frontend

cd frontend
npm install

Create .env in frontend/:

API_BASE_URL=http://localhost:3000

Start frontend:

npm run dev

Useful Scripts

Backend

• npm run dev - start API in watch mode
• npm run build - compile TypeScript
• npm run generate - generate Drizzle migration files
• npm run migrate - apply database migrations
• npm run type-check - run TypeScript type checks

Frontend

• npm run dev - start Vite dev server
• npm run build - build production assets
• npm run lint - run ESLint
• npm run preview - preview production build

API Overview

Main route groups:

• /api/auth/* (auth handler)

• /users (CRUD on user accounts)

• /posts (CRUD on posts)

• /participations (representations for multiple users per post)

• /images (creating and deleting images on DB and CDN backend)

• /likes (creating likes from a user to a post)

• /follows (creating following records between users)

OpenAPI spec endpoint: /openapi.json