The NotePad. 📔

Description

"The NotePad" is a website designed as a personal project to hone and showcase the developer's front-end web development skills. It serves as a resource hub for various front-end technologies, font pairings, color palettes, JavaScript snippets, and more. The site aims to benefit developers seeking quick references and insights into these areas.

Technologies Used

• NextJS
• Tailwind CSS

How to Run

• Check if nvm, npm, and node or whatever you're using is updated or installed.

  • updating/installing nvm

  # to install
  $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
  
  # source the nvm script depending on which shell your using
  $ source ~/.bashrc
  
  # to check version
  $ nvm -v
  

  • updating/installing node

  # to install/update node
  $ nvm install --lts
  
  # to check version/installed
  $ nvm -v
  

  • updating/installng npm

  # to update/install npm
  $ npm install -g npm@latest
  
  # to check version
  $ npm -v
  

• Clone the project into your local machine.

  # if cloning to a premade directory
  $ git clone thisisyourpath@github.com .
  
  # otherwise
  $ git clone thisisyourpath@github.com newfolder/
  

  • Install packages.

  $ npm i
  

  • Run the project.

  $ npm run dev
  

Pages Overview

• Homepage
  • Introduction to "The NotePad" and brief descriptions of available pages.
• Developer Page
  • Details about the developer and showcased projects.
• Front-End Blueprints
  • Steps to start projects using different technologies (e.g. React, Gatsby, NextJS).
• Font Pairings
  • Display various font pairings suitable for different use cases.
• Color Palettes
  • Showcased color combinations for project design inspirations.
• JavaScript Snippets
  • Collection of JavaScript-related questions and solutions for common scenarios.

---

Linting/Formatting ✨

Note

When you run 'next lint', you'd be automatically lead to installing eslint and eslint-config-next. Packages:

• eslint source
• eslint-config-next source
• eslint-config-prettier source
• prettier source
• prettier-plugin-tailwindcss source

Installation:

1. Run commands depending on your package.json.

# terminal
npm run lint

next lint

• Basically it's the same, it just depends on what command and package manager you want to run.
• This will also create a new legacy file .eslintrc.json and add configurations depending on what you have chosen on the prompt (reference).
• It will also depend on you if you want to use the legacy version or the new version for your eslint configuration file. Eslint website says that legacy is already deprecated. (new) (legacy)

2. Install prettier and prettier-plugin-tailwindcss.

# terminal
npm i -D prettier prettier-plugin-tailwindcss

Note

-D is shorthand for --save-dev.

3. Create .prettierrc.json file and add your configurations.

Sample:

{
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "trailingComma": "es5",
  "plugins": ["prettier-plugin-tailwindcss"]
}

4. Install eslint-config-prettier and update .eslintrc.json configurations.

{
  "extends": ["next/core-web-vitals", "prettier"]
}

Note

This may depend on what you have chosen in the first prompt. (reference)

This will make eslint solely focus on code quality, and prettier to handle all formatting.

Tip

It depends on you if you want to add eslint-plugin-prettier to add prettier formatting as an eslint rule or not.

🚀 kerbethecoder
📫 krby.cnts@gmail.com
📌 July 21, 2023

Happy coding! 🇵🇭