next-hackernews

Hackernews clone build with:

• TypeScript
• React
• SWR
• Next.js
• Styled Components
• Storybook
• Prettier
• ESLint
• Jest

Build Setup

Clone this project, install npm packages, and, start node server.

git clone https://github.com/s-kikuchi/next-hackernews.git
cd next-hackernews
npm install
npm run dev

Go to http://localhost:3000

Directory structure

This project follows Presentational + container components and Clean architecture

Directory	Inside
common/	UI components, functions, or configs that use commonly
features/	Directories have domain components, functions, utilities
pages/	Nextjs page routing

common

In side common directory, there are api, components, hooks, and utils directories.

Directory	Inside
api/	Functions and types for fetching data from backend
components/	Re-useful UI components
hooks/	Custom hooks
utils/	Utility functions that don't have effect and constants

Test

Tests are inside directory that related to.

Test direction

In this project, execute testing in the following 3 phases of tests.

• Unit
• Integration
• E2E

Moreover, these are the features of tests in each phase.

Test	Isolated / Integrated	Environment	Data Source
Unit	Isolated	Virtual DOM (Node)	Mock (Local)
Integration	Integrated	Virtual DOM (Node)	Mock (Local)
E2E	Integrated	Real DOM (Browser)	Response (API)

Storybook

npm run storybook

Go to http://localhost:6006

Branch management

Create a new branch that follows GitHub flow.