Skip to content

oozan/news-feed

Repository files navigation

news-feed

news-feed is ready Next.js application that demonstrates a multi-page internal portal UX with a public-safe demo mode.

Highlights

  • Recruiter-friendly demo mode (no private backend or Auth0 credentials required)
  • News Feed experience with seeded content
  • Message and document UI flows
  • TypeScript, Redux Toolkit + RTK Query, Cypress, Tailwind CSS

My Frontend Responsibilities (Senior Frontend Engineer)

  • Senior Frontend Engineer on a Finnish client portal; delivered in 2 months with a team of 3 (end-to-end ownership from requirements to release hardening).
  • Drove frontend technical direction: set conventions for Next.js routing, component architecture, state management, and UI composition.
  • Partnered with backend and stakeholders to align API contracts and unblock delivery; translated requirements into implementable UI work.
  • Implemented the responsive app shell (header, sidebar, mobile navigation) and reusable UI building blocks.
  • Built core product flows: News Feed (list/detail + filter UI), Messages (inbox + compose), Documents (listing + upload UX), Organization, and Profile.
  • Led the state and data layer using Redux Toolkit + RTK Query, including OpenAPI-based client generation and consistent loading/error handling.
  • Implemented multilingual UX (EN/FI) with i18next, including language persistence and runtime language synchronization.
  • Integrated authentication via NextAuth + Auth0 and designed a demo mode that runs without private credentials/infrastructure while keeping the Auth0 path intact.
  • Raised the quality bar with linting, type checks, Cypress tests, and continuous production build verification.
  • Prepared the application for public publishing: rebranded as news-feed, removed sensitive configuration, added .env.example templates, and documented setup/publish steps.

Requirements

  • Node.js 18+
  • npm 8+
  • Optional: Docker + Docker Compose

Quick Start (Recommended)

npm ci
cp .env.example .env.local
cp ci/.env.example ci/.env
cp ci/.env.production.example ci/.env.production
npm run dev

Open http://localhost:3000.

Environment Modes

1) Demo Mode (default)

  • Enabled when NEXT_PUBLIC_PORTFOLIO_DEMO=true (or unset)
  • Authentication gate is bypassed
  • News/documents demo data is served from local fixtures

2) Auth0 Mode (optional)

Set NEXT_PUBLIC_PORTFOLIO_DEMO=false and configure:

  • AUTH0_CLIENT_ID
  • AUTH0_CLIENT_SECRET
  • AUTH0_ISSUER
  • AUTH0_SECRET
  • AUTH0_CUSTOM_CLAIMS_NAMESPACE (optional, defaults to news-feed.dev)

Useful Commands

npm run dev
npm run build
npm run start
npm run lint
npm run test

Docker Commands

npm run docker:dev
npm run docker:production
npm run docker:validation

API Type Generation

npm run types:generate

Publish Checklist

  1. Keep real credentials out of source control (.env.local, ci/.env, ci/.env.production).
  2. Commit only template env files (.env.example, ci/.env.example, ci/.env.production.example).
  3. Run npm run build before publishing.
  4. Verify app title/branding appears as news-feed.
  5. Remove any temporary local artifacts (Cypress videos, .DS_Store, .next, node_modules) from commits.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages