Setting Up Your Next Project

Looking for a guide to start your project setup? You found a right place. This blog will give you an basic idea for setting up your project and this series will help you as a beginner. I am using next but this can apply for any framework as well as vanilla.js

Prerequisite

-node.js
-npm
-HTML
-CSS

Lets start ...

1. Creating next project

npx create-next-app app-name

For beginners we can use ESlint in the options .

Project structure

lets understand project structure of the current project and update it to be more suitable structure.
How it looks now :

Following steps would be followed:

1. Removing the api folder from pages

2. Create component folder

3. Create an api folder in rood directory

4. Create an interceptor.js file and Endpoints folder

Now it looks like this

2. Working on CSS

lets clear the entire global CSS ...
Now starting fresh

CSS reset

  *{
    margin:0;
    padding:0;
    box-sizing: border-box;
   }

This reset the CSS padding and removes unnecessary padding, margin that is automatically added to your HTML components.

Root Selector

:root{
   --white:#fff,
   --black:#000,

}

The :root selector matches the document's root element. We can
declare our variable here , basically we can describe font
color that are repetitively used in the web app.

Body

body {
  background: var(--cream);
  font-family: "Playfair Display", "sans-serif";

}

The css declarations in this part are applied through out the the web app ,we can provide with background color for out website
font-size, font-family etc can be described here.