This is the front-end of the coding cartel project made with next-js. Please read the project structure before you start to edit.
To run the project, you need to clone the project and run the following command:
git clone https://github.com/CodingCartel/website.git
# or
git clone [email protected]:CodingCartel/website.git
cd website
npm install
# or
yarnThen you can run the project with the following command:
npm run dev
# or
yarn startThe project have specific organisation.
The pre-commit hook is used to check the project before it is commited. the hook is checking the linting, the style guide and build.
To pre-commit, we're using the husky tool.
Pre-commit script is located in the .husky/pre-commit file.
Because sometime on linux, the script is not executed because it do not have right authorisations. There is a script scripts/prepare_husky.js that change chmod only for linux.
This script is executed at the npm install command execution.
The linting is checking the code with eslint.
The project is mostly respecting the airbnb style guide.
But without semincolons and arrow function.
Check configuration file .eslintrc.js
The formatting is checking the code with prettier. there are basics rules for the code.
singleQuote: true,
tabWidth: 2,
trailingComma: "none",
bracketSpacing: true,
jsxSingleQuote: false,
semi: false,
Make sure to install the prettier extension for your editor. You might configure your editor to auto-format the code at save.
Check configuration file .prettierrc.json
On that project we're using Scss with no styling library or framework.
The project has a style organisation. in the style folder, we have: main.scss and core folder.
all the content of styles folder is globally imported in the project.
next to a component, add a scss file with the same name as the component. Then import it in your component.
The variables are used to define the project's variables.
If you want to use global variables, add them in the styles/core/variables.scss file.
As variables, if you want to use global mixins, add them in the styles/core/mixins.scss file.
If you want to use global fonts, add them in the styles/core/fonts.scss file.
If you want to use global functions, add them in the styles/core/functions.scss file.
To respect the project styling organization, please use mixins media query that already exist in the styles/core/media_querys.scss file.
It is based on the mobile first approach.
The normalizer is used to normalize the project's styles. You might not need to update it.
It is based on that repo
There is a global styles in the styles/core/global.scss file.
If you want to update it go ahead, but take care of side effects.