## A little background

If you have been coding for a while, you know the importance of environment variables and the role it plays, and also the pain of figuring out a bug which was caused just because a damn env variable wasn’t set in your project, lol!

Earlier this year, I worked at an product based startup as a Full stack developer intern. As the project grew, the number of env variables also grew. And, everybody was working on separate features on separate branches, so we had no idea if someone introduced some new env variable in their branch which later got merged into the main branch. This created problems when I tried to deploy my branches, I had know idea that a new env var has been added to the the project.

Then, later I got introduced to T3 stack and it had a brilliant solution for adding type safety to env variables. I didn’t even know such a solution even existed. It’s always feels good to learn something new when you least expect it. T3 stack uses `zod` and **`@t3-oss/env-nextjs`** package to add type safety to your applications which I liked very much. After that, I made a commitment to always type-safe my env variables no matter what.

If you’re starting a new project, or already working in a team, I’d highly recommend you to please add type safety to your envs. Adding just this will save you your efforts for figuring out problems in your codebase.

Here’ how you can add it to your project. It’s fairly simple.

## What is zod?

Zod is a lightweight, fast, schema declaration and validation library. A schema can be anything from a simple string, number to complex object type.

### Basic usage

```ts
import {z} from 'zod';

const myBoolean = z.boolean();

myBoolean.parse('true'); // throws error
myBoolean.parse(true) // valid

```

### Creating a nested object schema


```ts
import { z } from 'zod';

const userSchema = z.object({
	name: z.string(),
	age: z.number(),
	address: z.object({
		house_no: z.string(),
		locality: z.string(),
		city: z.string(),
		state: z.string(),
	})
});
```

You can create a simple object schema or create nested objects schema.

## What is t3-oss/env-nextjs?

It is simply a package which will help us add type safety to env variables

## Let’s create type-safe env variables

Create a `env.js` file at the root of your project.

```ts
import {createEnv} from "@t3-oss/env-nextjs"; import {z} from "zod";

export const env = createEnv({
  /*
   * Serverside Environment variables, not available on the client.
   * Will throw if you access these variables on the client.
   */
  server: {
    DB_URI: z.string().url(),
  },
  /*
   * Environment variables available on the client (and server).
   *
   * You'll get type errors if these are not prefixed with NEXT_PUBLIC_.
   */
  client: {
    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
  },
  /*
   * Due to how Next.js bundles environment variables on Edge and Client,
   * we need to manually destructure them to make sure all are included in bundle.
   *
   * You'll get type errors if not all variables from `server` & `client` are included here.
   */
  runtimeEnv: {
    DB_URI: process.env.DATABASE_URL,
    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
      process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
  },
});
```

## Usage

```ts
import {env} from '@/env';

const CLERK_PUBLISHABLE_KEY = env.NEXT_PUBLISHABLE_KEY;

```

If you hover your cursor above `NEXT_PUBLISHABLE_KEY`, you can see that that value is typed as string, that means our env variables are typed now.

We’ve added type safe env variables, but this will not run on every build time. we have to import our newly created file into our `next.config.js` file. You can use `unjs/jiti` package for that.

First, install the jiti pacakge from npm.

```ts
import { fileURLToPath } from "node:url";
import createJiti from "jiti";
const jiti = createJiti(fileURLToPath(import.meta.url));

jiti("./app/env");
```

When working with `import.meta.url`, it provides the URL of the file you are currently working in. However, it includes a `file:///` prefix, which you might not want. To remove that prefix, you can use the `fileURLToPath` function from the `node:url` module.

For example:

```ts
import {fileURLToPath} from 'node:url';

// Convert the file URL to a path
const filename = fileURLToPath(import.meta.url);

```

Now, if you do not have the required env variables, you will see an error like this -

![image.png](https://utfs.io/f/4HrWTRZRvKfTbZ9E2wq9SbO105WNdGp2Eg6novRlf4I3Tixk)

## How to add type-safety to env variables in Node.js Projects?

```ts
import dotenv from "dotenv";
import { z } from "zod";

dotenv.config();

const schema = z.object({
  MONGO_URI: z.string(),
  PORT: z.coerce.number(),
  JWT_SECRET: z.string(),
  NODE_ENV: z
    .enum(["development", "production", "test"])
    .default("development"),
});

const parsed = schema.safeParse(process.env);

if (!parsed.success) {
  console.error(
    "❌ Invalid environment variables:",
    JSON.stringify(parsed.error.format(), null, 4)
  );
  process.exit(1);
}

export default parsed.data;

```

In Node.js projects we're going to be simply creating a zod schema and parsing it against our `process.env` in order to check whether all the env variables are set or not.

### Usage

```ts
import express from "express";
import env from "./env";

const app = express();
const PORT = env.PORT || 5000; // PORT is type safe here....

app.listen(PORT, () => {
console.log("Connected to server on PORT ${PORT}");
connectDB();
});

```

That’s how you add type safety to your env variables. I hope you learnt something new in this tutorial.

**Happy Coding!! 👋**


A little background   If you have been coding for a while, you know the importance of...

Why you should always add type safety to your environment variables?

Shaan Alam

---
series: Building doxshare
---

Greetings fellow programmers,
It's been an amazing journey since I started this project called "doxshare".  I've been building for almost 2 weeks now. I thought I could complete the MVP in a week or so, but I've been busy lately.
## A look back
My vision is to create something like [pastebin](pastebin) but better. I wanted to create a pastebin alternative which lets you create and share Notion like documents. I am using [T3 stack](https://create.t3.gg/) for this project since it's everything I needed combined. 
## Milestones achieved
### User friendly and beautiful UI
I've chosen [shadcn/ui](https://ui.shadcn.com/) to style my app. As per the docs, it's not a component library but it rather provides beautiful and customizable copy-paste components which you can use in your applications. It's built upon [radix-ui](https://www.radix-ui.com/) and tailwind. It also provides features such as dark mode, themes etc.

![shadcn-ui](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/natd9i918hv10dflrgl4.png)


### Core functionalities
I've created the basic and important functionalities like authenticating the user, creating document, sharing document, document expiration. And many more functionalities are still left to be made which I'm thinking to complete as soon as possible.


![doxshare](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odrafyd3tc57f0i9huln.png)


### Dashboard
I've created a dasboard with a data-table in it where a user can see all the documents created.

![dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t1n0xd7c1516rwyeasi.png)


## Future Endeavors
### Document privacy 🔐
I am planning to be able to password protect the documents when user needs it. It's not mandatory but the user has the option to password protect it in-case if he wants.
### Revive Expired documents 🧬
I want to be able to give the user ability to regenerate the shareable link of the expired documents, so that they could be shared again.
### AI completion 🤖
WIth [novel](https://novel.sh) AI autocompletion feature, I'm planning to include AI feature into the app.
### Collaborative Environment 👩‍💻
I am also planning to create a collaborative environment where multiple users can simultaneously edit the documents.

## Conclusion
The success of "doxshare" is a result of the support from the community. I invite you to follow the GitHub repository, contribute code, report issues, or simply spread the word. 

If you liked the idea for this project, feel free to give the [repo](https://github.com/shaan-alam/doxshare) a ⭐ 

Stay tuned for more updates and exciting announcements. Let's redefine collaboration, one document at a time!

Thank you for being part of the **doxshare** community.
## Follow me online
X - [https://twitter.com/shaancodes](https://twitter.com/shaancodes)
Instagram - [https://instagram.com/shaancodes](https://twitter.com/shaancodes)
GitHub - [https://github.com/shaan-alam](https://github.com/shaan-alam)



Greetings fellow programmers, It's been an amazing journey since I started this project called...

Building doxshare[0]: The beginning

![Introducing Zettel](https://camo.githubusercontent.com/8a3d34dfde18d9b128ff826ad4a97fa393d95c2a0e190bd250ed04ebe93ce7a5/68747470733a2f2f666972656261736573746f726167652e676f6f676c65617069732e636f6d2f76302f622f7a657474656c2d62323030342e61707073706f742e636f6d2f6f2f696d6167657325324661323765633934372d353033352d343531392d396665632d3233313661386363336562322e6a70673f616c743d6d6564696126746f6b656e3d62656336643465352d623537372d343266372d616433372d343030386636343965323531)

## What is Zettel? 😍

This is a good starting point to introduce Zettel. So, zettel is basically a german word for **A brief note** in english. It is a markdown based note-taking App which I created for myself where I could take notes easily and all the notes will be easily available to me. I hear you saying **“But you could have used Notion or obsidian, Why reinvent the wheel?”** I understand your question and it is a valid one. But, I wanted to create something of my own which I can use daily, and in the process I can also learn and elevate my development skills.

## Features ✨

![Zettel Image](https://zettel-eight.vercel.app/demo-light.png)

- **Markdown Notes:** Take notes easily using markdown format.
- **Markdown Preview:** Easily preview your markdown in HTML.
- **Images:** Supports image uploading.
- **Collections:** Categorize your notes in separate collections
- **Collections Color Coding:** Visualize your collections with a color code for each.
- **Beautiful UI:** Work in aesthetically pleasing environment
- **Dark Mode:** We've got Dark mode too! 🌙
- **Syntax Highlighting:** Get beautiful syntax highlighting for your code blocks!
- **Open source:** The code is publically available on GitHub

As of now, Zettel is only a MVP now, and I am planning on developing some more features which will make it even more awesome.

## Future features 🌟

- Ability to share the notes link so that others can view it.
- Ability to export the notes in **.md** format.
- Ability to delete, rename collections.
- Ability to move notes to the trash
- Ability to star your favourite notes.
- Ability to view all your notes at once.
- Syntax Highlighting for mardown notes

## Technologies Used 👩‍💻️

- Next 13 - Frontend
- Node + Express - Backend
- MongoDB - Database
- TailwindCSS - CSS Library
- shadcn/ui - Tailwind Components
- React Query - Data Fetching Library
- Formik - Form handling Library
- Yup - For schema validation
- TypeScript - For Type Safety
- prismjs - Syntax Highlighting
- Firebase - Authentication & Storage
- Vercel - Frontend Deployment
- Render - Backend Deployment

## What I learned during the process?

I’ve learned a lot of things like how to develop a full-fledge application that can be used by others as well as myself. I’ve also learned how to 

- Deploy a Node+Express+TS backend on render.
- Develop fully functional APIs
- Use of MongoDB aggregations
- Use React Query

## Conclusion

I had a great time developing this application. This is my first time developing an App which can be used by others. I hope people in the development community use it and give me feedback so that I can improve this application even more. 

App's Live Link - https://zettel-eight.vercel.app/

GitHub - https://github.com/shaan-alam/zettel

If you like the project, feel free to give it a ⭐

### My Socials

Twitter - https://twitter.com/shaancodes

Instagram - https://www.instagram.com/shaancodes/

GitHub - https://github.com/shaan-alam/

What is Zettel? 😍   This is a good starting point to introduce Zettel. So, zettel is...

Introducing Zettel: A Markdown based note taking application for developers.

You might've heard about closures in JavaScript, but you don't actually know what it is or why it is used. In this blog I'll give details about closures that you need to know.
## What are closures?
As per the MDN docs,

> A **closure** is the combination of a function bundled together (enclosed) with references to its surrounding state (the **lexical environment**)

In other words, a closure gives you access the outer function's variables inside the inner function. Closures are created every time a function is created. Let's take a look at an example

```js
function sayHello(name) {
	return function displayMessage() {
		console.log(`Hello ${name}`)
	}
}

const sayHelloToJohn = sayHello('John Doe');
sayHelloToJohn(); // Hello John Doe
```

In the above example, I've created a function `sayHello` which takes a parameter `name`. This function returns another function which log the name(from outer function) to the console.

So, What happens is that when we call the `sayHello` function, the inner function is returned and assigned to `sayHelloToJohn` and when we call this function, `Hello John Doe` is logged onto the console.

But, you might be asking yourself that *isn't the validity of local variables inside function expires once the function is finished executing? So, how come this inner function lets you access the local variable of it's parent function?*

The reason is functions in JavaScript form closures. A closure is a combination of function and lexical environment within which the function was created. This lexical environment consists of any local variables that were present at the time the closure was created. 

In this case, `sayHello` is a reference to the instance of the function `displayMessage` that is created when `sayHello` runs. This instance of `displayMessage` maintain a reference to its lexical environment within which the variable `name` exists. For this reason, when the inner function is called the variable `name` is available for use

That's what closures is all about in JavaScript!

## Another example
Let's take a practical example to understand it better.

```js
function changeColor(color) {
	return function() {
		document.getElementById('btn').style.backgroundColor = color;
	}
}

const changeColorToBlue = changeColor('blue');
const changeColorToRed = changeColor('red');
```

In this example, we create a `changeColor` function that accepts a `color` parameter and returns a function which changes the background color of the button. 

`changeColorToBlue` and `changeColorToRed` are now functions which when invoked will change the background color of the button to the respective argument passed to the `changeColor` function.

## Private methods with closures
Closures can help you to actually emulate private methods. This could help in restricting access to variables or methods.
The following example below demonstrates how public function access private members.
```js
const createCounter = function (initialValue) {

  let counterVar = 0;

  function increment() {
    counterVar = counterVar + 1;
  }

  function decrement() {
    counterVar = counterVar - 1;
  }

  function getCounter() {
    return counterVar;
  }
  
  return { increment, decrement, getCounter };
};

const counter = createCounter(0);
console.log(counter.getCounter()); // 0
counter.increment();
counter.increment();

console.log(counter.getCounter()); // 2

counter.decrement();
console.log(counter.getCounter()); // 1


```

## Conclusion 
That's all about closures in short. In case you want to dig deeper, you can also refer to the [MDN Docs](https://developer.mozilla.org/en-US/)

### My Socials

Twitter - [shaancodes](https://twitter.com/shaancodes)

Instagram - [shaancodes](https://www.instagram.com/shaancodes/)

GitHub - [shaancodes](https://github.com/shaan-alam/)


You might've heard about closures in JavaScript, but you don't actually know what it is or why it is...

Understanding JavaScript Closures!

---
series: Building doxshare
---

Hi.
I wanted to learn T3 stack as it is trend right now. So what better way is there to learn a particular stack than actually creating a project in it. But, I did not wanted to create the traditional recipe app, social media app or a boring e-commerce app. I wanted to create something which can be used by others also.

So, I thought to myself what are the apps which I use, but it could've been better if I built it. I thought of lot of apps, but later came across pastebin. I thought to myself, "I could build it better".
## Is it a regular pastebin clone?
No, it's not exactly a pastebin clone, but rather I'm planning it to build it as an alternative to it. It's going to be better, with beautiful UI and everything. 

## How is it going to be different?
The difference is I am gonna let users write notion like documents and then share it, unlike pastebin which only lets us share text. For writing documents, I'm gonna use [Novel.sh](https://novel.sh/). It is a WYSIWYG editor which provides interface and features similar to Notion. It also lets us use OpenAI API to integrate AI into it.


![Novel.sh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2v4xi3tkwerp9a7e23yd.png)


It will have all the regular features like document sharing, password protection, document exposure, document expiration etc. For now, I'm planning to build a MVP in a week or so, and later I'll improve it by introducing more features into it.

## What tech stack I'm planning to use?
* T3 stack
* Novel.sh (WYSIWYG editor)
* shadcn/ui
* MySql
* PlanetScale
* Vercel

I am bad at naming things 😁, I had hard time thinking about a name for this project. I came up with "docshare", but I think it can be further improved. I'd appreciate it if you guys can help me come up with a perfect name for this project. Thanks in advance!


### My Socials

Twitter - https://twitter.com/shaancodes

Instagram - https://www.instagram.com/shaancodes/

GitHub - https://github.com/shaan-alam/


Hi. I wanted to learn T3 stack as it is trend right now. So what better way is there to learn a...

🖊 I am building a pastebin alternative!

Optimizing User experience is one of the key elements in Web Development. One aspect of improving the user experience is debouncing

## What is debouncing?

Debouncing in simple terms is just delaying a function to make sure that it doesn’t get called too often which can lead to performance issues. You might wanna ask, **why’d we want to delay the function?**

Nice Question!

The answer is what if the function uses heavy resources in our software? We cannot afford it to get called too often. For example, if the function is calling an API we wouldn’t wanna call it too many times.

## Real world Example

Suppose we are creating a live search features where whenever user types the name of a product, the list updates in real-time. Now, let’s suppose for every key stroke that user makes an API is getting called. 

Suppose the user is searching for `MacBook Air` . In this case 11 subsequent API requests (for each character) will be made to the server, which can increase server load and cause performance issues. 

![Server Load](https://media2.giphy.com/media/WhFfFPCEDXpBe/giphy.gif?cid=ecf05e47ogo5xqjnf5nks11fqh6epqqumf7cw9lff7vf53az&ep=v1_gifs_search&rid=giphy.gif&ct=g)

## Solution

The Solution is debouncing the function. Which means that we will add a delay to the function to make sure the user has finished typing. And if the user types again we will just cancel the previous call and call the function again when the user finishes.

In this tutorial we’re gonna create a useDebounce() hook for this purpose.

```tsx
import { useEffect, useState } from 'react'

export function useDebounce<T>(value: T, delay?: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value)

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay || 500)

    return () => {
      clearTimeout(timer)
    }
  }, [value, delay])

  return debouncedValue
}
```

Now, let's dive deeper into the live search example we've discussed earlier. As mentioned before, the hook will update the value of `debouncedValue` state every `delay` milliseconds. This means that every time the user types a character, the hook waits for `delay` milliseconds before updating the `debouncedValue`. If during that duration the value passed is changed, the previous timeout is cleared and a new timeout is set. This ensures that the hook only returns the final value after the user has stopped typing for at least `delay` milliseconds. Once the timeout is over, the `debouncedValue` is changed to the final value. This way, we can avoid unnecessary API calls or other expensive operations that would slow down the user interface.

## Usage of the hook

```tsx
export default function Component() {
  const [value, setValue] = useState<string>('')
  const debouncedValue = useDebounce<string>(value, 500)

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value)
  }

  // Fetch API (optional)
  useEffect(() => {
    // Do fetch here...
    // Triggers when "debouncedValue" changes
  }, [debouncedValue])

  return (
    <div>
      <p>Value real-time: {value}</p>
      <p>Debounced value: {debouncedValue}</p>

      <input type="text" value={value} onChange={handleChange} />
    </div>
  )
}
```

## Resources

https://usehooks-ts.com/react-hook/use-debounce

## Conclusion

I hope you enjoyed this tutorial. If you think I made a mistake somewhere let me know in the comment section.

### My Socials

Twitter - https://twitter.com/shaancodes

Instagram - https://www.instagram.com/shaancodes/

GitHub - https://github.com/shaan-alam/

Optimizing User experience is one of the key elements in Web Development. One aspect of improving the...

Optimizing User Experience with useDebounce() Hook

Hi. In the ever-evolving field of web-development, user experience is the top priority. As our web app grows more complex and data-intensive, we face challenges of efficiently handling and loading data to ensure seamless user experience. 

A few days back I was working on a personal project, where I need to fetch data from the back-end based on different routes in my React App. I wanted to basically render each note on a different route. So I created dynamic routes. The routes was created with the note's unique ID. Suppose a note has ID 1, to it will be rendered on `/notes/1` route.

My First approach was to create a Note component and then obtain the unique ID from the params. And then I could use this ID to fetch the data from my server. This approach had me encounter several problems.

## Problems faced

- **Inefficient data loading:** Without proper handling, & fetching data for dynamic route can lead to multiple server requests which are unnecessary. This in turn can increase the server load.

- **Data inconsistency:** As I was navigating between different routes, the data related to each route was not updated properly.

- **Inefficiency in handling state managment:** Managing the loading state and displaying the approprite UI was complex in this case because I was dealing with multiple dynamic routes simultaneously.

## Solution

After researching, I cam across **data loaders**  in react-router-dom. After reading docs, I came to understand about data loaders and how they are useful in this particular scenario. In this blog I will teach you what are data loaders and how they work in react-router!3

## What are loaders?

Loaders are just functions which are used to handle the loading of the data while you are navigating between the pages of the website. Imagine you are browsing a website. When you browse to a new page, a loader or spinner is displayed to show that the data is being fetched until the new page loads. Loaders in react router work similarly.

## What are we going to build.

We're gonna build a simple project where will dispplay the posts (fetched from an API) on a page. And each post will have it's own route and will be displayed there. It's going to look something like this - 


![React Router](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3tz0b72tkmi70p55ajy.gif)


## Let's Code!


### Creating React App and installing react-router-dom

```shell
npx create-react-app loader-example
cd loader-example
npm install loader-example
```

### Basic Setup

We willl be building simple components to fetch data from an API and show it in the UI. We will create three routes `home, /posts, /posts/:id`inside the parent route `/`

```javascript
import {
  createBrowserRouter,
  createRoutesFromElements,
  Outlet
} from "react-router-dom";

const Layout = () => {
  return (
    <>
      <Link to="/home">Home</Link>
      <Link to="/posts">Posts</Link>
      <div>
        <Outlet />
      </div>
    </>
  );
};

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route index path="/home" element={<Home />} />
      <Route path="/posts" element={<Posts />}></Route>
      <Route path="/posts/:id" element={<Post />} />
    </Route>
  )
);
```

First, we will create Browser Router by creating routes inside it using the `createBrowserRouter` and `createRoutesFromElements` functions like this.

Just creating the router won't help, we have to pass this router inside the `RouterProvider` component inside the App Component.

```javascript
import {
  createBrowserRouter,
  createRoutesFromElements,
} from "react-router-dom";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route index path="/home" element={<Home />} />
      <Route path="/posts" element={<Posts />}></Route>
      <Route path="/posts/:id" element={<Post />} />
    </Route>
  )
);

const App = () => {
  return (
    <div>
      <RouterProvider router={router} />
    </div>
  );
};

export default App;

```

### Building the components

Now we just have to build the Home and Posts component.

```javascript
// Home.js
const Home = () => {
  return (
    <div>
      <p>Home page</p>
    </div>
  )
}

export default Home;
```

```javascript
const api = "https://jsonplaceholder.typicode.com/posts";

const Posts = () => {
  // Posts Component
};

export default Data;

export const dataLoader = async () => {
  const res = await fetch(api);
  const jsonResult = await res.json();

  return jsonResult;
};

```

In the Posts component, we will also create a **data loader** function and export it. In this function we will actually fetch the results from an external API and return it. Later, we will use this function in App.js to mention the loader in the routes.

The loader will fetch the result just before the Posts component renders on the screen, so that it has the necessary data to show in the UI.

Now, let's complete the Posts component.

```javascript
import { useLoaderData, useNavigation, Link } from "react-router-dom";

const api = "https://jsonplaceholder.typicode.com/posts";

const Data = () => {
  const result = useLoaderData();
  const navigation = useNavigation();

  if (navigation.state === "loading") {
    return <h1>Loading!</h1>;
  }

  return (
    <div>
      {result.map((res) => (
        <div key={res.id}>
          <Link to={`/posts/${res.id}`}>
            <h1>{res.title}</h1>
          </Link>
          <p>{res.body}</p>
        </div>
      ))}
    </div>
  );
};

export default Data;

export const dataLoader = async () => {
  const res = await fetch(api);
  const jsonResult = await res.json();

  return jsonResult;
};

```

We will use the useLoaderData() hook to get the result from the loader. Also using the useNavigation() hook, we can check the state of the loader and display some kind of spinner in the UI to tell the user that deta is being fetched in the background. However, for the sake of simplicity I just rendered a heading in the UI for this puprose.

Now, we just have to build the post component which is very simple. We just have to create a simple component which has a loader which will be used to fetch a single post from the external API. The response of the API can be used inside the component using the `useLoaderData()` hook.

```javascript
import { useLoaderData } from "react-router-dom";

const api = "https://jsonplaceholder.typicode.com/posts";

export const postLoader = async ({ params }) => {
  const res = await fetch(`${api}/${params.id}`);
  const resJson = await res.json();

  return resJson;
};

const Post = () => {
  const result = useLoaderData();
  return (
    <div>
      <h1>
        {result.id} - {result.title}
      </h1>
    </div>
  );
};

export default Post;

```

### Final router changes

Now we just have to do one more change in the App component. We will have to pass the loaders function we created inside the `Posts` and `Post` components in their respective routes.

```javascript
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route index path="/home" element={<Home />} />
      <Route path="/posts" element={<Posts />} loader={dataLoader} />
      <Route path="/posts/:id" element={<Post />} loader={postLoader} />
    </Route>
  )
);
```

And now we are done!

And this is how data fetching in react-router-dom is made easy using Data Loaders. 

### Conclusion

I hope you enjoyed this tutorial. If you think I made a mistake somewhere let me know in the comment section. 

Github Repo - [https://github.com/shaan-alam/react-router-loaders-example](https://github.com/shaan-alam/react-router-loaders-example)

Live Demo - [https://react-router-loaders-example.vercel.app/](https://react-router-loaders-example.vercel.app/)

#### My Socials

Twitter - [https://twitter.com/shaancodes](https://twitter.com/shaancodes)

Instagram - [https://www.instagram.com/shaancodes/](https://www.instagram.com/shaancodes/)

GitHub - [https://github.com/shaan-alam/](https://github.com/shaan-alam/)



Hi. In the ever-evolving field of web-development, user experience is the top priority. As our web...

A brief intro about loaders in react router

Okay! Before you declare me crazy and ask **“How the hell can anyone build a second braing using Next.JS?”** Let me tell you that I am not talking about a physical brain. I am talking about a repository of all the knowledge and information you have gathered over the years which you can visit anytime for ideas and inspiration.

## What is second brain? 🤔

Our brain is meant for generating ideas and not storing them. So, how do we store them then? There comes the use of second brain. Second brain is where we store all our ideas, insights, experience, ideas, notes etc. It is perfect system for remind us of all the things we’ve gathered over the period of time which otherwise we would have easily forgotten. As **[Tiago Forte](https://fortelabs.co/)** puts it in his words - 

> We feel a constant pressure to be learning, improving ourselves, and making progress. We spend countless hours every year reading, listening, and watching informational content. And yet, where has all that valuable knowledge gone? Where is it when we need it? Our brain can only store a few thoughts at any one time. Our brain is for having ideas, not storing them.
> 

> Building A Second Brain is a methodology for saving and systematically reminding us of the ideas, inspirations, insights, and connections we’ve gained through our experience. It expands our memory and our intellect using the modern tools of technology and networks.
> 

## Why to create second brain? 🤷‍♂️

Having a second brain as your knowledge base can be useful to you further down the line. It is a good way to document your learnings and experiences. It’s like writing notes for your future-self. You’re gonna thank yourself at later point in life for docmenting your learnings. The sooner you start documenting, the better!! 

## How can we developers use this concept? 🙂

We as developers have to constantly keep up to the latest tech. In this day & age, it can be overwhelming to keep up with all the knowledge. I figured a way for this problem. How about we have a personal space on the internet where we keep all our ideas & notes so we won’t have to google the same thing every time? 

I did it by creating a personal documentation site for myself where I now keep all my development related notes and practices. I can hear you say, “But I don’t want to spend time building a site for this!!” 

That’s exactly what I thought. This is why I went with Nextra.

## What is Nextra? 😲

**Nextra** is a **Static Site Generator** based on Next.JS. As the official site says - 

> It supports Markdown and React components ([MDX](https://nextra.vercel.app/features/mdx)), automatically generated [sidebar and anchor links](https://nextra.vercel.app/get-started#sidebar-and-anchor-links), file-system based routing, built-in syntax highlighting, image
optimization, custom layouts, i18n, and all the features you love about
Next.js.
> 

**Nextra** is a perfect solution for our problem. When we create a site using Nextra, we only need to create MDX files and mention those files in a **“meta.json”** file so that Nextra could automatically generate a sidebar for you to navigate through your files. Here’s an example of the [site](http://shaan-docs.vercel.app) that I built for myself.

![Nextra Nextjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/daits7hisd07rmvgo4zx.png)

## Nextra Features

- **MDX** - With Nextra all your `.md` and `.mdx` files will be rendered under the pages directory. The good thing with `.mdx` files are that they support React components. So you can create your own custom React components and use them. You can check more on MDX on their official [docs](https://mdxjs.com/docs/getting-started/).
- **SSG** - Nextra is built using Next.JS. So, obviously it supports **Static Static Generation (SSG)**. Static Site Generation means your webpages will be generated at build time and statically served to users. You can read more about **SSG**  with Next.JS [here](https://nextjs.org/docs/basic-features/pages#static-generation-recommended).
- **Next Image** - You can use Next Image component inside the `.mdx` files just like any other component.
- **Syntax Highlighting** - Nextra comes with in-built syntax highlighting. However, when I created my site the syntax highlighting feature doesn’t seem to be working. So, I ended up creating my own syntax-highlighting component with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
- **Dark mode** - Nextra comes with the support of dark mode. Also, it uses Tailwind CSS under the hood for styling purposes.
- **Easy Configuration** - The best thing is that you can configure your site according to the way you want. To configure the theme, you just have to edit **theme.config.js** file in the root directory.

## How can you build your own documentation site?

1. Visit [Nextra](https://nextra.vercel.app/) homepage and click on **Get Started** link from the sidebar.
2. Click on the **Deploy** button on the **Get Started** page. ![Nextra NextJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1h9xbtge1zyghpyyh2n.png)
3. You will be redirected to vercel.com. Choose a Repository name and whether you want it to be private or not and then click on create. The deployment process will start automatically.![Nextra NextJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhu2nc01rwnabhzb7pxa.png)
4. Visit the Git Repository and clone it onto your system. `npm install && npm run dev` your website and **TADA**!! 🎉 You got your own documentation site..
![Nextra NextJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqxowj0sd1rr0bf2ofzc.png)
5. To add a page, just create a `.mdx` files inside the pages directory and also mention that newly created file inside the **meta.json** file. Nextra will automatically generate sidebar links for your pages.


![Nextra NextJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hazaup6bj2rqbj5igru2.png)

![Nextra NextJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwvdzsskynhqhq8qwc3h.png)

You can now use this site to store all your development knowledge here. For example, I’m using this site to 

- Write code snippets (that I usually forget 😅). It saves me time googling the same thing everytime.
- Write anything I learn about.
- Revise/go through my notes whenever I’m free

## Wrapping up!!

This is a great way of storing your inspirations, ideas, knowledge etc. It’s like you’re building your own knowledge network/database. 

## Connect with me

Twitter - [shaancodes](https://twitter.com/shaancodes)
Github - [shaan-alam](https://github.com/shaan-alam)
YouTube - [shaancodes](https://www.youtube.com/channel/UC9eR4oVH9IWR8SVvrw61Cog)
Instgram - [shaancodes](https://instagram.com/shaancodes)

Okay! Before you declare me crazy and ask “How the hell can anyone build a second braing using...

How I built my second brain using Next.JS


Hello programmers, 

Do you want start your blog where you educate others, or may be you want a blog as a repository of all the information you’ve gathered over the years. Anyway, blogs can be a great source of information providers for others as well as yourself. It can really help you connect deep with the content you want to consume. Setting up a blog is easy, especially if you’re a programmer. You can create your own blog with **Next.JS** and **MDX.** In this article, I will show you exactly how to do that!

## What are we going to build?

By the end of this article, we will have a blog site for ourselves, which is going to look like this. You can off course make it look more beautiful, but for the sake of tutorial, I made it look very simple.

![Blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knali8ys7wcdh2rjvl5v.png)
## Introduction

## What do we need?

- A decent knowledge of Next.JS framework
- Dependencies - `path fs gray-matter next-mdx-remote`
- Tailwind CSS

## Let’s Start!

## Create a next project

First of al, we’ll start by creating a next project

`yarn create next-app blog`

`cd blog`

Install all the necessary dependencies.

`yarn add fs path gray-matter next-mdx-remote` 

| fs | Provides a way to work with files |
| --- | --- |
| path | Provides a way to work with directories and paths. |
| gray-matter | Parses the front-matter from a string or file |
| next-mdx-remote | To render your mdx content on the page |

## Setting up Tailwind

Run the following commands, in your terminal to install tailwind.

`yarn add tailwindcss postcss autoprefixer -D`

Run this command to create a tailwind.config.js file

`npx tailwindcss init -p`

Inside the tailwind.config.js, paste the following

```js
// tailwind.config.js
module.exports = { 
mode: "jit",
content: [   
	"./pages/**/*.{js,ts,jsx,tsx}", 
	"./components/**/*.{js,ts,jsx,tsx}",  
],  
theme: {  
	extend: {}, 
},
plugins: [],
}
```

Include these in your **styles/globals.css** file

```css
/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Homepage

In index.js file, create an **async** function **getStaticProps(). getStaticProps()** is used in data fetching and returning the result as a prop to the same component. Next.JS will render this page at build time. 

```jsx
// pages/index.js

export async function getStaticProps() {
  // Read the pages/posts dir
  let files = fs.readdirSync(path.join("pages/posts"));

  // Get only the mdx files
  files = files.filter((file) => file.split(".")[1] === "mdx");

  // Read each file and extract front matter
  const posts = await Promise.all(
    files.map((file) => {
      const mdWithData = fs.readFileSync(
        path.join("pages/posts", file),
        "utf-8"
      );

      const { data: frontMatter } = matter(mdWithData);

      return {
        frontMatter,
        slug: file.split(".")[0],
      };
    })
  );

  // Return all the posts frontMatter and slug as props
  return {
    props: {
      posts,
    },
  };
}

```

Inside **getStaticProps** we will use the **fs** and **path** module to read the **.mdx** stored inside the **/pages/posts** directory. 

We will then filter the result to only get the MDX files and not the **[slug.js]** file that we will create ahead.

```jsx
files = files.filter((file) => file.split(".")[1] === "mdx");
```

We will then map through each file using the **.map** array function and then read each individual file using the **fs** and **path** module and extract the front matter of the file using the **matter()** function (imported from gray-matter) and store the front matter along with slug of every file in the posts variable.

```jsx
// import matter from 'gray-matter';

// Read each file and extract front matter
  const posts = await Promise.all(
    files.map((file) => {
			// read file
      const mdWithData = fs.readFileSync(
        path.join("pages/posts", file),
        "utf-8"
      );
			
			// extract front matter
      const { data: frontMatter } = matter(mdWithData);

      return {
        frontMatter,
        slug: file.split(".")[0],
      };
    })
  );
```

`posts` variable will look somethings like this -

```jsx
posts = {
	frontMatter: {
		// frontMatter object extracted from the mdx file
	},
	slug: string
}[]
```

At last, we will map through each post (inside the props) and render it in the UI. We will also use the `Link` component from next to create a link to each post.

The final index.js file will look like this

```jsx
// pages/index.js
import fs from "fs";
import path from "path";
import matter from "gray-matter";
import Link from "next/link";
import PostCard from "../components/PostCard";
import Layout from "../components/Layout";

const Home = ({ posts }) => {
  return (
      <div className="container w-[80%] md:w-[60%] mx-auto">
        <h1 className="text-blue-700 text-3xl font-bold my-12">My Blog 📙</h1>
        <div className="posts md:grid md:grid-cols-3 gap-8">
          {posts.map((post) => (
            <Link href={`/posts/${post.slug}`} key={post.slug}>
              <a>
                <PostCard post={post} />
              </a>
            </Link>
          ))}
        </div>
      </div>
  );
};

export default Home;

export async function getStaticProps() {
  // Read the pages/posts dir
  let files = fs.readdirSync(path.join("pages/posts"));

  // Get only the mdx files
  files = files.filter((file) => file.split(".")[1] === "mdx");

  // Read each file and extract front matter
  const posts = await Promise.all(
    files.map((file) => {
      const mdWithData = fs.readFileSync(
        path.join("pages/posts", file),
        "utf-8"
      );

      const { data: frontMatter } = matter(mdWithData);

      return {
        frontMatter,
        slug: file.split(".")[0],
      };
    })
  );

  // Return all the posts frontMatter and slug as props
  return {
    props: {
      posts,
    },
  };
}
```

## PostCard Component

Create a component **components/PostCard.js.** We will use this component to return card for each post.

```jsx
const PostCard = ({ post }) => {
  return (
    <div className="rounded-md w-72 border transition-all hover:text-blue-700 hover:shadow-lg hover-scale:105 cursor-pointer">
      <img src={post.frontMatter.cover_image} alt="Cover Image" />
      <div className="mt-2 p-2">
        <h2 className="font-semibold text-xl">{post.frontMatter.title}</h2>
      </div>
    </div>
  );
};

export default PostCard;
```

## Post page

Create a **/pages/posts/[slug].js** page to render each post separately on a different route.

We will use the **getStaticPaths** async function to generate separate routes according to the slug for each post at the build time.

```jsx
export async function getStaticPaths() {
  // Read the files inside the pages/posts dir
  const files = fs.readdirSync(path.join("pages/posts"));

  // Generate path for each file
  const paths = files.map((file) => {
    return {
      params: {
        slug: file.replace(".mdx", ""),
      },
    };
  });

  return {
    paths,
    fallback: false,
  };
}
```

We will the **getStaticProps** once again to read files and extract front matter as well as the content from it using the gray-matter module. The content of the mdx files need to be serailized in order to render it using the next-mdx-remote module. 

```jsx
export async function getStaticProps({ params: { slug } }) {
  // read each file
  const markdown = fs.readFileSync(
    path.join("pages/posts", slug + ".mdx"),
    "utf-8"
  );

  // Extract front matter
  const { data: frontMatter, content } = matter(markdown);

  const mdxSource = await serialize(content);

  return {
    props: {
      frontMatter,
      slug,
      mdxSource,
    },
  };
}
```

We wil then render the mdx source recieved inside the props.

```jsx
// pages/posts/[slug.js]
import path from "path";
import matter from "gray-matter";
import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";
import styles from "../../styles/Post.module.css";

const Post = ({ frontMatter, slug, mdxSource }) => {
   return (
    <Layout title={frontMatter.title}>
      <div className={styles.post}>
        <h1 className="font-semibold my-8 text-3xl text-blue-700">
          {frontMatter.title}
        </h1>
        <MDXRemote {...mdxSource} />
      </div>
    </Layout>
  );
};
```

## Styling Post page

We will also add some basic styling for the post page using tailwind directives. Create a **styles/Post.module.css** file and include these styles for a better look.

```css
// styles/Post.module.css

.post {
  @apply container w-[90%] md:w-[60%] mx-auto my-12;
}

.post p {
  @apply leading-7 my-4;
}

.post img {
  @apply my-4 w-full;
}
```

## Bonus - Syntax Highlighting! 🎉

If you want to see, how to add syntax highlighting for your code elements in the mdx files, you can checkout my full video tutorial I did on my YouTube channel 

{% youtube c4ge3tgGZuw %}

## Connect with me

Twitter - [shaancodes](https://twitter.com/shaancodes)
Github - [shaan-alam](https://github.com/shaan-alam)
YouTube - [shaancodes](https://www.youtube.com/channel/UC9eR4oVH9IWR8SVvrw61Cog)
Instgram - [shaancodes](https://instagram.com/shaancodes)

Hello programmers,   Do you want start your blog where you educate others, or may be you want a blog...

Build a NextJS Blog with MDX and Tailwind.

## Intro

Hey ya folks!
Have you ever wondered how to implement Google Authentication in your React applications? Well, worry not, because today I am gonna show you exactly how is it done.

## But, why is it needed?

OAuth is a Open Standard Authorization protocol that provides appliactions the scopes of the user's data without sharing their password to other applications. It also makes authentication process a lot easier both for the developer and the user. For example, you might have seen "Login with Google" button on some websites. When you click that button, a request is made to Google's servers and the user's data (without password) is returned to the client side. This response can also be used against our own API to authenticate the user.

![google login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6w737260lqyx4751bll5.png)

## What are we gonna make?

We are gonna be creating a React App which will use Google OAuth to authenticate the user. For the simplicity of the application I'm gonna store the user's data inside the component state.

## What you will learn?

- Implementing Google Authentication in your React App (pretty obvious 😅)
- Creating a Node REST API 💻
- Using TypeScript on client and server side 😎

## Folder Structure

## Client Side

📦client
┣ 📂 public
┣ 📂 src
┃ ┣ 📂 components
┃ ┃ ┣ 📜 GoogleAuth.tsx
┃ ┣ 📂 pages
┃ ┃ ┃ ┗ 📜 Login.tsx
┃ ┣ 📜 App.tsx
┃ ┣ 📜 index.tsx
┃ ┣ 📜 .env

### Server side

📦server
┣ 📂 src
┃ ┣ 📂 controllers
┃ ┃ ┗ 📜 auth.controller.ts
┃ ┣ 📂 models
┃ ┃ ┗ 📜 user.model.ts
┃ ┣ 📂 routes
┃ ┃ ┗ 📜 auth.route.ts
┃ ┗ 📜 index.ts
┣ 📜 .env

## Let's Go!! 🏃

### Create a Google Cloud Project
Go to [Google Developer Console](https://console.cloud.google.com/apis/dashboard). Create a new Project. You'll need to configure your **OAuthc consent screen**. Give your application a name, user supported email, app logo etc. Goto **Credentials** tab and create credentials. 
Select OAuth Client ID and choose the application type as web.
Give your application a name and mention authorized JavaScript origins and redirect origins.
You will get your **Client ID**. Save this client ID as .env file for both client and server.

![google console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7w5gfb19tcqoj8a1sb2j.png)

### Initial Project Setup

First of all, we need to setup our backend and create a REST API to authenticate our user. Create a folder called **server** and inside it initialize an empty project.

```bash
yarn init -y

OR

npm init -y
```

Install the following dependencies.

```bash
yarn add cors dotenv express google-auth-library mongoose
```

Since I already mentioned that we are going to use TypeScript for our application, we will need to install type definitions for these dependencies. We will install the type definitions as **dev dependencies** because they are not needed in production.

```bash
yarn add @types/cors @types/express @types/mongoose -D
```

We will also be needing **nodemon**, **ts-node** and **typescript**, let's install them as well

```bash
yarn add nodemon ts-node typescript -D
```

Next, we need to generate a **tsconfig.json** file. This file contains all the configuration for our TypeScript project like rootDir, compiler options etc.

```bash
npx tsc --init
```

We need to make some changes in the **tsconfig.json** file.

![tsconfig.jsona](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddbyu556ena6azqgbi0m.png)
![tsconfig.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svbf4rjihfebcep79sca.png)

Also, add the following scripts to your **package.json**

```json
"scripts": {
    "dev": "nodemon ./src/index.ts",
    "build": "rm -rf && tsc"
  },
```

### Creating an express server

Before creating an express server, I'd like to show you an overall flowchart of how we will be creating our express server.

![flowchart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c8m169weria801a0cv1.png)

Create a file **src/index.ts** and inside it we will create a basic express server.

```ts
import express from "express";
import authRoutes from "./routes/auth.route";
import mongoose from "mongoose";
import dotenv from "dotenv";
import cors from "cors";

dotenv.config();

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());
app.use("/auth", authRoutes);

mongoose.connect(`${process.env.MONGO_URI}`);

const db = mongoose.connection;
db.once("open", () => console.log("Connected to Mongo DB!!"));
db.on("error", (error) => console.error(error));

app.listen(PORT, () =>
  console.log(`The server is up and running on PORT ${PORT} 🚀`)
);
```

Let me explain you what is happening here,

```ts
import express from "express";
import authRoutes from "./routes/auth.route";
import mongoose from "mongoose";
import dotenv from "dotenv";
import cors from "cors";

dotenv.config();
```

First we import all these dependencies and the configure dotenv to load our environment variables.

```ts
app.use(cors());
app.use(express.json());
app.use("/auth", authRoutes);
```

Then we define some middlewares here. We make a middleware to use cors(). The second middleware will help us recieve JSON data through requests. And the third middleware is a route middleware.

```ts
const db = mongoose.connection;
db.once("open", () => console.log("Connected to Mongo DB!!"));
db.on("error", (error) => console.error(error));

app.listen(PORT, () =>
  console.log(`The server is up and running on PORT ${PORT} 🚀`)
);
```

Then we finally connect to our MongoDB database and listen to our express server on PORT 5000.

### The User Model

Next, we need to create a **user model** to save the user documents into the database. Create a **models/user.model.ts** file.

```ts
import mongoose from "mongoose";

interface UserDocument extends mongoose.Document {
  email: string;
  avatar: string;
  name: string;
}

const UserSchema = new mongoose.Schema({
  email: {
    type: String,
    required: true,
  },
  avatar: {
    type: String,
    default: "",
  },
  name: {
    type: String,
    required: true,
  },
});

export default mongoose.model<UserDocument>("User", UserSchema);
```

Notice, we are only implementing google auth here, so I haven't specified the password field here, however if you are creating an authentication system by yourself, you might probably want to have a password field too.

### Controller

We have to create a controller for authenticating our user and sending back the response to the client.

Create a file **controllers/auth.controller.ts**.

```ts
import { Request, Response } from "express";
import { OAuth2Client } from "google-auth-library";
import User from "../models/user.model";

const googleClient = new OAuth2Client({
  clientId: `${process.env.GOOGLE_CLIENT_ID}`,
});

export const authenticateUser = async (req: Request, res: Response) => {
  const { token } = req.body;

  const ticket = await googleClient.verifyIdToken({
    idToken: token,
    audient: `${process.env.GOOGLE_CLIENT_ID}`,
  });

  const payload = ticket.getPayload();

  let user = await User.findOne({ email: payload?.email });
  if (!user) {
    user = await new User({
      email: payload?.email,
      avatar: payload?.picture,
      name: payload?.name,
    });

    await user.save();
  }

  res.json({ user, token });
};
```

Let me explain what's happening here.

```ts
import { Request, Response } from "express";
import { OAuth2Client } from "google-auth-library";
import User from "../models/user.model";

const googleClient = new OAuth2Client({
  clientId: `${process.env.GOOGLE_CLIENT_ID}`,
});
```

First we import all the necessary dependencies and libraries we want, and then we initialize our google client using the client ID we received from google.

Next, we create and export a **authenticateUser** function, which is basically our controller.

Inside the **authenticateUser** function, we grab the token from **req.body**. (We will send the token from the client)

```ts
const { token } = req.body;
```

```ts
const ticket = await googleClient.verifyIdToken({
  idToken: token,
  audient: `${process.env.GOOGLE_CLIENT_ID}`,
});

const payload = ticket.getPayload();
```

And then we verify the token and get a payload which will contain the details of our user.

```ts
let user = await User.findOne({ email: payload?.email });
if (!user) {
  user = await new User({
    email: payload?.email,
    avatar: payload?.picture,
    name: payload?.name,
  });

  await user.save();
}

res.json({ user, token });
```

Next, we check if the user received from google already exists in our database. If it exists then we return the same user along with the token, or else, we create and save a new user in our database.

### Routes

Now we need to run this controller whenever the server hits the **/auth** endpoint. For that we need to specify routes to our express server. Create a **routes/auth.route.ts** file. Import the controller and specify it for the **/** POST route.

```ts
import express from "express";
import { authenticateUser } from "../controllers/auth.controller";

const router = express.Router();

router.post("/", authenticateUser); // (This is actually /auth POST route)

export default router;
```

## Client side

Now, that we have our backend ready, it's time for us to work on front end. Initialize a React App.

```bash
yarn create react-app --typescript google-login-project
cd google-login-project
```

Install the following dependencies

```bash
yarn add react-google-login react-router-dom axios
yarn add @types/react-router-dom -D
```

## Creating UI

Let's create UI for our application. Inside **App.tsx** make the following changes

```ts
import { Switch, Route } from "react-router-dom";
import GoogleAuth from "./components/GoogleAuth";

const App = () => {
  return <GoogleAuth />;
};

export default App;
```

### GoogleAuth Component

In **App.tsx** you have seen that we've used a GoogleAuth component. Let's make that one in the components directory.

```ts
// /components/GoogleAuth.tsx
import { useState } from "react";
import axios, { AxiosResponse } from "axios";
import GoogleLogin from "react-google-login";

interface AuthResponse {
  token: string;
  user: User;
}

interface User {
  _id: string;
  name: string;
  email: string;
  avatar: string;
}

const GoogleAuth = () => {
  const [user, setUser] = useState<User | null>(null);
  const onSuccess = async (res: any) => {
    try {
      const result: AxiosResponse<AuthResponse> = await axios.post("/auth/", {
        token: res?.tokenId,
      });

      setUser(result.data.user);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div className="h-screen w-screen flex items-center justify-center flex-col">
      {!user && (
        <GoogleLogin
          clientId={`${process.env.REACT_APP_CLIENT_ID}`}
          onSuccess={onSuccess}
        />
      )}

      {user && (
        <>
          <img src={user.avatar} className="rounded-full" />
          <h1 className="text-xl font-semibold text-center my-5">
            {user.name}
          </h1>
        </>
      )}
    </div>
  );
};

export default GoogleAuth;
```

Since this is a simple application I've used conditional rendering here rather than routing. If the user is not set in state, we will render the Google login component else we will display the user's details (avatar and name). 

However, if you want, you can store the user's data in redux store or Context API which seems more practical.

## Wrapping up ✨
That was it. We've sucessfully implemented Google OAuth in our React Application. 
Github repo - [https://github.com/shaan-alam/google-login](https://github.com/shaan-alam/google-login)

## Find me here 🌍
Github - [shaan-alam](https://github.com/shaan-alam)
Twitter - [shaancodes](https://twitter.com/shaancodes)
LinkedIn - [Shaan Alam](https://www.linkedin.com/in/shaan-alam-01784018a/)
Instagram - [shaancodes](https://instagram.com/shaancodes)


Intro   Hey ya folks! Have you ever wondered how to implement Google Authentication in your...

How to implement Google Authentication in your React Applications!!

## What is React?
React is a free and Open Source Front End JavaScript Library for building complex User Interfaces by dividing your application into smaller components. It is maintained by Facebook and a community of Developers.

## Pre-requisites for learning React
Before learning React or trying to learn React, I would say to familiarize yourself with HTML, CSS, & JavaScript.You can learn HTML and CSS within 2-3 weeks as they are used for creating layouts for your web application. JavaScript takes some time to lean as it is a programming language. Spend at least a month or two learning JavaScript. Don't just learn and learn, but also create small projects to implement the knowledge that you have gained. You can create some mini projects like **To-Do Lists**, **Calculator**, **Random Jokes Generator** etc.

## JavaScript 
While learning JavaScript, you have to avoid some mistakes that I made. When I was learning JavaScript, I thought that I have to become a **absolute master of JavaScript** to write React code (which is non-sense). I started learning advanced concepts (as a beginner), failing which, I thought I am not good enough. But, let me tell you, as a beginner you need to learn just enough ,so that you can create basic projects in vanilla JavaScript. Some topic to learn and understand deeply are 

- Variables
- if/else conditions and switch statements
- Difference between var, let & const
- Functions
- Arrays
- Array methods like **filter**, **map**, **reduce** etc.
- ES6 Concepts
- Promises
- Callbacks
- Async/await
- Classes and OOPs Concepts
- Working with APIs
Again, don't just learn, **APPLY!!**

## React
At this point of time, when you have learned JavaScript essentials, it is time for you to dive into React. You can start learning React by taking a look at React Official Docs or by taking their React Official Tutorial to get some idea of how React works. React Docs are very well written covering the fundamentals of React. Learn these topics very well to understand React fundamentally.
- JSX
- Components (Functional and Class based)
- Lifecycle Methods
- State
- Props
- Handling events
- Forms
- Conditional Rendering
- Working with third-party APIs.
Once you have gained understanding of these topics, it is time for you to create projects in order to implement them. You can create new projects or the remake the ones you made while learning vanilla JavaScript using React.

## React Router
Learn about React router. React router is a routing library for react which will help you to navigate through different pages in your React App. Learn about loading specific page's content, passing params in the URL, redirecting etc. Also, understand that react router is not a part of React, it's a routing library made for React.

## Advanced React
Now, that you have basic React knowledge and also created some basic projects, it is time to learn some advanced concepts like **Hooks**, **Context** etc. Take a look at React Docs and learn these concepts.
- Context
- Hooks
- Error Boundaries
- Higher Order Components
- Code Splitting
- Refs
- Forwarding Refs
- Render props

## Some extra stuff!
You can also learn some extra libraries like **Material UI**, **reactstrap**, **tailwindcss**, **Semantic UI** etc, once you have learned the basics of React. These libraries will help you in your day-to-day React Dev life. However, it is not compulsory to learn everything, you can try and learn them once you are done with React basics and can make projects.

## Congratulations 🥳
You are a React Developer. Now you just have to hone you skills by creating projects and visiting React Docs often and learning new things.

## Some resources to learn React - 
- [React JS Crash Course 2021 by Traversy Media](https://www.youtube.com/watch?v=w7ejDZ8SWv8)
- [Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks By FreeCodeCamp](https://www.youtube.com/watch?v=4UZrsTqkcW4)
- [Full Modern React Playlist by The Net Ninja](https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d)

## Some useful tips
- Don't try to learn everything at once, understand and accept the fact that you a beginner and spend enough amount of time to learn these concepts.

- Don't be afraid of writing bad code. Like I mentioned earlier, you are a beginner, at some point everyone is. Understand that `Progress >>>> Perfection`

- Avoid **Tutorial Hell 🤯**. Tutorial Hell refers to the term when you follow a tutorial after tutorial, and you think you are learning, when in fact you learn nothing. If you watching Youtube tutorials, don't just watch video after video. Realize that you are stuck in Tutorial Hell and stop watching more videos and start creating your own projects.

- Make Google, StackOverflow, articles & blogs your best friend. Start googling your questions, there is a high probability that your problem/error has already been solved by someone else on the internet.

Find me here - 
Github - [shaan-alam](https://github.com/shaan-alam)
Twitter - [shaancodes](https://twitter.com/shaancodes)
Instagram - [shaancodes](https://instagram.com/shaancodes)
LinkedIn - [Shaan Alam](https://www.linkedin.com/in/shaan-alam-01784018a/)

What is React?   React is a free and Open Source Front End JavaScript Library for building...

How to learn React - The Effective way

Hello guys, you might have probably heard the popular name "TypeScript" if you are into Web Development world. I had recetly started using TypeScript in my React Project 1-2 months back and I loved it. At first, it was difficult to code in TypeScript, but trust me, once you get the taste of TypeScript and the cool "Intelli Sense" in your code editor, you'd never want to go back to normal JavaScript. It just makes your JS development life a lot easier.

![Typescript](https://media3.giphy.com/media/QX6ruFElzFdeIfblrg/giphy.gif?cid=ecf05e47jmzmyjvj40lgtz9nw82yg8mcqsofzi1o79dvc8o9&rid=giphy.gif&ct=g)


## What does it do?

TypeScript provides type definitions to your JavaScript code which makes the development process a lot faster and also helps to catch bugs easily.

## Setup Typescript in your project

To include TypeScript into your project, install Typescript as a dev dependency by typing.

`yarn add typescript -D`
or
`npm install typscript --save-dev`

Now, we need ts-node. ts-node is a Node.js package used to execute TypeScript files or run TypeScript in a REPL environment.

`yarn add ts-node -D`
or
`npm install ts-node --save-dev`

We also need to generate a `tsconfig.json` file which has all the typescript configurations for our project. To initialise a tsconfig.json, type the following command.

`npx tsc --init`

You will see that a `tsconfig.json` file like this is generated in the root folder of your project.

![tsconfig](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjln3fgx0to3pfe5ifed.png)

Create a file called `index.ts` and paste the following code `console.log('Hello world')`

Now type `npx ts-node index.ts` in your terminal to get the output.

![typescript output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpayzylr48pzprm45339.png)

If you want to compile your TypeScript code to JavaScript code type `npx tsc index.ts`, and you will see that a index.js file has been generated in your project.

![typescript output file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wufgagffnm1poznaorcx.png) ![typescript output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vm3bplozpq5q0vt6i4sn.png)

## TypeScript Basics

## Primitive Data types

There are three primitive data types in JavaScript i.e. `number`, `string` and `boolean`. To create a variable with typed definition in TypeScript -

```js
const username: string = "Shaan Alam";
const age: number = 18;
const isAdult: boolean = true;
```

To provide data types to variables, you can simple define their type by adding a colon infront of the variable. However, this is not needed in this case as TypeScript will automatically infer its data type automatically.

## Arrays

Arrays can be created the same way as the normal variables are created. You just have to add `[]` with the data type. For example, if you want to create an array of strings, you could do something like this

```js
const names: string[] = ["Alice", "Bob", "John"];

// Similarly for numbers and booleans
const ages: number[] = [18, 19, 24];
const areAdults: boolean[] = [true, true, true];
```

It is to be noted that if you have created an array using `string[]` data type, you could only provide string elements in the array or else typescript will throw you an error

```js
// Not Allowed!! ❌
const names: string[] = ["Alice", "Bob", { name: "John", age: 18 }];
```

## Any

TypeScript also has a any data type which can be used to prevent a particular value causing type checking errors. For example, in the previous example, we could do something like this, and TypeScript won't show you an errror.

```js
// Okay!! ✅
const names: any[] = ["Alice", "Bob", { name: "John", age: 18 }];
```

However, it is recommended not to use `any` data type, because it can cause bugs.
One good use case of `any` is that, when you don't know the type of the data before-hand, you can use `any` to stop showing errors.

## Functions

TypeScript allows you to type your functions by typing parameters and return value.

```js
// Typing parameters
function sumOfNumbers(a: number, b: number) {
  return a + b;
}

// Typing parameters and return value
function sumOfNumbers(a: number, b: number): number {
  return a + b;
}

sum(12, 34); // Okay ✅
sum("190", "234"); // Wrong ❌. TypeScript won't allow this
```

However, you don't always need to specify your return value explicitly, typescript is smart enough to infer the return value from the return statement itself.

![typescript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mqdpjajtpybtx18cwev.png)

## Object Types

One of the most common data structures that will be using in javascript is Objects. Typescript can help you provide typed definitions to your objects as well.
If you create an object like this and hover over the user, it will show you the shape of the object, which is automatically inferred by typecript

```js
let user = {
  fullName: "Shaan Alam",
  age: 18,
};
```

![typescript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pth8v913jk83tnkcli8.png)

You can type your objects just as you create a normal object in parenthesis and provide the object properties along with their type.

```js
let user2: { fullName: string, age: number } = {
  fullName: "Shaan Alam",
  age: 18,
};
```

## Type Aliases

What if you want to use the same typed definition for different objects? Writing definitions for different objects can be quite repetitive. A type alias can help you with this.
You can create your own types using type aliases and use them.

```ts
type User = {
  fullName: string;
  age: number;
};

let user3: User = {
  fullName: "Alice",
  age: 20,
};

let user4: User = {
  fullName: "Bob",
  age: 34,
};

let user5: User = {
  fullName: "John",
  age: 35,
};
```

In this example, a `User` type id created and used as a type definition for multiple objects having the same type of data.

You can also use Type Aliases to type functions like this.

```ts
type Sum = (a: number, b: number) => number;
const sumOfNumbers: Sum = (a, b) => a + b;
```

## Interfaces

An interface is kind of same as type except there are few differences between them. We can rewrite the above example using Interface like this.

```ts
interface User {
  fullName: string;
  age: number;
}

let user3: User = {
  fullName: "Alice",
  age: 20,
};

let user4: User = {
  fullName: "Bob",
  age: 34,
};

let user5: User = {
  fullName: "John",
  age: 35,
};
```

`Note - A good difference between the use case for interface and type aliases can be that you can use interface for typing objects and type aliases for other things!`

Learning TypeScript at first can be tough, but trust me it pays off afterwards. Here are few resources from where you can learn TypeScript

## Youtube Videos
{% youtube BCg4U1FzODs %}
{% youtube gp5H0Vw39yw %}

TypeScript Docs - [https://www.typescriptlang.org/docs/](https://www.typescriptlang.org/docs/)

Thank You!!

Find me here - 
GitHub - [https://github.com/shaan71845](https://github.com/shaan71845)
Twitter - [https://twitter.com/shaancodes](https://twitter.com/shaancodes)
Instagram - [https://instagram.com/shaancodes](https://instagram.com/shaancodes)
LinkedIn - [https://www.linkedin.com/in/shaan-alam-01784018a/](https://www.linkedin.com/in/shaan-alam-01784018a/)

Hello guys, you might have probably heard the popular name "TypeScript" if you are into Web...

Introduction to TypeScript 👩‍💻

Hello guys!!
Recently, while working on a project, I came accross a situation where I needed to implement Drag and drop feature for uploading files to the server. But, the problem was that, the (component) file in which I was working was already large, so I wanted to somehow separate the drag and drop logic from my component logic, and I ended up creating a `useDragAndDrop()` hook.<br />

In this article, I want to share exactly, how I created a custom hook for drag and drop feature. <br>

So, let's build it!! 🔥

Let me show you the end result of what we will be building.
![ezgif-4-7bd93a6caeeb.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1629355307932/lfGrCKLeu.gif)

### Initialize a React Project.

`npx create-react-app drag-and-drop-react --template typescript`

After the project is initialized, let's create a form in App.js.

```js
import "./App.css";

function App() {
  return (
    <div className="container">
      <form>
        <label htmlFor="file">
          <h1>Select Or drop a file</h1>
        </label>
        <input type="file" name="file" id="file" />
      </form>
    </div>
  );
}

export default App;
```
In the App.css, make the following changes to make it look beautiful, or you can do your own custom styling!

```css

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap");

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

html,
body {
  background: #0267c1;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background: #fff;
  padding: 3em 5em;
  border-radius: 0.5em;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
    0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035),
    0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05),
    0 100px 80px rgba(0, 0, 0, 0.07);
}

input {
  display: none;
}

label {
  width: 400px;
  border: 3px #efa00b dashed;
  padding: 3em 1.78em;
  display: inline-block;
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
}

label h1 {
  font-size: 130%;
  text-align: center;
  color: #efa00b;
}

.file-drop-error {
  width: 100%;
  text-align: center;
  color: red;
  display: inline-block;
  margin-bottom: 1em;
}

.file-properties {
  margin-top: 1em;
}

.file-properties ul {
  list-style: none;
  text-align: center;
}

```

### Now, let's create the hook
Create a folder called hooks and inside it create a file **"useDragAndDrop.ts"**. In this file, we will create the necessary state and methods for the drag and drop feature.

First we will create two states **dragOver** and **fileDropError**. DragOver will determine if the file is being dragged over our label element, and fileDropError will contain the error message if there is any error after dropping the file. In this case, we want an image, so the fileDropError will likely store error messages related to file not being of the type image.

```js
  const [dragOver, setDragOver] = useState(false);
  const [fileDropError, setFileDropError] = useState(")

```

Next, we will create two function onDragOver() and onDragLeave(), this will the toggle the state of dragOver, and then will return all the states and method.

```js
 const onDragOver = (e: React.SyntheticEvent) => {
    e.preventDefault();
    setDragOver(true);
  };

  const onDragLeave = () => setDragOver(false);
```
The final code will look like this.
```js
import { useState } from "react";

export default function useDragAndDrop() {
  const [dragOver, setDragOver] = useState(false);
  const [fileDropError, setFileDropError] = useState("")

  const onDragOver = (e: React.SyntheticEvent) => {
    e.preventDefault();
    setDragOver(true);
  };

  const onDragLeave = () => setDragOver(false);

  return {
    dragOver,
    setDragOver,
    onDragOver,
    onDragLeave,
    fileDropError,
    setFileDropError,
  };
}
```
And that's it for this file. Now, let's come back to App.js and implement our hook.

Import useDragAndDrop from the hooks folder. and then destructure all the values from our hook. We will also need a file state to store the file.

```js
import React, { useState } from "react";
import "./App.css";
import useDragAndDrop from "./hooks/useDragAndDrop";

function App() {
  const [file, setFile] = useState<File>();

  const {
    dragOver,
    setDragOver,
    onDragOver,
    onDragLeave,
    fileDropError,
    setFileDropError,
  } = useDragAndDrop();

 return (
    <div className="container">
      <form>
        <label htmlFor="file">
          <h1>Select Or drop a file</h1>
        </label>
        <input type="file" name="file" id="file" />
      </form>
    </div>
}
```

Now let's specify the onDragOver and onDragLeave methods on our label like this. Please note that the onDrop function here is not related to our hook, but will be called when the file is dropped. We will create this function in the App.js itself.

We also add some conditional styling and conditional rendering. This will just change the border styling and the text inside the label once the file is being dragged over the label. (Look in the picture) below

 ```html
         <label
          htmlFor="file"
          onDragOver={onDragOver}
          onDragLeave={onDragLeave}
          onDrop={onDrop}
          style={{ border: `${dragOver ? "3px dashed yellowgreen" : ""}` }}
        >
          {file && <h1>{file.name}</h1>}
          {!file && (
            <h1 style={{ color: `${dragOver ? " yellowgreen" : ""}` }}>
              {!dragOver ? "Select Or Drop your File here..." : "Drop here..."}
            </h1>
          )}
        </label>
```

![Screenshot from 2021-08-19 12-54-10.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629357967591/Tut-Xg_dx.png)

Now, we will create the **onDrop()** and **fileSelect()** function for setting the file state after the file is dropped or selected.

```js
   const onDrop = (e: React.DragEvent<HTMLLabelElement>) => {
    e.preventDefault();

    setDragOver(false);

    const selectedFile = e?.dataTransfer?.files[0];

    if (selectedFile.type.split("/")[0] !== "image") {
      return setFileDropError("Please provide an image file to upload!");
    }

    setFile(selectedFile);
  };

  const fileSelect = (e: any) => {
    let selectedFile = e?.dataTransfer?.files[0];

    if (selectedFile.type.split("/")[0] !== "image") {
      return setFileDropError("Please provide an image file to upload!");
    }

    setFileDropError("");
  };
```

Mention the onChange handler on the input element.
`<input type="file" name="file" id="file" onChange={fileSelect} />`

Also, we need to conditionally render any error we have.
```js
 {fileDropError && (
    <span className="file-drop-error">{fileDropError}</span>
 )}
```

Final App.js looks like this.
```js
import React, { useState } from "react";
import "./App.css";
import useDragAndDrop from "./hooks/useDragAndDrop";

function App() {
  const {
    dragOver,
    setDragOver,
    onDragOver,
    onDragLeave,
    fileDropError,
    setFileDropError,
  } = useDragAndDrop();

  const [file, setFile] = useState<File>();

  const onDrop = (e: React.DragEvent<HTMLLabelElement>) => {
    e.preventDefault();

    setDragOver(false);

    const selectedFile = e?.dataTransfer?.files[0];

    if (selectedFile.type.split("/")[0] !== "image") {
      return setFileDropError("Please provide an image file to upload!");
    }

    setFile(selectedFile);
  };

  const fileSelect = (e: any) => {
    let selectedFile = e?.dataTransfer?.files[0];

    if (selectedFile.type.split("/")[0] !== "image") {
      return setFileDropError("Please provide an image file to upload!");
    }

    setFileDropError("");
  };

  return (
    <div className="container">
      <form>
        {fileDropError && (
          <span className="file-drop-error">{fileDropError}</span>
        )}
        <label
          htmlFor="file"
          onDragOver={onDragOver}
          onDragLeave={onDragLeave}
          onDrop={onDrop}
          style={{ border: `${dragOver ? "3px dashed yellowgreen" : ""}` }}
        >
          {file && <h1>{file.name}</h1>}
          {!file && (
            <h1 style={{ color: `${dragOver ? " yellowgreen" : ""}` }}>
              {!dragOver ? "Select Or Drop your File here..." : "Drop here..."}
            </h1>
          )}
        </label>
        <input type="file" name="file" id="file" onChange={fileSelect} />
      </form>
    </div>
  );
}

export default App;
```

### And That's it we have successfully created custom Drag & Drop hook!
I hope you liked the article and gained some knowledge as well. All the codes used are there in the github repository mentioned below.
Github Repo - [https://github.com/shaan71845/react-custom-drag-and-drop-hook](https://github.com/shaan71845/react-custom-drag-and-drop-hook)

Hello guys!! Recently, while working on a project, I came accross a situation where I needed to...

How to create a Custom Drag & Drop Hook in React!🔥

Hi guys!
So, couple of months back I wrote a blog "I created a VSCode theme" describing about the VS Code theme called "Martian Night" that I made. Fast forward to present, I am here to announce that I recreated my VS Code theme. But wait, what do I mean by "recreate" ?
Actually the thing is I wanted to update my theme, but for some reasons I was unable to release an update on the marketplace, so I had to unpublish the previous one and again publish the new one.

## What's new in this Theme??
There are lot of things which are new in this theme. Previously I had used only 2-3 colours for the syntax, but now I tried to introduce more colours to the syntax. Also, I introduced three variants of the theme - Normal, **Bold**, & _italics_.

### Normal 
![Normal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n53p01mo7a8ss65fiyo.png)

### Bold
![Bold](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u55v8lerydbphwmowbjo.png)

### Italics
![Italics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxi06tdpobkvvph8v8as.png)

Also, I changed the previous boring logo into something new!!
![Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34pu2kz5j21wj5qhmkac.png)

## Why did I upgrade?
The previous one had a lot of issues like lack of colours, high contrast colours and no italics or bold fonts used. This is because I was pretty new to creating VS code theme that time, so I decided to improve my theme, hence I created this one!

## How can you try it?
Below are some relevant links for you to try!!

Install it from here (Marketplace) - https://marketplace.visualstudio.com/items?itemName=shaanalam718.martian-night

GitHub Repo - https://github.com/shaan71845/martian-night-vscode-theme

Feel free to leave a ⭐on the repo!!
Feedbacks and comments are appreciated!!
Thank you!!

Hi guys! So, couple of months back I wrote a blog "I created a VSCode theme" describing about the VS...

I Recreated my VSCode Theme 🔥

I recently decided to re-design my portfolio in NextJs. So, I started researching around the web for some cool page transitions which I would like to have for my portfolio, and I came across something like this. (Similar to [Barba.js](https://barba.js.org))
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0k8j3meqxhesjluvkj17.gif)

So, I decided to figure out and create this transition. In this tutorial, I am going to explain the steps I took to create this nice page transition.
Let's start.

**Note -** In this example, I will only be talking about the CSS relevant to the animations. If you want the whole CSS as well, there is a github repo mentioned at the end of the tutorial.

## New project, who-hoo!!
First, we need to create a new NextJS project by typing the below command into your terminal.
```bash
npx create-next-app nextjs-page-transition-example
```
And now open your newly created project folder into your favourite Editor.

Type `npm run dev` in your terminal to start the dev server on PORT 3000. 

## Installing Framer motion
Type `npm install framer-motion --save` to install framer motion to your project.

## A little setup
Now that we have installed framer motion, we need to set something up. Open your **_app.js** in the pages directory and import **AnimatePresence** from framer-motion and wrap it around the main content like this.
```js
import "../styles/globals.css";
import { AnimatePresence } from "framer-motion";

function MyApp({ Component, pageProps, router }) {
  return (
    <AnimatePresence exitBeforeEnter>
      <Component {...pageProps} key={router.route} />
    </AnimatePresence>
  );
}

export default MyApp;
```
AnimatePresence helps to animate React components when they are removed from React tree. It kind of helps for making exit animations for components. The **exitBeforeEnter** prop on **AnimatePresence** tells framer-motion to remove the current component with animation and then start the animation for new component.

## Creating the pages
Now, we need to create different pages so that we can actually have transition animation between them. In this example, we are going to create just 3 simple pages. (Home, about, services).

Open **index.js** in the pages directory, and create a basic React component.
```js
function Home() {
  return (
    <main>
      <h1>Home Page</h1>
    </main>
  );
}

export default Home;
```
Now, we need to create two more files **about.js** and **services.js** like so.

```js
function Services() {
  return (
    <main>
      <h1>Services Page</h1>
    </main>
  );
}

export default Services;
```

```js
function Services() {
  return (
    <main>
      <h1>Services Page</h1>
    </main>
  );
}

export default Services;
```

## Creating the Navbar
Now that we have created three basic pages, we need navbar with links so that we could transition between pages.
Create a folder called **components** in the root directory and in that folder create a **Navbar.js** with the following content.

```js
import Link from "next/link";

export default function Navbar() {
  return (
    <nav className="navbar">
      <div className="container">
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
        <Link href="/services">Services</Link>
      </div>
    </nav>
  );
}
```
This is a basic navbar which will help to navigate between the pages. The **Link** is a built in nextjs module which will create a link in the DOM that will navigate to other pages.

Now, we need to import the Navbar into the pages we've created! So the final files should be looking something like these.
```js
function Home() {
  return (
    <main>
      <h1>Home Page</h1>
    </main>
  );
}
export default Home;
```
```js
function About() {
  return (
    <main>
      <h1>About Page</h1>
    </main>
  );
}

export default About;

```

```js
function Services() {
  return (
    <main>
      <h1>Services Page</h1>
    </main>
  );
}

export default Services;
```

## Animating pages - The fun Part
Let's understand the animation first. This animation is divided into two parts. The sliding-in animation on current page and sliding out on the next page. Take a look at the figure below to understand better.
Sliding in animation on page 1
![Sliding in](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tg0f8osmqxmjjzgkk5qz.gif)
Sliding out animation on page 2
![Sliding out](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e93jlrazd10iox8kv7gp.gif)

We need to animate two divs (one for sliding in and the other for sliding out animation) for every page we want to have animation for. We can create a component for these two divs, but adding these two divs to every page can be hectic, so we are going to create a **Higer Order Component** for this purpose.

## HOC
Create a folder called HOC and in that folder, create a file called **withTransition.js**. In this file, we are going to import motion from framer motion and also create a function that is going to return a new component with the animating divs. 
```js
import { motion } from "framer-motion";

const withTransition = (OriginalComponent) => {
  return () => (
    <>
      <OriginalComponent />
      <motion.div
        className="slide-in"
        initial={{ scaleX: 0 }}
        animate={{ scaleX: 0 }}
        exit={{ scaleX: 1 }}
        transition={{ duration: 1, ease: "easeInOut" }}
      />
      <motion.div
        className="slide-out"
        initial={{ scaleX: 1 }}
        animate={{ scaleX: 0 }}
        exit={{ scaleX: 0 }}
        transition={{ duration: 1, ease: "easeInOut" }}
      />
    </>
  );
};

export default withTransition;
```
```css
  .slide-in {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background: #066bb8;
    transform-origin: left;
  }

  .slide-out {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background: #066bb8;
    transform-origin: right;
  }
```
Now, we need to include this HOC in every page we want to have page transition for. For example, I want to have animations for all 3 of my pages so, I'd import **withTransition** in every page and pass the component within it like so.
```js
import Navbar from "../components/Navbar";
import withTransition from "../HOC/withTransition";

function Home() {
  return (
    <>
      <Navbar />
      <main>
        <h1>Home Page</h1>
      </main>
    </>
  );
}

export default withTransition(Home);
```

```js
import Navbar from "../components/Navbar";
import withTransition from "../HOC/withTransition";

function About() {
  return (
    <>
      <Navbar />
      <main>
        <h1>About Page</h1>
      </main>
    </>
  );
}

export default withTransition(About);
```
```js
import Navbar from "../components/Navbar";
import withTransition from "../HOC/withTransition";

function Services() {
  return (
    <>
      <Navbar />
      <main>
        <h1>Services Page</h1>
      </main>
    </>
  );
}

export default withTransition(Services);
```
## And that's it....🎊️
We have now completed the page transition. The demo and GitHub links are provided below
Demo - https://nextjs-transition-example.vercel.app/
GitHub repo - https://github.com/shaan71845/nextjs-page-transition-example

Feel free to leave a 🌠️
Thanks for reading!!

I recently decided to re-design my portfolio in NextJs. So, I started researching around the web for...

Create awesome Page Transitions in NextJS using Framer motion

Hi everyone!!
It's been too long since I wrote a post on dev.to, but hey, here I am back once again. I've been busy with my college stuff going on lately. Today I am going to talk about something that I thought was so hard (atleast for me) and amazing at the same time. I always wondered "How do they create a VS code theme/extension so wonderfully ??", and some days back I thought to give it a go and create something that I can be proud of!

So, I decided to create my own theme for VS Code. It's called **Martian Night**. (Don't worry, I will tell how I got the theme name idea). I watched some of the YouTube tutorials on how to create a vs code theme and got some idea. Basically, what I learned is that in order to create a vscode theme one has to edit a very large JSON file. At first, I was overwhelmed, but still I kept going. I thought may be not the whole JSON file, but I can definitely edit some of the settings in order to create a very basic theme. So I started reading VS Code extension API docs and setting colors for different components of the VS code as well as the tokens used in programming languages. I have done theming for HTML, CSS, JavaScript till now and I'll add more later.

### So, where did I get the theme idea 🤔️ ??
Have you ever seen **Sunset on planet Mars video captured by NASA's Curiosity Rover** on social media ?? I absolutely loved that video and that's where my theme is inspired from. The colors used in the theme as well as the name of the theme is inspired from that video. The theme uses a background of dark blue with light blue and white text on the foreground. Also, the color of the comments in the code is some what similar to the color of Martian soil i.e red.

Enough of the talk, let's take a look at the theme itself!!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hqsd825l0sqhz8fchwq.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l220q0plyy1q8c4x5t19.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12ppuks24shut12wcvsz.png)

I'd love you to install this theme and give your feedback, so that I can improve this in future !! Also, the GitHub Repo is mentioned below, just in case you want to contribute to this teme. Feel free to leave a 🌟️

GitHub Repo => https://github.com/shaan71845/martian-night-vscode-theme

Download the theme from here => https://marketplace.visualstudio.com/items?itemName=ShaanAlam.martian-night

My GitHub Profile => https://github.com/shaan71845

Hi everyone!! It's been too long since I wrote a post on dev.to, but hey, here I am back once again....

I created a VS Code theme 🔥️

Hey, Shaan here!
As we all know that tailwind CSS is gaining popularity nowadays, so I decided to give a shot and learn tailwind css. After learning a little bit and creating a landing page with tailwind, I found it awesome and decided to use tailwind for my future React projects. But hey! configuring Tailwind with React is not an easy task. So, I thought why not create a template repository so that beginner ReactJS developers can use to quickly configure their projects. In this article, I will show exactly how to configure your ReactJS + tailwind css project & also how to create a template repository which you can use.

# Creating a react app
Start by creating a new react app if you haven't already by typing using create-react-app.
```bash
npx create-react-app cra-tailwind-template
cd cra-tailwind-template
```

# Setting up Tailwind CSS
Install Tailwind CSS by typing - 
```bash
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```
### Configure Craco
Install and configure craco by typing - 
```bash
npm install @craco/craco
```
Once it is installed, edit your 'scripts' section of your **package.json** file.
```json
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
```
Next, we need to create a craco.config.js file at the root of your project and add the __tailwindcss__ and __autoprefixer__ as PostCSS Plugins.
```javascript
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}
```
### Creating configuration file
Next, we have to generate our __tailwind.config.js__ file like this - 
```bash
npx tailwind init
```
This will create a __tailwind.config.js__ file at the root of your project.
### Edit tailwind.config.js file
Next, we have to edit our tailwind.config.js file. Configure 'purge' option with the paths of your components so that any unused styles in the production builds.
```javascript
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, 
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```
### Include Tailwind in your CSS
Open **src/index.css** and include the following by using the @tailwind directive.
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Finally include your __index.css__ in your **src/index.css** file.
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; // include index.css
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
```
And that's it. This is how we configure ReactJS with Tailwind CSS.
# Final Part - Creating a template repo for later use
In this section, I'll show you how to create a template repo which you can use in future so that you won't have to setup from the scratch.
### Initialize a git repository.
Type the following command to create an empty git repo.
```bash
git init
```
### Commit changes
Add the files to the staging area, and the commit the changes.
```bash
git add .
git commit -m 'initial commit'
```
### Moving code to GitHub.
Log into your GitHub account and create a new repo y click the **"+"** icon on the top right hand corner. Provide a name for your repo (for example - react-tailwind-template)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/we00d6cs1r4d4751qqj3.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r2qpxo9tyoi7rrxyq9mk.png)
After giving name, you will see something like this.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4ise4saflx7q4rizo0pn.png)
Now, type the following commands in your terminal
```git
git remote add origin https://github.com/shaan71845/react-tailwind-template.git
git push -u origin main
```
You have successfully uploaded your code on GitHub!!
# Creating template
After following the above steps, you will be redirected to your repo. Click on the **Settings** tab and check the **Template repository** option.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r8tdvn907ekbwqbe5o2i.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0cak77kmjyc3p53uxtpn.png)

# OR
You can use my Template repo to configure your ReactJS + Tailwind CSS Project.
Link 👇
[https://github.com/shaan71845/cra-tailwind-template](https://github.com/shaan71845/cra-tailwind-template)

Cick on **Use as template** to use this template.
Feel free to leave a ⭐




Hey, Shaan here! As we all know that tailwind CSS is gaining popularity nowadays, so I decided to giv...

Setup your ReactJS + Tailwind CSS Project by creating a template 🔥

![Cover Image](https://dev-to-uploads.s3.amazonaws.com/i/59uxt3nuilkgv570acco.gif)

Hello!
I recently learned using Firebase with ReactJS and thought of implementing my knowledge by creating some project. Since, I wanted to implement my firebase knowledge fast, I decided to make a very simple chat box instead of making very highly complex App which would take ages to complete.

In this post, I will share exactly how I made the live/real-time chatbox with Google OAuth. For this tutorial, we will not be using Context API or redux for holding state. We will be holding the state in the component's state. 

## Creating a new react App.
```bash
npx create-react-app live-chatbox
```
## Installing necessary dependencies
```
npm install firebase-tools -g
npm install firebase
```

## Setting up a Firebase project
1. Follow [this](https://www.youtube.com/watch?v=vUe91uOx7R0) Youtube tutorial to learn how to create a new firebase project.
2. Copy the config from the firebase console and create a new file **"firebase/config.js"** and paste in it. It would look somthing like this. (You can also copy your config data into .env.local file and use it here.)
```javascript
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "your apiKey",
  authDomain: "your authDomain",
  projectId: "your projectId",
  storageBucket: "your storageBucket",
  messagingSenderId: "your messagingSenderId",
  appId: "your appId",
  measurementId: "your measurementId",
};
``` 
3.Now we just have to initialize and export some variables in this file. First of all, import firebase from **firebase** package and then initialise firebase app using `firebase.intiliazeApp(config)`. Also create and export two variables to initialize authentication and firestore. The final code would look like this.
```javascript
import firebase from "firebase";

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "your apiKey",
  authDomain: "your authDomain",
  projectId: "your projectId",
  storageBucket: "your storageBucket",
  messagingSenderId: "your messagingSenderId",
  appId: "your appId",
  measurementId: "your measurementId",
};

// initialize firebase
const firebaseApp = firebase.initializeApp(firebaseConfig);

// initialize authentication
export const auth = firebase.auth();
//initialize firestore
export const db = firebase.firestore();
```

## Creating the App UI
For this project, we will be having a very similar app layout which you can see below.
![App Structure](https://dev-to-uploads.s3.amazonaws.com/i/9nn7nr7pohjdf4qufuqy.png)

1. Create a components folder (inside src folder) and create two components, __Chat.js__ and __Message.js__. Also create corresponding .css files. The folder structure should now look something like this.
![Folder structure](https://dev-to-uploads.s3.amazonaws.com/i/vfzdc0el2i4201zq1u4k.png)
2. Let's edit App.js file and write some actual code. In this file, we will be rendering components on the basis of whether user is logged in or not. If the user if logged in, then render the Chat component, else render the Login button in the view. Also, as mentioned earlier we will be storing user information into the component state. 

```javascript
import { useState } from "react";
import Chat from "./components/Chat";
import "./App.css";

const App = () => {
  const [user, setUser] = useState(null);

  return user !== null ? (
    <Chat user={user} />
  ) : (
    <div className="login">
      <h1>Login</h1>
      <button>Login with Google</button>
    </div>
  );
};

export default App;

```
3.Now let's edit the **Chat.js** and **Message.js** file to make the UI look complete.
```javascript
import { useState, useRef } from "react";
import Message from "./Message";
import "./Chat.css";



const Chat = ({ user }) => {
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState([]);
  const scrollRef = useRef();

  return (
    <div className="chat__box">
      <div className="chat__header">
        <img src={user.photoURL} alt="User avatar" />
        <p>{user.displayName}</p>
      </div>
      <div className="chat__messages">
        {messages.map((message) => (
          <Message key={message.id} message={message} />
        ))}
        <div
          ref={scrollRef}
          style={{ float: "left", clear: "both", paddingTop: "4rem" }}
        ></div>
      </div>
      <div className="chat__input">
        <form>
          <input
            type="text"
            placeholder="Type a message here"
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
          <button>&rarr;</button>
        </form>
      </div>
    </div>
  );
};

export default Chat;
```
4.Now let's edit the Message.js to finally complete our App UI.
```javascript

import "./Message.css";

const Message = ({ message }) => {
  return (
    <div className="chat__message">
      <img src={message.user.photoURL} alt="User avatar" />
      <p>{message.message}</p>
    </div>
  );
};

export default Message;

```
## Firebase (The fun part 🔥)
1. Now we will be coding the authentication and message sending part. In our App.js file,import **firebase** from firebase package and **db** variable from the config file create a **loginWithGoogle()** function and attach it as an onClick listener to the button. Also we will use **useEffect** hook to run a function everytime when the page renders. This function will log us back into the google account on page refresh. The code for final App.js is something like this.

```javascript
import { useState, useEffect } from "react";
import Chat from "./components/Chat";
import { auth } from "./firebase/config";
import firebase from "firebase";
import "./App.css";

const App = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    auth.onAuthStateChanged(user => {
      if (user) {
        setUser(user);
      }
    })
  }, [])

  const loginWithGoogle = () => {
    const provider = new firebase.auth.GoogleAuthProvider();
    auth.signInWithPopup(provider).then((result) => {
      setUser(result.user);
    });
  };

  return user !== null ? (
    <Chat user={user} />
  ) : (
    <div className="login">
      <h1>Login</h1>
      <button onClick={loginWithGoogle}>Login with Google</button>
    </div>
  );
};

export default App;
```
2.In our Chat component, let's add a useEffect() hook to read the firestore database on every change and take a snapshot of it so that we can retreive the new data in real-time. 
```javascript
import { useState, useEffect, useRef } from "react";
import { db } from "../firebase/config";
import firebase from "firebase";
import "./Chat.css";
import Message from "./Message";

const Chat = ({ user }) => {
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState([]);
  const scrollRef = useRef();

  useEffect(() => {
    db.collection("messages")
      .orderBy("timestamp", "asc")
      .onSnapshot((snapshot) => {
        setMessages(
          snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
        );
      });
  }, []);

  return (
    <div className="chat__box">
      <div className="chat__header">
        <img src={user.photoURL} alt="User avatar" />
        <p>{user.displayName}</p>
      </div>
      <div className="chat__messages">
        {messages.map((message) => (
          <Message key={message.id} message={message} />
        ))}
        <div
          ref={scrollRef}
          style={{ float: "left", clear: "both", paddingTop: "4rem" }}
        ></div>
      </div>
      <div className="chat__input">
        <form onSubmit={sendMessages}>
          <input
            type="text"
            placeholder="Type a message here"
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
          <button>&rarr;</button>
        </form>
      </div>
    </div>
  );
};

export default Chat;
```
3.Now our app is ready to recieve messages, and now let's create the messaging functionality. For that, let's create a sendMessage() function that will create a message object (only if input is not empty) and then add it to the firebase firestore db. It will also scroll the view accordingly down to the bottom after every message. Our final code in Chat component will look like this.
```javascript
import { useState, useEffect, useRef } from "react";
import { db } from "../firebase/config";
import firebase from "firebase";
import "./Chat.css";
import Message from "./Message";

const Chat = ({ user }) => {
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState([]);
  const scrollRef = useRef();

  useEffect(() => {
    db.collection("messages")
      .orderBy("timestamp", "asc")
      .onSnapshot((snapshot) => {
        setMessages(
          snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
        );
      });
  }, []);

  const sendMessages = (e) => {
    e.preventDefault();

    if (input !== "") {
      const newMessage = {
        message: input,
        user: { displayName: user.displayName, photoURL: user.photoURL },
        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
      };

      db.collection("messages").add(newMessage);

      setInput("");

      scrollRef.current.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <div className="chat__box">
      <div className="chat__header">
        <img src={user.photoURL} alt="User avatar" />
        <p>{user.displayName}</p>
      </div>
      <div className="chat__messages">
        {messages.map((message) => (
          <Message key={message.id} message={message} />
        ))}
        <div
          ref={scrollRef}
          style={{ float: "left", clear: "both", paddingTop: "4rem" }}
        ></div>
      </div>
      <div className="chat__input">
        <form onSubmit={sendMessages}>
          <input
            type="text"
            placeholder="Type a message here"
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
          <button>&rarr;</button>
        </form>
      </div>
    </div>
  );
};

export default Chat;
```
And now our app is finally ready to be published.

Note - All the **.css** files can be found in the GitHub repo mentioned below.

GitHub Repo 👇
[https://github.com/shaan71845/live-chatbox](https://github.com/shaan71845/live-chatbox)

Live Demo 👇
[https://live-chatbox-26e1b.web.app/](https://live-chatbox-26e1b.web.app/)

Hello! I recently learned using Firebase with ReactJS and thought of implementing my knowledge by c...

My Articles