I'm Ali! I've got 3 years of web dev experience, mainly focusing on front-end magic with ReactJS. I'm all about embracing new challenges and learning opportunities. Let's build something awesome together!
My Tech Stacks
Next.js
Tailwind CSS
Framer Motion
Blogs
Eslint Setup
Setting Up Eslint, Prettier, Husky, Lintstage and commitlint for Nextjs Project
Committing your codes to your GitHub sometimes will not be acceptable by Vercel or a platform that you are hosting the website due to some errors that exists inside your code, so you want your project to be checked with everything including types, styles of the codes, any errors or etc.… before committing to your repository (GitHub).
Eslint, Prettier, Husky, Lintstage are the best option for checking before committing.
Commitlint is a package where you can write a good and understandable commit message. Ex: “feat(home-page): message”
So this blog might help you to have a good and stable project while working with your teams.
And one more thing, imagine that you are working with a team, so everyone is not going to write the code in your way, so the method that I am going to tell you, is going to save you from various code writing, so stay with me and learn something cool if your project is open source or not, does not matter.
Why I choose this method?
When I was working for a client project, I did not have access to vercel to check what the problem is with my code, so I had to make another vercel project and push the codes to 2 several project to see the errors.
I knew that there is an easier way to do this but I had a bad experience with it because every time I installed it, it was not working as expected, so the problem forced me to go and learn the eslint setup, now It is so easy to fix any errors before committing to production.
What are they?
Eslint
In my current knowledge, eslint is a technology that is going to check if there are any errors in your code, if there is a single error, then you are not able to commit anything unless you fix that error.
Prettier
If you are looking to style your code writing and to have a readable and clean code, then prettier is the best option for that.
If you are working with a team, then I am sure that all of you are going to write the codes in different ways, so prettier is going to handle that so that you are going to have the same code written.
Husky
Eslint and prettier are nothing without husky, because this is husky that is going to run Eslint and prettier when committing, we will learn it more when installing huksy.
Lintstage
Before committing, you will run git add . command for sending your changes to stage, this package will help you to run eslint, prettier … only on those files that are on stage.
This will save you lots of time, without this you need to run eslint, … for your whole files so it takes time.
We will see why it is important when installing it.
Commitlint
It is not going to do anything to your codes, this is a bonus tip for you, so stay with me, you will love it.
How to set them up?
Install Nextjs
by using your faviourte package manager, follow this step:
```bash title="Terminal"
npx create-next-app@latest <project-name>
```
you will get this question to set up your Next.js project:
```bash
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
```
Install Eslint
Run the following command:
```bash title="Terminal"
npx eslint --init
```
You will be asked several questions, you can choose any options (options that you want your project to looks like).
```bash
? How would you like to use ESLint? ...
To check syntax only
To check syntax and find problems
> To check syntax, find problems, and enforce code style
√ How would you like to use ESLint? · style
? What type of modules does your project use? ...
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
? Which framework does your project use? ...
> React
Vue.js
None of these
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
? Does your project use TypeScript? » No / Yes
```
> If you are using TypeScript, choose Option "Yes"
```bash
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
? Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection)
> Browser
Node
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
? How would you like to define a style for your project? ...
> Use a popular style guide
Answer questions about your style
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
? Which style guide do you want to follow? ...
> Standard: https://github.com/standard/eslint-config-standard-with-typescript
XO: https://github.com/xojs/eslint-config-xo-typescript
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard-with-typescript
? What format do you want your config file to be in? ...
> JavaScript
YAML
JSON
```
You are done, now You need to give permission and choose your package manager to install the them.
You will see a new file after installing:
```bash
└── app
└── node_modules
└── public
└── .eslint.js
└── .eslint.json
└── .gitignore
└── ...
```
You need to update something in that file:
```js .eslint.js
module.exports = {
// Other codes...
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
},
plugins: ["react"],
rules: {},
settings: {
react: {
version: "detect",
},
},
};
```
Installing Prettier
```bash title="Terminal"
npm install prettier prettier-plugin-tailwindcss eslint-config-prettier
```
and then create a new file:
```bash
└── app
└── node_modules
└── public
└── .eslint.js
└── .eslint.json
└── .gitignore
└── .prettierrc
└── ...
```
Copy and paste the following in that file:
```json title=".prettierrc"
{
"plugins": ["prettier-plugin-tailwindcss"],
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": false,
"bracketSpacing": true,
"bracketSameLine": false,
"singleAttributePerLine": false
}
```
> Remove the plugins if you are not using Tailwind CSS.
You need to add 2 new lines in .eslint.js file:
```js title=".eslint.js"
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
"standard-with-typescript",
"plugin:react/recommended",
"plugin:@next/next/recommended",
"prettier",
],
// Other codes...
};
```
Husky
```bash title="Terminal"
npx husky-init
```
New folder will be add:
```bash
└── .husky
├── _
└── pre-commit
└── app
└── node_modules
└── public
└── ...
```
There will be a devDependencies which will be added after running "npx husky-init", you need to install by running:
```bash title="Terminal"
npm install
```
Let's keep installing other tools, we will come back to the husky later...
Lint-staged
As we talked about it, it is going to test those codes that are staged, not the whole codes. imagine you are having a massive codebase, and you want to test all your code before committing, so it will take time which we don't want, right?
```bash title="Terminal"
npm install lint-staged
```
after that you need to make a folder, it is not going to create one for you:
```bash
└── .husky
├── _
└── pre-commit
└── app
└── node_modules
└── public
└── .lintstagedrc
└── ...
```
> Make sure that the spell of each files and folders must be same.
Add the code below in the file:
```json title=".lintstagedrc"
{
"*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix", "eslint"]
}
```
> Basically, it is going to run whatever we add there before committing.
Now let's go back to Husky to add something:
```bash title="pre-commit"
!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
- npm test
npx lint-staged --concurrent false
```
Now, everything must be working fine.
Let's go and setup the last part which is...
Committlint
If you want your commit messages to look professional or sounds like an expreince developer, install it:
```bash title="Terminal"
npm install --save-dev @commitlint/cli @commitlint/config-conventional
```
Make a file:
```bash
└── .husky
├── _
└── pre-commit
└── app
└── node_modules
└── public
└── .lintstagedrc
└── commitlint.config.js
└── ...
```
Add the following code:
```js title="commitlint.config.js"
const Configuration = {
extends: ["@commitlint/config-conventional"],
roles: {},
};
module.exports = Configuration;
```
You need to make another file in the Husky folder:
```bash
└── .husky
├── _
├── commit-msg
└── pre-commit
└── app
└── node_modules
└── public
└── .lintstagedrc
└── commitlint.config.js
└── ...
```
Add the following code:
```bash title="commit-msg"
!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no -- commitlint --edit
```
That is all you need to do to set up those tools that are really going to help if you are collaborating or for writing a clean code.
I am very happy that was able to write a blog that help others to setup these things easily, It was so hard and confusing for me back then but now here you go, you can use it :)
PeaceMaking Website
How do I make a Website?
I see lots of developers start coding straightforwardly without having any designs or plans before coding it.
If I don’t make any designs and don’t build a website step by step, I would get confused and I would not know what I’m doing, and easily it’ll overwhelm me.
If I read this blog, I’ll know how to make a website step by step without getting any confusion.
Let's build a website step by step.
and the first step is...
Think about the design
If I want to start coding and I don’t know what I should make or design, I need to think beforehand about the design I want to make.
I should put most of my time into thinking about designs, like:
- What should Navbar look like?
- What should Header look like?
- What should Footer look like?
- and …
When I am done thinking, I should go and do…
Design it
That’s right, I should design it so that I know what I am doing and how my website is going to look.
There are a few applications that I can use for designing, e.g.
I am going to make my portfolio. let’s make it step by step.
I will use Figma for designing it, and it looks like the image below:
Thinking while designing
When I am designing the website, I have to think about how to code it, and also I have to make the code in my mind and ask myself “Will I be able to do it or not?”
If Yes, then I have to continue my designing, If not, then I have to change and design it in a way that I can code it.
Ex: How should I think about code when designing it?
> “There should be an h1 at the top, and there have to be 2 divs, and I have to use a grid-box in this situation, and inside the first div, there have to be 3 buttons and inside another div, there has to be an image, and other information related to what content is and …" - It is easy to code, let's continue my designing -
Make everything ready
Before jumping to code, I need to make all the files and folders ready for the project and download all the packages.
Let’s make it clear:
- Make all the files, folders, and assets
- Download all the packages
- Add fonts
- Store the colors in the CSS file that I’ll use later
Make a Repo (optional)
I have to save my codes somewhere that I can access very easily.
GitHub is the best place to do so.
If you don’t know anything about GitHub, follow one of these tutorials:
Make an issue (optional)
Why should I make an issue?
Issues are for collaboration and assign to someone…
But I can do one for myself, and write all the tasks that I have to make them one by one.
I can add task lists, and whenever I’m done with the task I’m going to check the mark so that I can go and continue making other sections.
Start Coding
Now, I can start making the website.
Conclusion
The benefits of following these steps:
- I know what to do
- I know how to make it
- I know about colors
- I know how to make it responsive
- I know it won’t overwhelm me
- And many more…
Summary
Projects
Challenges
CSS Animation
CSS Animation
You can check all the codes [here](https://github.com/AliReza1083/Portfolio/tree/main/src/preview/css).Mastering Framer Motion
Mastering Framer Motion
I really like to learn new things from others, especially when it comes to animation, I have to learn it. I don't care how much the course costs, I will buy it any way.
> recently I bought two courses which cost over $100; both courses will teach me how to animate with SVG or a simple element. :)
You might saw some of my works that I mainly used `framer-motion` to animate things. before starting the challenge, I did not know too much about framer motion; I thought I know it but while making amazing projects in this challenge, I found out that there are so many things that we have to know to improve our skills.
Let me take you to very first day that I joined a course that changed my animation skills.
I am working for a client. the website needed a few animations that I had to build. They sent me the following message:
Now you know how much I love to learn things, that is why I pay for courses.
These are some of my works:
<FramerMotionWorks />
The course is from [Emil Kowalski](https://x.com/emilkowalski_), the course is so amazing that I am willing to help others in his community which he just started it. :)
You can follow me on my new X page where I will share my works: [@alisamadi\_\_](https://x.com/alisamadi__); You can also check the source code [here](https://github.com/AliReza1083/Portfolio/tree/main/src/preview/framer-motion).
Hire me as a Front End Developer
I'm a passionate Front End Developer with expertise in building dynamic and responsive web applications using modern technologies like React, Next.js, and Tailwind CSS. Let's collaborate to bring your ideas to life!