Skip to content

README.md

Latest commit

 

History

History
154 lines (103 loc) · 3.19 KB

README.md

File metadata and controls

154 lines (103 loc) · 3.19 KB

BetterSurf Web Frontend

Next.js Version
TypeScript

📖 Table of Contents

  1. 📌 About
  2. 🚀 Features
  3. 🛠️ Prerequisites
  4. 🏁 Getting Started
  5. 📜 Scripts
  6. ⚙️ Environment Config
  7. 🎨 Styling & Fonts

📌 About

This is the BetterSurf web frontend, built on Next.js + TypeScript. It provides a sleek, responsive UI to compare internet-provider offers side-by-side, leveraging the BetterSurf backend API for data.

🚀 Features

  • ⚡ Next.js 15 with App Router & React 19
  • 🔄 Suspense + React Server Components for fast loading
  • 🗺️ Integrated Google Maps Autocomplete
  • 🌙 Gradient background
  • 🔔 Toast notifications via Sonner
  • ✅ ESLint + Prettier + TypeScript type safety

🛠️ Prerequisites

  • Node.js 18+ (LTS recommended)
  • npm 10+ or Yarn 1.22+
  • Google Maps API key (for map component)
  • Running instance of BetterSurf backend

🏁 Getting Started

Clone & Install

# Clone the repo
git clone https://github.com/jaylann/gendev-web.git
cd gendev-web

# Install dependencies
npm install
# or
yarn install

Environment Variables

Copy the example file and fill in your keys:

cp .env.local.example .env.local

Edit .env.local:

NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=YOUR_GOOGLE_MAPS_API_KEY
NEXT_PUBLIC_API_URL=http://localhost:8000

Run Locally

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser.

Build & Export

npm run build
npm run start
# or
yarn build
yarn start

📜 Scripts

Command Description
dev Runs Next.js in development mode (with HMR)
build Creates an optimized production build
start Runs the production server
lint Runs ESLint checks

⚙️ Environment Config

  • NEXT_PUBLIC_API_URL Base URL for the BetterSurf backend (e.g. http://localhost:8000).

  • NEXT_PUBLIC_GOOGLE_MAPS_API_KEY API key to load Google Maps in the comparison page.

🎨 Styling & Fonts

  • Uses Tailwind CSS for utility-first styling.

  • Global CSS in src/app/globals.css.

  • Google Fonts via next/font/google:

    • Geist (sans)
    • Geist Mono (mono)

Dark gradient background is applied at the <html> level via Tailwind classes.

Made with ❤️ by Justin Lanfermann