📄 @suman-jangili/news‑frontend

Regulatory-First Design: Contextual Ads‑Free News Portal.

Building privacy‑by‑law systems from day 1. Start with the law, end with trust.

In today's data-protection landscape, regulations like GDPR, CCPA, HIPAA, and DPDPA should form the foundation of product architecture.

A news aggregator that delivers personalized article recommendations without ever profiling users. Recommendation logic lives entirely in the browser, using a deterministic hash‑based interest vector that never leaves the client.

A privacy‑driven, profiling‑free news experience built with React 19, Next.js 16 Service‑worker cache for offline article storage Client‑side recommendation engine and TailwindCSS.

Table of Contents

• Features
• Quick Start (development)
• Production Docker Build
• Configuration
• Testing & Linting
• Contributing
• License

Features

• Ads‑free reading experience – no tracking cookies or third‑party profiling.
• Server‑side rendering (SSR) and static generation via Next.js 16.
• TailwindCSS for a modern, responsive UI.
• Simple HTTP API integration – the backend URL is injected at build time.

Quick Start (development)

# Clone the repo
git clone https://github.com/sumanjangili/regulatory-first.git
cd regulatory-first/news-frontend

# Install dependencies (deterministic)
npm ci

# Run the development server
npm run dev       # http://localhost:3000

The app automatically reloads when you edit source files.

Production Docker Build

A multi‑stage Dockerfile is provided to produce a lean runtime image.

# -------------------------------------------------
# Builder – install deps, compile the Next.js app
# -------------------------------------------------
FROM node:20-alpine AS builder
ARG UID=1001
ARG GID=1001
RUN addgroup -g ${GID} appgroup && \
    adduser -D -u ${UID} -G appgroup appuser

WORKDIR /app
COPY package.json package-lock.json ./

# Install dependencies (deterministic)
RUN npm ci               # keep if you have package-lock.json
# RUN npm install --omit=dev   # uncomment if you don’t have a lockfile

COPY . .
RUN npm run build        # creates .next, .next/static, etc.

# -------------------------------------------------
# Runtime – Next.js production server
# -------------------------------------------------
FROM node:20-alpine AS runner
WORKDIR /app

# Copy only the files needed at runtime
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package*.json ./
COPY --from=builder /app/next-env.d.ts ./

# Install only production dependencies (no dev deps)
RUN npm ci --omit=dev

# Expose the port that `next start` uses (default 3000)
EXPOSE 3000

# Pass the backend URL to the client side.
# Next.js reads any env var prefixed with NEXT_PUBLIC_ at build time.
ENV NEXT_PUBLIC_BACKEND_URL=http://regulatory_api:3000

# Start the production server
CMD ["npm", "run", "start"]

Build & Run

# Build the Docker image
docker build -t news-frontend:latest .

# Run the container (exposes port 3000)
docker run -p 3000:3000 \
  -e NEXT_PUBLIC_BACKEND_URL=http://regulatory_api:3000 \
  news-frontend:latest

The container serves the compiled Next.js app using the lightweight node runtime.

Configuration

| Variable | Description | Default | | -------- | ----------- | ------- | | NEXT_PUBLIC_BACKEND_URL | URL of the backend API (read at build time). | http://regulatory_api:3000 | | Any other NEXT_PUBLIC_* variables you add will also be embedded during the build. | | |

Testing & Linting

npm run lint          # runs ESLint across the codebase
# Add your test scripts here (e.g., jest, playwright)

Contributing

1. Fork the repository.
2. Create a feature branch (git checkout -b feat/your-feature).
3. Make your changes, run lint (npm run lint) and ensure the app still builds (npm run build).
4. Open a pull request against the main branch. Please read the CODE_OF_CONDUCT and CONTRIBUTING guidelines before contributing.

License

This project is licensed under the MIT license.

For any questions, open an issue on GitHub or contact the maintainer at [email protected].