nurmdrafi

❄ JSON Web Tokens - jwt.io - jwt.io

❄ Authentication and Authorization with JWTs in Express.js - stackabuse.com(Basic)

❄ Handling Authentication in Express.js - stackabuse.com(Basic)

❄ How to Refresh Json Web Tokens (JWT) using Axios Interceptors - dev.to

❄ Building a RESTful CRUD API with Node.js, JWT, Bcrypt, Express and MongoDB - medium.com

nurmdrafi

responsive navbar

const Navbar = () => {
  const [openMenu, setOpenMenu] = useState(false);
  return (
    <div>
      {/* mobile menu opener icon */}
      <div className="menuIcon">
        <MenuOutlined onClick={() => setOpenMenu(true)} />
      </div>

nurmdrafi

https://www.youtube.com/watch?v=7exOfIAKuWU&list=LL&index=2&t=35s

✔ // 1. using default fetch, useEffect, useState

const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
	const fetchData = async () => {
		const res = await fetch(url);

nurmdrafi

store.js

import { configureStore } from "@reduxjs/toolkit";
import postsReducer from "./reducers/postsReducer";

export const store = configureStore({
  reducer: {
    posts: postsReducer,
  },
});

nurmdrafi

ParentComponent.js

import React, { useEffect, useState } from "react";
import Highlighter from "react-highlight-words";

// Import Icons
import { SearchOutlined } from "@ant-design/icons";

// Import Components
import { Button, Input, Row, Space, Tag, Col } from "antd";

nurmdrafi

Benefits

[*] Good for SEO
[*] Super Fast
[*] Future of React

Diff

[*] Next.js provides Server Side Rendering (S.S.R)
[*] React only provides Client Side Rendering

_app vs _document

nurmdrafi

Action

import { createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

// Import API's
import { API } from "../../App.config";

// Token & Headers
const token = localStorage.getItem('token')

nurmdrafi

Introduction

1. TypeScript is a superset of JavaScript. But it doesnot add more feature in JavaScript. It just allow us to write JavaScript as a precise manner so that code get less error at runtime.

2. TypeScript is all about type safety

3. TypeScript only job is Static Checking which means it checks type on runtime and shows error while we are writing code

4. TypeScript transpile code into JavaScript

nurmdrafi

Index

• Introduction
• Create Next App
  • Why use Create Next App?
• Folder Structure
• Basic Setup
  • .env.local
  • App.config.js
• _app.tsx

nurmdrafi

Index

Centered Form

// Import Components
import { Form, Input, Button, Row, Col, Spin, Checkbox } from 'antd'

const Login () => {

    // On Submit
    const _onSubmit = (values) => {