Frontend(NextJS) Clean Architecture

ToDo

• Implement Zustand
• Https client implementation
• Implement fake repository
• Implement unit tests Jest (application, infrastructure)
• Implement styled components for shared ui elements
• Implement Playwright integration test
• Implement utilities
• Implement localstore
• How to implement useCases interfaces

Structure

Domain

- models
  - input
    - pokemon
      - pokemon.entity.ts
    - todo
      - todo.entity.ts
  - output
    - pokemon
      - pokemon.response.ts
    - todo
      - todo.response.ts
- interfaces
  - http
    - IHttp.ts
  - pokemon
    - IPokemons.ts
  - todo
    - ITodo
- repositories
  - pokemon
    - IPokemon.repository.ts
  - todo
    - ITodo.repository.ts
- use-cases
  - pokemon
    - IPokemon.use.case.ts
  - todo
    - ITodos.usecase.ts (dependency injection)
    - Todos.dto.usecase.ts
- controllers
  - pokemon
    - IPokemon.controller.ts
  - todo
    - ITodo.controller.ts
- stores
  - count
    - Icount.store.ts
  - todo
    - ITodo.store.ts
- enums
  - todo
    - ITodo.enum.ts

Application/Use Cases

- use-cases
  - pokemon
    - get-pokemons
      - getPokemon.usecase.ts
  - todo
    - add-todo
    - addTodo.usecase.ts
    - get-todos
    - getTodos.usecase.ts
    - remove-todo
    - removeTodo.usecase.ts
    - toggle-todo
    - toggleTodo.usecase.ts

Infrastructure

- repositories
  - pokemon
    - pokemon.fake.repository.ts
    - pokemon.repository.ts
  - todo
    - todo.repository.ts
- controllers
  - pokemon
    - pokemon.controller.ts
  - todo
    - todo.controller.ts
- http
  - http.ts
- components -> based on controller interface [Reference 1]
  - count
    - count.container.tsx
    - count.view.tsx
    - count.module.scss
  - pokemon
    - pokemons
      - pokemon.container.ts
      - pokemon.view.ts
      - pokemon.module.scss
  - todo
    - todo
    - todos.container.tsx
    - todos.view.tsx
    - todos.module.scss
- stores
  - count
    - count.store.ts
  - todo
    - todo.store.ts

Reference 1

References

• Principal Reference

• Todo and Container - View Reference

• Todo clean architecture typescript

• 

• Image Reference

• NextJS Jest testing

• NextJS Jest testing 2

• NextJs sum example

• NextJS configuration example

• Testing library doc

• Calculator example Jest testing

• NextJS basic setup NextJS

• Playwrigth implementation example

• Styled components example

• Styled components NextJS's example

Notes

• NextJS doesn't allow to move the pages folder out of src or / base path.
• Hydratation error is solved by this

const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])
  if (!mounted) return null