Repository files navigation

A starter repo for getting a NextJS project up and running quickly

In order to start the development server, run the following commands:

npm cinpm run dev

Then navigate tohttps://localhost:17100.

Commit messages should use theConventional Commit format.commitlint has been installed to validate this usage. This means that all commits should be prefixed appropriately with a tag denoting the kind of code being committed.

• feat: A feature, or part of a feature
• fix: A bug fix
• style: A visual or stylistic change only
• chore: An operational task, such as routine maintenance, version control related operations, dependencies, etc.
• refactor: A change to the way the code is implemented, without materially changing the feature
• perf: A change that is made primarily to improve performance
• test: Any changes required to run a specific test or try out a behavior for the purposes of testing
• cleanup: Markup and syntactic cleanup that doesn't affect the code output
• docs: Documentation-related changes
• content: Changes to the project's content, such as copy or media

The format is enforced using commitlint and Husky, which will prevent commits that don't follow the conventional commits standard.

Examples of valid commit messages:

• feat: add user authentication
• fix: resolve issue with form submission
• docs: update README with commitlint information

ESLint is configured to lint the following:

• Next
• Typescript
• TSDoc comments

If using VS Code, make sure to install theESLint extension

To lint outside of the development flow, runnpm run lint

• Husky is used to perform linting before code can be committed
• commitlint is used to enforce the conventional commit message format

1. All file names will be inkebab-case
2. All component names on import will bePascalCase
3. The grid used is a flexbox style system calledGridlex, its documentation is also available as areadme in this repo
4. Color name variables inSCSS are obtained fromthis resource

• @/app - TheAppRouter is used to handle navigation
• SCSS modules are used for component, page and layout styling..module.scss files should be placed in the same directory as the component/page/layout that it's related to. Example of directory structure to use:

components  button.tsx  button.module.scss  modal.tsx  modal.module.scssOR even better:components  button    button.tsx    button.module.scss  modal    modal.tsx    modal.module.scss

• @/assets directory contains:

  • Fonts (imported in settings.scss)
  • Global SCSS files
    • Editable - files that could be edited throughout development
      • global.scss: Defines core styling elements including typography, body styles, and general element styles that apply throughout the application.
      • settings.scss: Defines fundamental project settings like grid width, font settings, and core variables that are used throughout the styling system.
      • utilities.scss: Houses utility functions, mixins, and variables for common styling tasks like shadows, typography, and color management.
      • x-browser.scss: Contains cross-browser compatibility fixes and workarounds for consistent styling across different browsers.
    • Core - these files should not be edited unless absolutely necessary
      • responsive.scss: Contains breakpoint definitions and media query mixins for handling responsive design across different screen sizes.
      • layout-grid.scss: Provides grid-based layout utilities and classes for structuring the application's layout system.
      • reset.scss: Provides CSS reset rules to normalize browser default styles and ensure consistent rendering across different browsers.
      • normalize.scss: Implements modern CSS normalization to make browsers render elements more consistently with modern standards.

• @/components contains components

• @/public contains servable assets

• @/services contains modules that offer specific functionality, such as authentication

• @/lib contains general, abstract components and utility functions for use throughout the app