Skip to content

Latest commit

 

History

History
89 lines (70 loc) · 4.9 KB

README.md

File metadata and controls

89 lines (70 loc) · 4.9 KB
Raw

Next AI News

A full-stack replica of HN using Next.js and AI generated content.

Design notes

  • Uses Next.js 14 with App Router and RSC on the Node.js runtime
    • All pages are server-rendered and dynamic, with no data caching
    • All mutations are done via Server Actions
    • Streaming is used throughout to maximize speed and concurrency
  • Uses pnpm for package management
  • Uses Drizzle ORM and Zod as the data layer
  • Uses Auth.js's Next-Auth for password authentication
  • Used v0 to generate all initial UIs with Tailwind, Shadcn UI and Radix UI
  • Developed entirely and tested with the new Next.js --turbo Rust compiler
  • Uses react-highlight-words for search highlights
  • PPR (experimental) is used to precompute the shells of pages
    • When deployed, these are served statically from the edge
    • This makes TTFB faster and speeds up CSS/fonts while origin streams
  • Deployed serverlessly on Vercel's Edge Network using:

AI

Deployment

  • Make sure the Vercel project is connected to a Vercel Postgres (Neon) database
  • Optionally, for rate limiting, add a Vercel KV (Upstash) database
  • Run pnpm drizzle-kit push:pg
  • Update metadataBase in app/layout.tsx to match your target domain

Local dev

  • Run vc env pull to get a .env.local file with your db credentials.
  • Run pnpm dev to start developing
  • For DB migrations with drizzle-kit:
    • Make sure ?sslmode=required is added to the POSTGRES_URL env for dev
    • Run pnpm drizzle-kit generate:pg to generate migrations
    • Run pnpm drizzle-kit push:pg to apply them

Performance

PageSpeed report for Emulated Moto G Power with Lighthouse 11.0.0, Slow 4G Throttling:

   💩 The SEO 98 score cannot be 100 without sacrificing stylistic fidelity to the original HN navigation

Codebase notes

  • Auth is initialized in app/auth.tsx, Drizzle in app/db.tsx.
  • Shared components are in ./components (exposed as @/components)
  • Only one component was not reused from npm / shadcn (components/time-ago.tsx)
    • I couldn't find something very light that worked well with server-rendering (takes a now prop with a timestamp)
  • The following db migrations were added manually:
    • CREATE EXTENSION IF NOT EXISTS pg_trgm; as part of #13
    • USING GIN (title gin_trgm_ops); as part of #13

TODO

This project is unique in that it's a full-stack replica of HN, with quite a few features. It'd be great for the community to fill in some important gaps, however:

  • Inline comment replies
  • "Forgot password" flow
  • Voting and ranking
  • "Next" and "Prev" comment links
  • Comment toggling
  • Flagging submissions and comments
  • Improve search further
  • Comment pagination
  • More efficient comment datastructures
  • Optimistic comments with useOptimistic
  • Local storage of comment and submission drafts
  • Improve the /next implementation after login
  • Add support for passkeys
  • A basic admin panel
  • User profiles

License

MIT