Skip to content

Nextjs Template with Tailwind, Storybook, Jest and Jotai

Notifications You must be signed in to change notification settings

Zemarite/next-tail-story-sass

Repository files navigation

project-root/
|-- .storybook/
|   |-- main.ts
|   |-- preview.ts
|-- app/
|   |-- (authenicated)
|   |  |-- page.tsx
|   |  |-- layout.tsx
|   |  |-- global.scss
|   |-- (public)
|      |-- page.tsx
|      |-- layout.tsx
|      |-- global.scss
|   |-- page.tsx
|   |-- layout.tsx
|   |-- global.scss
|-- components/
|   |-- common/
|   |   |-- Layout/
|   |       |-- Header
|   |       |   |-- Header.tsx
|   |       |   |-- Header.module.scss
|   |       |   |-- Header.stories.tsx
|   |       |   |-- Header.test.tsx
|   |       |-- Footer
|   |           |-- Footer.tsx
|   |           |-- Footer.module.scss
|   |           |-- Footer.stories.tsx
|   |           |-- Footer.test.tsx
|   |-- features/
|       |-- Feature1Component
|           |-- Feature1Component.tsx
|           |-- Feature1Component.module.scss
|           |-- Feature1Component.stories.tsx
|           |-- Feature1Component.test.tsx
|-- clean-architecture/
|   |-- application/
|   |   |-- utils/
|   |       |-- helperFunction1.ts
|   |       |-- helperFunction2.ts
|   |   |-- useCases
|   |       |-- useCase1.ts
|   |       |-- useCase2.ts
|   |-- domain/
|   |   |-- entity1.ts
|   |   |-- entity2.ts
|   |-- infrastructure/
|       |-- api/
|       |   |-- swrConfig.ts
|       |-- repository/
|       |   |-- entity1Repository.ts
|       |   |-- entity2Repository.ts
|       |-- state/
|           |-- jotaiConfig.ts
|-- public/
|-- styles/
|-- jest.config.js
|-- tsconfig.json

Explanation of the directories:

  • components: Reusable UI components. Common components can be shared across different features.

  • app: Next.js pages. Each page file here corresponds to a route in your application.

  • clean-architecture/application: Contains use cases or application-specific logic. It interacts with the domain layer.

  • clean-architecture/domain: Represents the domain/business logic of your application. Includes entities and repositories.

  • clean-architecture/infrastructure: Deals with external services and configurations. In this case, it includes API configurations using SWR and state management configurations using Jotai.

  • application/utils: General utility functions that can be used across the application.

  • public: Static assets like images, fonts, etc.

  • styles: CSS or styling related files.