

Alright lads, this will be a quick one. I want to add the views count functionality on my personal portfolio website's blog section.

![ready.gif](https://media3.giphy.com/media/0DYipdNqJ5n4GYATKL/giphy.gif?cid=ecf05e47cyftq8cfvkwqriyg5md5zc2irw1cb9u5fque0nbk&rid=giphy.gif&ct=g)

Expected behavior:
-   Blogs Page : List of blogs -> Show count.
-  Blog Page : Particular Article -> Show count and  Increment count.

How to achieve:
- Use supabase to store count by slug
- Stored procedure to increment count

Tools that I'll need:
- [supabase](https://www.npmjs.com/package/@supabase/supabase-js) : open source firebase alternative 
- [swr](https://www.npmjs.com/package/swr) : data fetching

##  Setting up supabase table :
Create a table `views` with schema like such:
- slug -> text -> primary key
- created_at -> timestamp -> now()
- count ->  int2 

## Updating `count`:
- Fetch count
- Increment one
- Fetch count again

Now we can reduce this to one db call using stored procedures:
![stored-procedure.png](https://imgur.com/S8JB0LC.png)
```sql
create function increment (slug_text text)
returns void as
$$
update views
set count = count + 1
where slug = slug_text;
$$
language sql volatile;
```
## In NextJs:
We'll define a route for ease:
	- /api/view/{slug}
and then we'll use the `POST` request to register a view and `GET` to increment the view count.
Our handler code will look like this:
views.ts
```ts
import { createClient, PostgrestError } from "@supabase/supabase-js";
const supabase = createClient(
process.env.SUPABASE_URL,
process.env.SUPABASE_KEY
);
interface SupabaseResult {
	data?: { count: number };
	error?: PostgrestError;
}
///
const getViews = async (slug: string): Promise<number> => {
const { data: views, error }: SupabaseResult = await supabase
.from("views")
.select(`count`)
.match({ slug: slug })
.single();
if (error && error.details.includes(`0 rows`)) {
	const { data, error }: SupabaseResult = await supabase
	.from(`views`)
	.insert({ slug: slug, count: 1 }, { returning: `representation` })
	.single();
	return data.count;
	}
	if (!views) {
	return 0;
	}
	return views.count;
	};
///
	const registerView = async (slug: string): Promise<void> => {
	const { data, error } = await supabase.rpc("increment", {
	slug_text: slug,
	});
};
export { getViews, registerView };
```
- /api/view/[slug].ts
```ts
// /api/view/[slug].ts
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import { getViews, registerView } from "lib/views";
import type { NextApiRequest, NextApiResponse } from "next";
interface Data {
	message?: string;
	status?: number;
	count?: number;
}

///
export default async function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
): Promise<void> {
const slug = req.query.slug.toString();
///
if (!slug) {
	return res.status(400).json({ message: `invalid slug` });
}
if (req.method == `POST`) {
	await registerView(slug);
}
const count = await getViews(slug);
return res.status(200).json({ count: count });
}
```
## ViewCounter Component
 - view_counter.tsx
 ```ts
import fetcher from "lib/fetcher";
import { Views } from "lib/types";
import { useEffect } from "react";
import useSWR from "swr";

interface Props {
	slug: string;
}

const ViewCounter = ({ slug }: Props) => {
const { data } = useSWR<Views>(`/api/views/${slug}`, fetcher);
useEffect(() => {
	const registerView = () =>
	fetch(`/api/views/${slug}`, {
		method: "POST",
	});
	registerView();
}, [slug]);

return (
	<span>{`${
	(data?.count ?? 0) > 0 ? data.count.toLocaleString() :"–––"
	} views`}</span>
	);
};

export default ViewCounter;
 ```
 
 Our views in action:
 ![view_counter.png](https://imgur.com/0qw4uen.png)
 ![view_count.png](https://imgur.com/0lTteEJ.png)
 
 The code of this project lives at : https://github.com/100lvlmaster/100lvlmaster.in 
 ---
You can find me at: https://100lvlmaster.in


Alright lads, this will be a quick one. I want to add the views count functionality on my personal...

Adding view count to your Nextjs Blog

Navin Kodag

This the continuation of the 5chan project : we've already discussed the Design and API
So for the final step I'll create the frontend.

The flow:
- New user opens homepage / app
- Gets assigned a random user id until clears data
- Generate random Avatars using @dicebar/avatars
- Can create posts / delete own posts
- Look through posts timeline
- Reply to posts



Now, we'll init a nextjs app and install the dependencies we'll need:
- Chakra-UI - Components
- swr - Data fetching
- zustand - state management
- @dicebear/avatars - generating avatars
- formik - manage, validate post create form
```bash
# Get the nextjs app template
npx create-next-app 5chan --typescript
cd 5chan
pnpm install
# The chakra-ui UI library, icons for chakra-ui & swr 
pnpm add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4 @chakra-ui/icons swr zustand @dicebear/avatars @dicebear/micah formik
```

![setup-project.png](https://imgur.com/WN7mXLD.png)

- To setup chakra-ui, you'll have to wrap the app with ChakraProvider like so:
```tsx
import { AppProps } from 'next/app';
import { ChakraProvider } from '@chakra-ui/react';
import '@/styles/globals.css';

export default function MyApp({ Component, pageProps }: AppProps) {
return (
	<ChakraProvider>
		<Component {...pageProps} />
	</ChakraProvider>
	);
}
```
- The types.ts for consistent structures:
```ts
// types.ts
//User State
export interface UserStore {
user: User | undefined;
setUser: (user: User) => void;
}
// User Object
export interface User {
id: string;
avatar: string;
}
// Posts
export interface Post {
CreatedAt?: Date;
UpdatedAt?: Date;
DeletedAt?: boolean;
ID?: string;
title: string;
author: string;
body: string;
replies?: Reply[];
}
// Post Reply
export interface Reply {
CreatedAt?: Date;
UpdatedAt?: Date;
DeletedAt?: boolean;
ID?: string;
author: string;
body: string;
postId: string;
}
```

- Generating random user and avatar data then storing them in LocalStorage for later use :
```typescript
//user.ts
import { customAlphabet } from 'nanoid/async';
import { User } from './types';
import { createAvatar } from '@dicebear/avatars';
import * as style from '@dicebear/micah';

const userKey = 'currentUid';

const createUser = async (): Promise<User> => {
const nanoid = customAlphabet('0123456789', 10);
const id = await nanoid();
const avatar = createAvatar(style, {
seed: 'id',
dataUri: true,
});
const user: User = { id, avatar };
localStorage.setItem(userKey, JSON.stringify(user));
return user;
};

export const getUser = async (): Promise<User> => {
let result = localStorage.getItem(userKey);
let user: User;
if (!result) {
return await createUser();
}
user = JSON.parse(result) as User;
return user;
};
```

- The great thing about zustand is that you don't have the wrap the entire app inside a context to use it. It can stay away from the UI code as small stores. So it's easy to use.
```typescript
//stores.ts
import create from 'zustand';
import { User, UserStore } from './types';
  
export const userStore = create<UserStore>((set) => ({
user: undefined,
set((state) => {
	state.user = user;
	}),
}));
```

- Now the API requests to `POST`& `GET` replies:

```typescript
//replies.ts
import { Reply } from './types';

///
export const fetchReplies = async (url: string):Promise<Reply[]> => {
const result = await fetch(url);
if (result.status >= 400) {
	return [];
}
return (await result.json()) as Reply[];
};

///
export const postReply = async (reply: Reply): Promise<Reply | undefined> => {
const apiUrl = `${process.env.NEXT_PUBLIC_API_URL!}/api/v1/replies`;
const apiKey = process.env.NEXT_PUBLIC_API_KEY;
if (!apiKey) {
	return;
}
const req: RequestInit = {
method: `POST`,
headers: { 'Content-Type': 'application/json', Authorization: apiKey },
body: JSON.stringify(reply),
};
const result = await fetch(apiUrl, req);
if (result.status >= 400) {
return;
}
return (await result.json()) as Reply;
};
```

- The API calls for `POST`ing, `GET` ing & `DELETE`ing  posts:
```typescript
import { Post } from './types';

///
export const fetchPosts = async (url: string): Promise<Post[]> => {
const result = await fetch(url);
if (result.status >= 400) {
	return [];
}
return (await result.json()) as Post[];
};

export const fetchPostById = async (url: string): Promise<Post | undefined> => {
const result = await fetch(url);
if (result.status >= 400) {
	return;
	}
return (await result.json()) as Post;
};

///
export const createPost = async (post: Post): Promise<Post | undefined> => {
const apiUrl = `${process.env.NEXT_PUBLIC_API_URL!}/api/v1/posts`;
const apiKey = process.env.NEXT_PUBLIC_API_KEY;
if (!apiKey) {
	return;
}
const req: RequestInit = {
method: `POST`,
headers: { 'Content-Type': 'application/json', Authorization: apiKey },
body: JSON.stringify({ ...post }),
};
const result = await fetch(apiUrl, req);
if (result.status >= 400) {
	return;
}
	return (await result.json()) as Post;
};

///
export const deletePost = async (url: string): Promise<boolean> => {
const apiKey = process.env.NEXT_PUBLIC_API_KEY;
const req: RequestInit = {
method: `DELETE`,
headers: { Authorization: apiKey! },
};
const result = await fetch(url, req);
if (result.status >= 400) {
	return false;
}
return true;
};
```

![phew.gif](https://media.giphy.com/media/jIv6pfqKiIvHPYZO6y/giphy.gif?cid=ecf05e47j5ul5m7839tdh6yoq8eex6vruvzvwij1xryb0ky7&rid=giphy.gif&ct=g)

OK now comes the final boring part, designing the UI. but it's ok we only have three pages to code:
- Index page - intro, how to use.
- Home page  - timeline of posts, discussions.
- Posts page : dynamic page according to post id.

You may design them however you want but if you still want to look over the code you can find the source code at:
-  layout
	-  [container.tsx](https://github.com/100lvlmaster/5chan/blob/master/layout/container.tsx)
-  components
	-  [post_form_button.tsx](https://github.com/100lvlmaster/5chan/blob/master/components/post_form_button.tsx)
- pages
	- [index.tsx](https://github.com/100lvlmaster/5chan/blob/master/pages/index.tsx)
	- [home.tsx](https://github.com/100lvlmaster/5chan/blob/master/pages/home.tsx)
	- posts
		- [[id].tsx](https://github.com/100lvlmaster/5chan/blob/master/pages/posts/%5Bid%5D.tsx)

That's about all we need right now.
After running the project and deploying it. 
Here are the screenshots ✨✨

![homepage.png](https://imgur.com/qWE4dkN.png)
![timelinepage.png](https://imgur.com/wF8Qxmb.png)
![postpage.png](https://imgur.com/6luHMRA.png)

This project is live at:
https://5chan.vercel.app/

The source code of this project lies at: https://github.com/100lvlmaster/5chan-go
---- 
You can find me at:
Website 
https://100lvlmaster.in
Github
https://github.com/100lvlmaster


This the continuation of the 5chan project : we've already discussed the Design and API So for the...

5chan - The 4chan clone with NextJs

<p>All of us have and might go through this problem at some point in our careers where we've got multiple github account for our personal, work and freelancing projects.</p>

<p>Before a couple of months ago I would used two variations of VS code in my machine. One was the <a href="https://code.visualstudio.com/">Visual Studio Code</a> and other was <a href="https://vscodium.com/">VScodium </a>.<br>
But that was a work around until I found out that you can add your username and password/ Personal Auth Token when you clone the repo. After that you can start working normally and git will take care of permissions.<br>
We need the Personal Auth Token because github has discountinued using our traditional passwords. And PATs can expire, they can also be given selective permissions.</p>

<p>So this is how it works, when you're cloning a repo just put your username:PAT <br>
example:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight shell"><code>git clone https://<span class="o">{</span>username<span class="o">}</span>:<span class="o">{</span>PAT<span class="o">}</span>@github.com/<span class="o">{</span>username/org<span class="o">}</span>/<span class="o">{</span>repo<span class="o">}</span>
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<p>Yes, it was as simple as that.</p>

<p>You can find me at <a href="https://100lvlmaster.in">https://100lvlmaster.in</a></p>




All of us have and might go through this problem at some point in our careers where we've got multiple github account for our personal, work and freelancing projects.

Before a couple of months ago I would used two variations of VS code in my machine. One was the [Visual Studio Code](https://code.visualstudio.com/) and other was [VScodium ](https://vscodium.com/).
But that was a work around until I found out that you can add your username and password/ Personal Auth Token when you clone the repo. After that you can start working normally and git will take care of permissions.
We need the Personal Auth Token because github has discountinued using our traditional passwords. And PATs can expire, they can also be given selective permissions.

So this is how it works, when you're cloning a repo just put your username:PAT 
example:
```bash
git clone https://{username}:{PAT}@github.com/{username/org}/{repo}
```

Yes, it was as simple as that.

You can find me at https://100lvlmaster.in

All of us have and might go through this problem at some point in our careers where we've got...

Managing multiple github accounts on your machine

<ul>
<li>Seeding NestJs with Prisma And Faker</li>
</ul>

<p>I've been working on this college project and I chose <a href="https://nestjs.com/">NestJs</a> for the backend. You could just <a href="https://hasura.io/">Hasura</a> or other BaaS platforms for small projects. But I wanted to learn NestJs.</p>

<p><em>Note: Usage with other ORMs might differ but will be almost the same because we'll be using a script.</em></p>

<h2>
  <a name="what-youll-need" href="#what-youll-need">
  </a>
  What you'll need:
</h2>

<ul>
<li>
<p>NestJs template for existing project setup with prisma as the default ORM<br>
As someone once said.</p>

<blockquote>
<p><em>ez commands got brrrr</em>.</p>
</blockquote>

<ul>
<li>For NestJs
</li>
</ul>


</li>
</ul>

<div class="highlight js-code-highlight">
<pre class="highlight shell"><code>git clone https://github.com/nestjs/typescript-starter.git project
<span class="nb">cd </span>project
yarn 
yarn add <span class="nt">-D</span> prisma
npx prisma init
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>





<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>// prisma/scheme.prisma

datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}

generator client {
provider = "prisma-client-js"
}

model User {
id Int @id @default(autoincrement())
name String
email String @unique
password String
}
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<ul>
<li>env("DATABASE_URL") is set in .env file</li>
</ul>

<p>After that run :<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight shell"><code>yarn prisma generate
yarn prisma migate dev init
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3v7U89eX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/Ns1ne5A.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3v7U89eX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/Ns1ne5A.png" alt="Migrate.png" loading="lazy"></a><br>
Now:<br>
onto the actual seeder using <a href="https://github.com/Marak/Faker.js">faker</a> for generating random data and <a href="https://www.npmjs.com/package/dotenv">dotenv</a> to initialize environment variables :<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight shell"><code>yarn add <span class="nt">-D</span> faker dotenv
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<p>Now create the script:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight typescript"><code><span class="c1">// prisma/seed.ts</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">PrismaClient</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@prisma/client</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span class="nx">faker</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">faker</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="o">*</span> <span class="k">as</span> <span class="nx">dotenv</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">dotenv</span><span class="dl">'</span><span class="p">;</span>

<span class="kd">const</span> <span class="nx">prisma</span>  <span class="o">=</span> <span class="k">new</span> <span class="nx">PrismaClient</span><span class="p">();</span>

<span class="kd">const</span> <span class="nx">fakerUser</span> <span class="o">=</span> <span class="p">():</span> <span class="kr">any</span> <span class="o">=&gt;</span> <span class="p">({</span>
<span class="na">name</span><span class="p">:</span> <span class="nx">faker</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">firstName</span><span class="p">()</span> <span class="o">+</span> <span class="nx">faker</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">lastName</span><span class="p">(),</span>
<span class="na">email</span><span class="p">:</span> <span class="nx">faker</span><span class="p">.</span><span class="nx">internet</span><span class="p">.</span><span class="nx">email</span><span class="p">(),</span>
<span class="na">password</span><span class="p">:</span> <span class="nx">faker</span><span class="p">.</span><span class="nx">internet</span><span class="p">.</span><span class="nx">password</span><span class="p">(),</span>
<span class="p">});</span>

<span class="k">async</span> <span class="kd">function</span> <span class="nx">main</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">fakerRounds</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
<span class="nx">dotenv</span><span class="p">.</span><span class="nx">config</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Seeding...</span><span class="dl">'</span><span class="p">);</span>
<span class="c1">/// --------- Users ---------------</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">fakerRounds</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">await</span> <span class="nx">prisma</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">create</span><span class="p">({</span> <span class="na">data</span><span class="p">:</span> <span class="nx">fakerUser</span><span class="p">()</span> <span class="p">});</span>
<span class="p">}</span>
<span class="p">};</span>



<span class="nx">main</span><span class="p">()</span>
<span class="p">.</span><span class="k">catch</span><span class="p">((</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">e</span><span class="p">))</span>
<span class="p">.</span><span class="k">finally</span><span class="p">(</span><span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
<span class="k">await</span> <span class="nx">prisma</span><span class="p">.</span><span class="nx">$disconnect</span><span class="p">();</span>
<span class="p">});</span>

</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<ul>
<li>Add the seeder to our <code>package.json</code> for ease of use:
</li>
</ul>

<div class="highlight js-code-highlight">
<pre class="highlight json"><code><span class="p">{</span><span class="w">
</span><span class="err">...</span><span class="w">
</span><span class="nl">"scripts"</span><span class="p">:{</span><span class="w">
</span><span class="err">...</span><span class="w">
</span><span class="nl">"seed"</span><span class="p">:</span><span class="w"> </span><span class="s2">"ts-node prisma/seed.ts"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="err">...</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<ul>
<li>And then we run the seeder:
</li>
</ul>

<div class="highlight js-code-highlight">
<pre class="highlight shell"><code>yarn seed
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KeQuAOiv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/BXONdpJ.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KeQuAOiv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/BXONdpJ.png" alt="seed.png" loading="lazy"></a></p>

<p>✨ That's it ✨<br>
The preview of the database:<br>
<a href="https://res.cloudinary.com/practicaldev/image/fetch/s--268PFisB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/pT77pr7.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--268PFisB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/pT77pr7.png" alt="db-preview.png" loading="lazy"></a></p>

<ul>
<li>Source code :  <a href="https://github.com/100lvlmaster/nestjs-prisma-seeder-template">https://github.com/100lvlmaster/nestjs-prisma-seeder-template</a>
</li>
</ul>

<blockquote>
<p>(If you're a beginner) don't be alarmed at the number of packages because devDependencies aren't bundled in the production build :]</p>
</blockquote>

<p>You can find me at:<br>
<a href="https://100lvlmaster.in">https://100lvlmaster.in</a></p>



- Seeding NestJs with Prisma And Faker

I've been working on this college project and I chose [NestJs](https://nestjs.com/) for the backend. You could just [Hasura](https://hasura.io/) or other BaaS platforms for small projects. But I wanted to learn NestJs.

_Note: Usage with other ORMs might differ but will be almost the same because we'll be using a script._


## What you'll need:
 -  NestJs template for existing project setup with prisma as the default ORM
 As someone once said.
> _ez commands got brrrr_.

- For NestJs
```bash
git clone https://github.com/nestjs/typescript-starter.git project
cd project
yarn 
yarn add -D prisma
npx prisma init
```

```prisma
// prisma/scheme.prisma

datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}

generator client {
provider = "prisma-client-js"
}

model User {
id Int @id @default(autoincrement())
name String
email String @unique
password String
}
```
- env("DATABASE_URL") is set in .env file

After that run :
```bash
yarn prisma generate
yarn prisma migate dev init
```
![Migrate.png](https://imgur.com/Ns1ne5A.png)
Now:
onto the actual seeder using [faker](https://github.com/Marak/Faker.js) for generating random data and [dotenv](https://www.npmjs.com/package/dotenv) to initialize environment variables :
```bash
yarn add -D faker dotenv
```

Now create the script:
```typescript
// prisma/seed.ts
import { PrismaClient } from '@prisma/client';
import * as faker from 'faker';
import * as dotenv from 'dotenv';

const prisma  = new PrismaClient();

const fakerUser = (): any => ({
name: faker.name.firstName() + faker.name.lastName(),
email: faker.internet.email(),
password: faker.internet.password(),
});

async function main() {
const fakerRounds = 10;
dotenv.config();
console.log('Seeding...');
/// --------- Users ---------------
for (let i = 0; i < fakerRounds; i++) {
await prisma.user.create({ data: fakerUser() });
}
};

  

main()
.catch((e) => console.error(e))
.finally(async () => {
await prisma.$disconnect();
});

```
- Add the seeder to our `package.json` for ease of use:
```json
{
...
"scripts":{
...
"seed": "ts-node prisma/seed.ts"
}
...
}
```
- And then we run the seeder:
```bash
yarn seed
```
![seed.png](https://imgur.com/BXONdpJ.png)

✨ That's it ✨
The preview of the database:
![db-preview.png](https://imgur.com/pT77pr7.png)

- Source code :  https://github.com/100lvlmaster/nestjs-prisma-seeder-template

> (If you're a beginner) don't be alarmed at the number of packages because devDependencies aren't bundled in the production build :]

You can find me at:
https://100lvlmaster.in

Seeding NestJs with Prisma And Faker   I've been working on this college project and I chose NestJs...

Seeding NestJs with Prisma And Faker

<p>I've been using sveltekit and svelte for over a year now. I'm also waiting for it to be matured enough to beat NextJs in terms of community. But I like them both.</p>

<p>So, on this weekend I wanted to turn one of my SvelteKit projects into a PWA. When I wanted to do the same with NextJs projects there were a lot of tutorials. But I couldn't find many guides for svelte beginners.</p>

<p>That's because svelte has pwa functionality built into it.</p>

<h2>
  <a name="note-" href="#note-">
  </a>
  Note !
</h2>

<h3>
  <a name="basic-things-for-all-pwas" href="#basic-things-for-all-pwas">
  </a>
  Basic things for all PWAs
</h3>

<ul>
<li> A website</li>
<li> manifest.json [ basic icons,names,shortcuts]</li>
<li> service-worker [ for offline cache ]</li>
</ul>

<p>So let's get on with it.</p>

<p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fls2otyqir0wlr4gahnur.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fls2otyqir0wlr4gahnur.gif" alt="lets-go.gif" loading="lazy"></a></p>

<h2>
  <a name="first" href="#first">
  </a>
  First:
</h2>

<p>We'll create a demo Sveltekit project:</p>

<div class="highlight js-code-highlight">
<pre class="highlight shell"><code>

npm init svelte@next my-app


</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>
<p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FLIfwJFA.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FLIfwJFA.png" alt="create.png" loading="lazy"></a></p>

<p>Then we'll choose a simple config in vite for the sake of this article:</p>

<p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FuyTDDVf.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FuyTDDVf.png" alt="config.png" loading="lazy"></a></p>

<p>Choose typescript because <code>#typescriptgang</code>:</p>

<p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FVePlaaP.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FVePlaaP.png" alt="svelte-kit-config.png" loading="lazy"></a></p>

<p>Now we have a demo project set up with typescript, it will be straight-forward from here on:</p>

<p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FgZLK7Jh.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FgZLK7Jh.png" alt="note.png" loading="lazy"></a></p>

<p>Let's get into our directory:</p>
<div class="highlight js-code-highlight">
<pre class="highlight shell"><code>

<span class="nb">cd </span>my-app


</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>
<p>And run:</p>
<div class="highlight js-code-highlight">
<pre class="highlight shell"><code>

yarn


</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>
<p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2Fv5RgR26.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2Fv5RgR26.png" alt="yarn-output.png" loading="lazy"></a></p>

<p>After that,</p>

<ul>
<li>In the /static directory, We'll create a manifest.json.</li>
<li>When svelte compiles the whole application, it copies static files over to the build folder.</li>
</ul>

<p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FWokCIZk.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FWokCIZk.png" alt="manifest.json" loading="lazy"></a></p>


<div class="ltag_gist-liquid-tag">
  <script id="gist-ltag" src="https://gist.github.com/100lvlmaster/3a7d37a400897114d5c64d88b81e4acc.js"></script>
</div>



<p>Then we'll refer our <code>manifest.json</code> in <code>src/app.html</code>.</p>

<p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2Fs43YGuD.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2Fs43YGuD.png" alt="app.html" loading="lazy"></a></p>

<p>And finally we'll create our <code>src/service-worker.ts</code></p>

<p><em>Svelte will automatically detect the service-worker in the src folder's root and then register our service worker during build</em>.<br>
<em>Isn't that neat?</em></p>

<p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2F0aLDOHU.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2F0aLDOHU.png" alt="service-worker.ts" loading="lazy"></a></p>


<div class="ltag_gist-liquid-tag">
  <script id="gist-ltag" src="https://gist.github.com/100lvlmaster/8e966302b2e03404203e965424cb2bca.js"></script>
</div>


<p>Now we just need to build our app using <code>yarn build</code>:<br>
<a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FPjkpOEy.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FPjkpOEy.png" alt="build.png" loading="lazy"></a></p>

<p>Now we can preview our build using <code>yarn preview</code>:</p>

<p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FGCYjrnL.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FGCYjrnL.png" alt="preview.png" loading="lazy"></a></p>

<p>😯 thats the <em>'install app'</em> button,</p>

<p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FjtwLSiw.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgur.com%2FjtwLSiw.png" alt="output-button.png" loading="lazy"></a></p>

<p>Svelte makes it easy to make PWAs.</p>

<p>The source code of this project lies at:</p>

<p><a href="https://github.com/100lvlmaster/svelte-pwa" target="_blank" rel="noopener noreferrer">https://github.com/100lvlmaster/svelte-pwa</a></p>

<p>You can find me at:</p>

<p><a href="https://100lvlmaster.in" target="_blank" rel="noopener noreferrer">https://100lvlmaster.in</a></p>




 I've been using sveltekit and svelte for over a year now. I'm also waiting for it to be matured enough to beat NextJs in terms of community. But I like them both.
 
 So, on this weekend I wanted to turn one of my SvelteKit projects into a PWA. When I wanted to do the same with NextJs projects there were a lot of tutorials. But I couldn't find many guides for svelte beginners.

   That's because svelte has pwa functionality built into it.
   
   

## Note !
### Basic things for all PWAs
 -  A website
 -  manifest.json [ basic icons,names,shortcuts]
 -  service-worker [ for offline cache ]


 So let's get on with it.
 
![lets-go.gif](https://media.giphy.com/media/CjmvTCZf2U3p09Cn0h/giphy.gif)

## First:
We'll create a demo Sveltekit project:
```bash
npm init svelte@next my-app
```

![create.png](https://imgur.com/LIfwJFA.png)

Then we'll choose a simple config in vite for the sake of this article:

![config.png](https://imgur.com/uyTDDVf.png)

Choose typescript because `#typescriptgang`:

![svelte-kit-config.png](https://imgur.com/VePlaaP.png)


Now we have a demo project set up with typescript, it will be straight-forward from here on:

![note.png](https://imgur.com/gZLK7Jh.png)

Let's get into our directory:
```bash
cd my-app
```
And run:
```bash
yarn
```
![yarn-output.png](https://imgur.com/v5RgR26.png)

After that,
- In the /static directory, We'll create a manifest.json.
- When svelte compiles the whole application, it copies static files over to the build folder.

![manifest.json](https://imgur.com/WokCIZk.png)

{% gist https://gist.github.com/100lvlmaster/3a7d37a400897114d5c64d88b81e4acc %}

Then we'll refer our `manifest.json` in `src/app.html`.

![app.html](https://imgur.com/s43YGuD.png)

And finally we'll create our `src/service-worker.ts`

_Svelte will automatically detect the service-worker in the src folder's root and then register our service worker during build_.
_Isn't that neat?_

![service-worker.ts](https://imgur.com/0aLDOHU.png)


{% gist https://gist.github.com/100lvlmaster/8e966302b2e03404203e965424cb2bca %}

Now we just need to build our app using `yarn build`:
![build.png](https://imgur.com/PjkpOEy.png)

Now we can preview our build using `yarn preview`:

![preview.png](https://imgur.com/GCYjrnL.png)

😯 thats the _'install app'_ button,

![output-button.png](https://imgur.com/jtwLSiw.png)

Svelte makes it easy to make PWAs.

The source code of this project lies at:

https://github.com/100lvlmaster/svelte-pwa

You can find me at:

https://100lvlmaster.in

I've been using sveltekit and svelte for over a year now. I'm also waiting for it to be matured...