Objective¶

• Ensuring standard project structure.
• Organized folder structure.
• Tailwind project-specific configuration (screen size, font size).
• Implementing localization.
• Implementing themes (dark/light mode).

Folder Structure¶

• Implementing a standard, easy-to-navigate folder structure.

Resource Links¶

• Design Reference: Design in Figma

Other Implementations¶

• Prettier and ESLint implementation for code formatting and standard maintenance.
• Redux store for state management.
• React Hook Form and Zod for form management.
• RTL Jest and Cypress for unit and end-to-end (e2e) testing.
• Implement Husky for pre-commit checks.
• Commitlint for enforcing strict commit standards.

Design Elements¶

• Implementing layout respecting side ad space.
• Creating Section and FullWidthContainer components for perfect responsiveness.

Scope¶

In Scope¶

• Develop the components and configurations using Next.js.

Success Criteria¶

The feature will be considered successful if:

• The folder structure is organized and easy to navigate.
• Tailwind configurations are applied project-wide.
• Localization and theming (dark/light mode) are functional.
• Code formatting and linting are enforced across the project.

Tasks Checklist¶

• Setup and configure ESLint and Prettier.
• Implement Redux store for state management.
• Add form management using React Hook Form and Zod.
• Set up unit and e2e testing with RTL Jest and Cypress.
• Configure Husky for pre-commit checks.
• Enforce commit standards using Commitlint.

Timeline¶

• Estimated implementation time: 4 days.

GitHub Issue Link¶

• GitHub Issue #20