
This one's going to be quick. no bs. I was working on a Next.js project and needed a way to handle API Route Errors Globally. Similar to Express in Node.js.
This is what I've come up with and it works wonders for my setup.

- We create a handler function that will take multiple handlers and run them one by one. 
```typescript
import { ApiError } from "next/dist/server/api-utils";
import { NextResponse, NextRequest } from "next/server";

export const custom_middleware =
  (...handlers: Function[]) =>
  async (req: NextRequest, res: NextResponse) => {
    try {
      for (const handler of handlers) {
        await handler(req, res);
      }
    } catch (error) {
      if (error instanceof ApiError) {
        return NextResponse.json(
          { message: error.message },
          { status: error.statusCode }
        );
      } else {
        /// Log server errors using winston or your preferred logger
        console.log(error);
        return NextResponse.json(
          { message: "Server died for some reason" },
          { status: 500 }
        );
      }
    }
  };
```

- Now we can add it to a route
```typescript
/// app/api/ping/route.ts

import { custom_middleware } from "@/app/lib/server/middleware";
import { ApiError } from "next/dist/server/api-utils";
import { NextRequest, NextResponse } from "next/server";

const main_handler = (req: NextRequest, res: NextResponse) => {
  const isAuthenticated = false;

  if (isAuthenticated) {
    return NextResponse.json({ success: true });
  }

  throw new ApiError(400, "Some error");
};

export const GET = custom_middleware(main_handler);
```

- We can see the fruits of our labour in the browser itself.
![image-description.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qc1mhdd4ilhijp5sh0qq.png)

- We can add our own custom authentication logic here too.
```typescript
export const auth_middleware = async (req: NextRequest, res: NextResponse) => {
  /// Your auth logic
  const isAuthenticated = false;
  if (!isAuthenticated) {
    throw new ApiError(401, "Unauthorized");
  }
};
```

- Call it in our middleware_handler
```typescript
export const custom_middleware =
  (...handlers: Function[]) =>
  async (req: NextRequest, res: NextResponse) => {
    try {
      ///
      /// Auth middleware
      await auth_middleware(req, res);

      for (const handler of handlers) {
        await handler(req, res);
      }
    } catch (error) {
      if (error instanceof ApiError) {
        return NextResponse.json(
          { message: error.message },
          { status: error.statusCode }
        );
      } else {
        /// Log server errors using winston or your preferred logger
        console.log(error);
        return NextResponse.json(
          { message: "Server died for some reason" },
          { status: 500 }
        );
      }
    }
  };

```

- Test the Auth middleware once
![image2.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4e285ebbmrzurcrtyll.png)

- Profit 💰
![profiting.gif](https://tenor.com/en-GB/view/throwing-money-eric-cartman-tweek-tweak-stan-marsh-south-park-gif-21961230.gif)

literally me profiting

---

You can look at the code here: [Github](https://github.com/100lvlmaster/next-custom-middleware-example)
Follow me everywhere. [OG Blog](https://www.100lvlmaster.com)

This one's going to be quick. no bs. I was working on a Next.js project and needed a way to handle...

How to: Next.js API Global Errors & Auth Middleware

Navin Kodag

Node.js is a popular server-side JavaScript runtime that has been widely adopted by developers for building scalable and high-performance web applications. With the release of Node.js v20, there are several new features and improvements that developers should be aware of. In this blog, we will discuss the new changes in Node.js v20 compared to the old LTS version.


- V8 engine update Node.js v20 features an update to the V8 engine, which powers JavaScript execution in Node.js. This update brings significant performance improvements, including faster startup times, reduced memory usage, and better garbage collection. This means that Node.js v20 applications can handle more traffic and scale better than the old LTS version.
- Support for ECMAScript modules Node.js v20 has added support for ECMAScript modules, which are a new standard for organizing and sharing JavaScript code. This allows developers to write more modular and maintainable code, making it easier to collaborate and reuse code across different projects.
- Experimental Async Local Storage Node.js v20 introduces an experimental feature called Async Local Storage, which allows developers to store and access data across asynchronous contexts in a more efficient way. This can be particularly useful for tracing and debugging asynchronous code and can lead to better performance and fewer errors.
- Improved diagnostic reports Node.js v20 includes several improvements to the diagnostic reporting capabilities, making it easier to debug and troubleshoot Node.js applications. The new reports include more detailed information about errors and warnings, as well as recommendations for resolving issues.
- Updated platform support Node.js v20 includes updates to the supported platforms, including support for the latest versions of macOS, Windows, and Linux. This ensures that developers can build and deploy Node.js applications on the latest operating systems and take advantage of the latest features and improvements.
- In conclusion, Node.js v20 brings several new features and improvements that make it a compelling choice for building modern web applications. The new updates, including the V8 engine update, support for ECMAScript modules, experimental Async Local Storage, improved diagnostic reports, and updated platform support, provide developers with powerful tools to create scalable, high-performance applications. If you are currently using the old LTS version of Node.js, it’s worth considering upgrading to Node.js v20 to take advantage of these new features and improvements.


Node.js is a popular server-side JavaScript runtime that has been widely adopted by developers for...

New updates to Nodejs V20 🔥


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



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

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

## This is the continuation of the 5chan project.
Creating the backend:
 -  Setup project and download dependencies in one Ctrl+v-Ctrl-v :
 ```bash
 # Create the 5chan directory
 mkdir 5chan-go
 # Create main.go
 touch main.go
 # Init the go project 
 go mod init github.com/100lvlmaster/5chan-go
 # Get go-fiber
 go get github.com/gofiber/fiber/v2
 # Get GORM
 go get github.com/gofiber/fiber/v2 
 # Get air
 curl -sSfL https://raw.githubusercontent.com/cosmtrek/air/master/install.sh | sh -s -- -b $(go env GOPATH)/bin
 # Setup air
 air -c .air.toml
 # Get godotenv to read env vars [optional]

 ```

 Create a directory structure like so:
 -  controllers 
	 -  posts.go
	 -  replies.go
 -  database
	 -  database.go
 -  middleware
	 -  middleware.go
 -  models
	 -  post.go
	 -  reply.go
 -  routes
	 -  routes.go
 - main.go
 
![dir-struct.png](https://imgur.com/q85U73P.png)



## Da Code:
- Creating structs

models/post.go
```go
// models/post.go
package models
import "gorm.io/gorm"

type Post struct {
gorm.Model
ID string `gorm:"primaryKey"`
Title string `json:"title"`
Author string `json:"author"`
Body string `json:"body"`
Reply []Reply `json:"replies" gorm:"constraint:OnUpdate:CASCADE,OnDelete:SET NULL;"`
}
```
models/reply.go
```go
// models/reply.go
package models
import "gorm.io/gorm"

type Reply struct {
gorm.Model
ID string `gorm:"primaryKey"`
Author string `json:"author"`
Body string `json:"body"`
PostID string `json:"postId"`
Post Post `json:"post" gorm:"constraint:OnUpdate:CASCADE,OnDelete:SET NULL;"`
}
```

- Connecting the databse and creating a singleton of the instance so we can use it everywhere.

```go
// database/database.go
package database
import (
"fmt"
"os"
"github.com/100lvlmaster/5chan-go/models"
"gorm.io/driver/postgres"
"gorm.io/gorm"
)

var (
// DBConn is a database connection singleton
DBConn *gorm.DB
)

func InitDb() *gorm.DB {
dsn, envExists := os.LookupEnv("DB_DSN")
if !envExists {
panic("Could not connect to the database")
}
db, err := gorm.Open(postgres.Open(dsn), &gorm.Config{})
if err != nil {
panic("Could not initialize database")
}
migrate(db)
return db
}

func migrate(db *gorm.DB) {
err := db.AutoMigrate(&models.Post{}, &models.Reply{})
if err != nil {
fmt.Print("Could not init database")
return
}
fmt.Print("Database migrated")
}
```

- Creating Controllers

controllers/posts.go
```go
// controllers/posts.go
package controllers
import (
"github.com/100lvlmaster/5chan-go/database"
"github.com/100lvlmaster/5chan-go/models"
"github.com/gofiber/fiber/v2"
gonanoid "github.com/matoous/go-nanoid/v2"
)
  
func GetPosts(c *fiber.Ctx) error {
var posts []models.Post
database.DBConn.Find(&posts)
return c.JSON(posts)
}

func GetPostById(c *fiber.Ctx) error {
id := c.Params("id")
var post models.Post
database.DBConn.Preload("Reply").First(&post, id)
return c.JSON(post)
}

func CreatePost(c *fiber.Ctx) error {
var post models.Post
if err := c.BodyParser(&post); err != nil {
return c.Status(400).SendString(err.Error())
}
id, _ := gonanoid.Generate("0123456789", 10)
post.ID = id
database.DBConn.Create(&post)
return c.Status(201).JSON(post)
}
  
func DeletePost(c *fiber.Ctx) error {
id := c.Params("id")
var post models.Post
database.DBConn.Delete(&post, id)
return c.Status(200).SendString("Post deleted successfully")
}
```
controllers/replies.go
```go
package controllers

import (
"errors"
"github.com/100lvlmaster/5chan-go/database"
"github.com/100lvlmaster/5chan-go/models"
"github.com/gofiber/fiber/v2"
gonanoid "github.com/matoous/go-nanoid/v2"
"gorm.io/gorm"
)

func GetReplies(c *fiber.Ctx) error {
var replies []models.Reply
database.DBConn.Find(&replies)
return c.JSON(replies)
}

///
func GetRepliesByPostId(c *fiber.Ctx) error {
id := c.Params("id")
var replies []models.Reply
database.DBConn.Where(&models.Reply{PostID: id}).Find(&replies)
return c.JSON(replies)
}

///
func CreateReply(c *fiber.Ctx) error {
var reply models.Reply
if err := c.BodyParser(&reply); err != nil {
return c.Status(400).SendString("Incorrect input body, please chcek input convention and try again")
}

/// DB contains post
var result models.Post
err := database.DBConn.First(&result, reply.PostID).Error
hasRecord := !errors.Is(err, gorm.ErrRecordNotFound)
if !hasRecord {
return c.Status(400).SendString("Post does not exist")
}

///
id, _ := gonanoid.Generate("0123456789", 10)
reply.ID = id
database.DBConn.Create(&reply)
return c.Status(201).JSON(reply)
}
```
 
- Setup routes:


// routes/routes.go
```go
// routes/routes.go
package routes

import (
"github.com/100lvlmaster/5chan-go/controllers"
"github.com/gofiber/fiber/v2"
)

func RoutesInit(app *fiber.App) {
app.Get("/", func(c *fiber.Ctx) error {
return c.SendString("Hellso, World 👋!")
})
api := app.Group("/api")
v1 := api.Group("/v1")
v1.Get("/posts", controllers.GetPosts)
v1.Post("/posts", controllers.CreatePost)
v1.Get("/posts/:id", controllers.GetPostById)
v1.Delete("/posts/:id", controllers.DeletePost)
v1.Get("/replies", controllers.GetReplies)
v1.Get("/replies/:id", controllers.GetRepliesByPostId)
v1.Post("/replies", controllers.CreateReply)
}
```
 
 - A middleware to limit other methods like `POST` & `DELETE` to our Frontend. But you're using this you may change them to your liking in the `.env` file

middleware/middleware.go
```go
package middleware

import (
"os"
"github.com/gofiber/fiber/v2"
)
  
/// Limit post requests to the official client
func CustomeMiddleware() func(*fiber.Ctx) error {
return func(c *fiber.Ctx) error {
if c.Method() == "POST" || c.Method() == "DELETE" {
apiKey, envExists := os.LookupEnv("API_KEY")
if !envExists {
return c.Status(500).SendString("Could not fetch env vars, call 100lvlmaster")
	}
key := c.Get("Authorization")
if apiKey != key {
return c.Status(400).SendString("Your keys are incorrect peasant ✨✨")
	}
}
return c.Next()
	}
}
```

- And then tie everything together in the main.go file

main.go

```go
// main.go
package main

import (
"os"
"github.com/100lvlmaster/5chan-go/database"
"github.com/100lvlmaster/5chan-go/middleware"
"github.com/100lvlmaster/5chan-go/routes"
"github.com/gofiber/fiber/v2"
"github.com/gofiber/fiber/v2/middleware/cors"
"github.com/joho/godotenv"
)

func main() {
app := fiber.New()
godotenv.Load()
app.Use(cors.New())
// app.Use(cache.New())
app.Use(middleware.CustomeMiddleware())
database.DBConn = database.InitDb()
routes.RoutesInit(app)
port, envExists := os.LookupEnv("PORT")
if !envExists {
port = "8080"
}
app.Listen(":" + port)
}
```
- And then run the project using:
```bash
air
```
![air.png](https://imgur.com/KNtG8BH.png)

After making some test requests these are the screenshots:
![test-1.png](https://imgur.com/q6HJxj5.png)
![test-2.png](https://imgur.com/mfCWt0h.png)

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 is the continuation of the 5chan project.   Creating the backend:    Setup project and...

5chan API - Golang, GORM, Go-fiber

This weekend I want to make a clone of 4 chan. It won't be as big as 4chan lol.
But still I'll use this post to design and decide the stack to use.


## What is 4 chan
> 4chan is a simple image-based bulletin board where anyone can post comments and share images. There are boards dedicated to a variety of topics, from Japanese animation and culture to videogames, music, and photography. Users do not need to register an account before participating in the community.  ~ *4chan Homepage*

## What we want 5chan to be
 
 - Text based
 - Anonymous [ no registration ]
 - Posts
 - Replies to posts
 - Timeline of posts on homepage

## The tech stack :
- Backend
	- [Go-fiber](https://gofiber.io/)
	- [Air - live reload](https://github.com/cosmtrek/air)
	- [GORM](https://gorm.io/)
	- [PostgreSQL](https://www.postgresql.org/)
- Frontend 
	- [NextJs](https://nextjs.org/) 
	- [Chakra UI](https://chakra-ui.com/)
	- [SWR](https://swr.vercel.app/)
	- [Formik](https://formik.org/)
	- [Zustand](https://zustand.surge.sh/)
- Hosting
        - [Heroku](https://www.heroku.com/)


Hmmm. Thats something I can work out in a day or two for sure.

So ... LESGOOOO


![cat-ready.gif](https://media.giphy.com/media/CjmvTCZf2U3p09Cn0h/giphy.gif?cid=ecf05e47kq1h576i6japfzxpjvqixjrl4rihalyop04ipgsf&rid=giphy.gif&ct=g)
 
---
You can find me at:

Website : https://100lvlmaster.in 

Github : https://github.com/100lvlmaster




This weekend I want to make a clone of 4 chan. It won't be as big as 4chan lol. But still I'll use...

5chan - The 4chan clone

- 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


 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...

Create a PWA with Sveltekit | Svelte

## Deploying a Go API on Heroku

## To deploy it on Heroku.

I'll assume you have Heroku cli installed and logged in.
or you can start here.
[Install heroku cli](https://devcenter.heroku.com/articles/heroku-cli)

- Create a Procfile that points to our binary with one line
  and place it in the root of the directory

```
// Profile
web: bin/Intersect_api
```

- Run the app locally to test using

```
heroku local
```

- Create a heroku app

```
heroku create intersect-api-v2
```

- Then commit our changes on git

```
git add .
git commit -m '💪'
```

- And at the end, simply deploy our app using

```
git push heroku heroku-deploy:master
```

- (Optional) Subsequent change can be commit using

```
git push heroku master
```

Extra

- You can read the logs from with

```
heroku logs
```

That's about it.
Now we can check our server at,

https://intersect-api-v2.herokuapp.com


Deploying a Go API on Heroku            To deploy it on Heroku.   I'll assume you have Herok...

Deploying Golang API to Heroku

## The Nextjs App for the intersect

I'll quickly use a template to create the nextjs app with basic setup
with `Typescript`, `Tailwind` support because css is boring.

```
git clone https://github.com/100lvlmaster/nextjs-tailwind-typescript-starter.git
```

```
cd nextjs-tailwind-typescript-starter
```

```
yarn
```

This will give all the required tools already setup. So that we can get the app up and running in no time

- You can use your preferred method for making a Http GET request but I'm using axios in this one.

```typescript
# lib/get_search.ts
import axios, { AxiosRequestConfig } from "axios";

export const getImages = async (searchString: string) => {
  const config: AxiosRequestConfig = {
    params: { q: searchString },
    headers: { Authorization: process.env.NEXT_PUBLIC_API_KEY },
    // Authorization header we set in the server
  };
  const data = await axios.get(
    `${process.env.NEXT_PUBLIC_API_URL}/search`,
    config
  );
  return data.data;
};

//
```

- We'll also create a flash-screen component

```typescript
# /components/flash_screen.tsx
import { useEffect, useState } from "react";

const FlashScreen = (props) => {
  const [currImage, setImage] = useState(0);
  //
  const toggleImages = async (index: number, pass: number) => {
    if (index < props.images.length) {
      setImage(index);
      await new Promise((resolve) => setTimeout(resolve, 100));
      return toggleImages(++index, pass);
    }
    if (props.images.length < 70 && pass < 2) {
      return toggleImages(0, ++pass);
    }
    props.onEnd();
    return;
  };
  //
  useEffect(() => {
    toggleImages(0, 1);
  }, []);
  return (
    <div className="h-screen w-full flex-grow flex flex-col justify-items-center items-center bg-black">
      {props.images.map((e: string, index: number) => (
        <img
          className={"w-full object-cover h-full".concat(
            index == currImage ? " " : " hidden"
          )}
          key={index}
          src={e}
        ></img>
      ))}
    </div>
  );
};

export default FlashScreen;

```

- And finally the `index.tsx`

```typescript
# pages/index.tsx
import { useState } from "react";
import { getImages } from "../lib/get_images";
import FlashScreen from "../components/flash_screen";
import NextHead from "next/head";
import { useRouter } from "next/router";

const Home = () => {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [images, setImages] = useState([]);
  const [showImages, setShowImages] = useState(false);
  let query: string = "";
  //
  const onSubmitButton = async () => {
    setLoading(true);
    const data = await getImages(query);
    setImages(data.data);
    setShowImages(true);
  };

  /// Call on mount
  const handleChangeEvent = (e: any) => (query = e.target.value);
  return (
    <div className="bg-black text-white">
      {showImages ? (
        <FlashScreen
          images={images}
          onEnd={() => {
            setShowImages(false);
            setImages([]);
            setLoading(false);
          }}
        ></FlashScreen>
      ) : (
        <div className="flex flex-col">
          <div className="h-screen w-full flex flex-col justify-items-stretch ">
            <Spacer />
            {loading ? (
              <div className="flex flex-col justify-items-center items-center space-y-10">
                <h1 className="bg-red-600 rounded-lg text-3xl  h-10 p-1 text-center">
                  downloading..
                </h1>
              </div>
            ) : (
              <div className="flex flex-col justify-items-center items-center space-y-10">
                <h1 className="bg-red-600 rounded-lg text-3xl  h-10 p-1 text-center">
                  The Intersect
                </h1>
                <input
                  placeholder="search .."
                  className="text-black bg-gray-200 rounded-lg text-sm p-2"
                  onChange={(e) => handleChangeEvent(e)}
                ></input>
                <button
                  className="bg-red-600 text-white p-3 rounded-lg hover:shadow-lg text-bold"
                  onClick={onSubmitButton}
                >
                  Flash
                </button>
              </div>
            )}
            <Spacer />
          </div>
          <div className="p-10 text-center text-xs text-gray-400">
          </div>
        </div>
      )}
    </div>
  );
};
export default Home;
const Spacer = () => <div className="flex-grow"></div>;
```

- Now we can just run our app using

```
yarn dev
```


The Nextjs App for the intersect   I'll quickly use a template to create the nextjs app with...

Nextjs Web app for the intersect

## Building the REST API

### I'll be using gin for this part of project.

> Gin is a web framework written in Go (Golang). It features a martini-like API with performance that is up to 40 times faster thanks to httprouter. If you need performance and good productivity, you will love Gin.

## TLDR

- [The colly code for scraping](https://github.com/100lvlmaster/Intersect_api/blob/master/scraper/search.go)

First we create our `go.mod` file:

```
 go mod init Intersect_api
```

Then we'll create our `main.go` file and add the following code.

```golang
// main.go
package main
import (
	"Intersect/server"
	"log"
	"os"
	"time"

	"github.com/getsentry/sentry-go"
)

func main() {

	// Initialize Libraries

	// Initialize and defer Sentry
	if err := sentry.Init(sentry.ClientOptions{
		Dsn: os.Getenv("SENTRY_DSN"),
	}); err != nil {
		log.Fatalln("Sentry Init Error: ", err)
	}

	defer sentry.Flush(2 * time.Second)

	// Initialize Server
	server.Init()
}
```

- Create a server module and initialize the server

```golang
/// server.go
package server

import "github.com/getsentry/sentry-go"

// Init : Initialize the routes and server
func Init() {
	r := NewRouter()
	err := r.Run()

	if err != nil {
		sentry.CaptureException(err)
	}
}

```

- Good rule of thumb to add some middleware with a token required

```golang
// middleware.go
package server

import (
	"net/http"

	"github.com/gin-gonic/gin"
)

func AuthMiddleware() gin.HandlerFunc {
	authHeader := "let-me-in"
	// os.Getenv("AUTHORIZATION_STRING")
	return func(c *gin.Context) {
		requiredAuth := c.Request.Header.Get("Authorization")
		if requiredAuth != authHeader {
			c.AbortWithStatusJSON(http.StatusUnauthorized, map[string]string{"message": "unauthorized peasant 😃"})
		}
		c.Next()
		// middleware
	}
}

```

- Then we'll create default cors, routes and also call our middleware inside the router.use() method

```golang
package server

import (
	"Intersect/scraper"

	"github.com/gin-contrib/cors"
	"github.com/gin-gonic/gin"
)

/// router.go
func NewRouter() *gin.Engine {
	// gin.SetMode(gin.ReleaseMode)
	router := gin.New()
	// Gin and CORS Middlewares
	router.Use(gin.Logger())
	router.Use(gin.Recovery())
	/// Cors
	router.Use(setCors())
	/// Declare Middleware
	authorized := router.Group("/")
	authorized.Use(AuthMiddleware())
	{
		authorized.GET("", scraper.Greet)
		searchRouter := authorized.Group("search")
		searchRouter.GET("", scraper.GetImgs)
	}
	return router
}

// Cors
func setCors() gin.HandlerFunc {
	return cors.New(cors.Config{
		AllowOrigins:     []string{"*"},
		AllowMethods:     []string{"GET", "OPTIONS", "PUT"},
		AllowHeaders:     []string{"Origin", "Authorization"},
		ExposeHeaders:    []string{"Content-Length"},
		AllowCredentials: true,
	})
}

```

Then we'll create a scraper directory/module and create two files

- `greeting.go` for default route and
- `search.go` for the request route.
  (Because the default route will be lonely).

```golang
package scraper

import (
	"net/http"

	"github.com/gin-gonic/gin"
)

func Greet(c *gin.Context) {
	c.JSON(http.StatusOK, map[string]string{"sup": "🤘🚀"})

}

```

- And now the main component of the server, we'll scrape the images from various websites for free and non-stock images.
  - https://unsplash.com
  - https://burst.shopify.com
  - https://www.pexels.com/
  - https://www.flickr.com
  - https://stocksnap.io
  - https://google.com ... (because why not)

```golang
package scraper

import (
	"fmt"
	"net/http"
	"strings"

	"github.com/gin-gonic/gin"
	"github.com/gocolly/colly"
)

func GetImgs(c *gin.Context) {
	searchQuery := c.Query("q")
	res := getSearch(searchQuery)
	c.JSON(http.StatusOK, res)
}

func getSearch(searchQuery string) Images {
	searchString := strings.Replace(searchQuery, " ", "-", -1)
	c := colly.NewCollector()
	c.UserAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:42.0) Gecko/20100101 Firefox/42.0"
	c.AllowURLRevisit = true
	c.DisableCookies()
	array := []string{}

	// Find and visit all links
	c.OnHTML("img[src]", func(e *colly.HTMLElement) {
		src := e.Attr("src")
		if src != "" {
			array = append(array, e.Attr("src"))
		}
	})
	// Requesting a url for html
	c.OnRequest(func(r *colly.Request) {
		fmt.Println("Visiting", r.URL)
	})
	// search query
	pexelsQuery := strings.Replace(searchString, "-", "%20", -1)
	stocSnapQuery := strings.Replace(searchString, "-", "+", -1)
	//
	c.Visit("https://unsplash.com/s/" + searchString)
	c.Visit("https://burst.shopify.com/photos/search?utf8=%E2%9C%93&q=" + searchString + "&button=")
	c.Visit("https://www.pexels.com/search/" + pexelsQuery + "/")
	c.Visit("https://www.flickr.com/search/?text=" + pexelsQuery)
	c.Visit("http://www.google.com/images?q=" + stocSnapQuery)
	c.Visit("https://stocksnap.io/search/" + stocSnapQuery)
	//
	return Images{
		Count: len(array),
		Data:  array}
}

type Images struct {
	Count int      `json:"counts"`
	Data  []string `json:"data"`
}

```

After that, we'll build a binary using

```
go build -o /bin/Intersect_api -v .
```

### Now that's almost all the code we'll need.


Building the REST API            I'll be using gin for this part of project.    Gin is a web...

Golang image search api

### What is the intersect?
 From the famous series "Chuck", the Intersect is a government database of encoded information harvested from every intelligence agency in the United States. 
### How does it even work?
 The intersect is initially downloaded into chuck's brain by flashing a ton images. And then the subsequent uses of the intersect require him to flash again with the images related to that skill.
This fan wiki contains most of the knowledge you need i.e if you need it.
https://chuck-nbc.fandom.com/wiki/The_Intersect .

As I'm writing this, it sounds so weird for someone who isn't familiar with the show. I apologize (no i do not 🙃).

### So to make the intersect:
 - Scrape images from the internet 
 - Feed them into a REST API
 - Consume the REST API on the client with a... you guessed it - a JavaScript framework✨

### The stack i chose
 - [gin](https://github.com/gin-gonic/gin) (Golang) 
 - [Nextjs](https://nextjs.org/) (JavaScript)
 - REST API
 - Heroku for hosting

Alright then,
LESGOOOOO!
![drake.gif](https://media.giphy.com/media/S5yqNNTQlEZfqQ7InC/giphy.gif)


What is the intersect?   From the famous series "Chuck", the Intersect is a government...

The Intersect - About the project


![One for all — A VS Code theme 🚀](https://cdn-images-1.medium.com/max/2000/0*QRBOGYO-lO6JhQDC.png)

I was browsing through the Visual Studio Code marketplace, looking for a dark theme.

I’ve been through that conundrum before though I’ve always settled on One dark pro. Sure, it’s nice and pretty eye pleasing but i need something with more consistent colors.

## So I made a VS Code theme, well actually two.

These are the things i wanted from One dark pro:-

* Consistent colors.

* Getting rid of that very distracting orange color in the status bar when debugging.

* An option to a slightly more darker shade if i felt like it.

* Slightly darker but more lighter blues

* Minimal colors across the editor

I’ve switched lot of themes, A LOT. To the point where i was just installing the same themes again and again. That felt very unproductive :(

Introducing **[One for all theme](https://marketplace.visualstudio.com/items?itemName=100lvlmaster.one-for-all)** -

![theme logo](https://cdn-images-1.medium.com/max/2000/0*d_JyfUj7zOCTxDg6)

A VS code theme with :-

* Consistent colors

* Two themes :- Traditional One dark pro dark and a slightly darker theme

* Status bar matches the editor theme

* Minimal theme across the editor

**One for all**

![Code snippet — One for all](https://cdn-images-1.medium.com/max/2000/0*yK5byuqZz4jUitpj.png)

![Editor — One for all](https://cdn-images-1.medium.com/max/2880/0*ZyTv-C-XHonqReF3.png)

![Settings — One for all](https://cdn-images-1.medium.com/max/2880/0*4CXNx7aaVqxI6IJW.png)

![Markdown — One for all](https://cdn-images-1.medium.com/max/2880/0*wY9pIE3p9JgjG9Fq.png)

**One for all darker**

![Code snippet — One for all darker](https://cdn-images-1.medium.com/max/2000/0*qTC786oSywe1y5gs.png)

![Editor — One for all darker](https://cdn-images-1.medium.com/max/2880/0*ZUttDno7u07HMFAs.png)

![Settings — One for all darker](https://cdn-images-1.medium.com/max/2880/0*F1D39QOtpeamEK7v.png)

![Markdown — One for all darker](https://cdn-images-1.medium.com/max/2880/0*B2VidnXu9OmYSb9P.png)

And yes. One for all is a reference to mha.
![midoriya.gif](https://media.giphy.com/media/9Y1wF3wx1Dex8w9wxL/giphy.gif)
I initially made the theme to help my eyes, but if there’s someone like me out there. Thanks for reading. Please do check the theme out if you’re interested.

[**One for all - Visual Studio Marketplace**](https://marketplace.visualstudio.com/items?itemName=100lvlmaster.one-for-all)

Find me at:

[https://navinko.netlify.app/](https://navinko.netlify.app/)


I was browsing through the Visual Studio Code marketplace, looking for a dark theme.  I’ve been thr...

The VS code dark theme I've been waiting for


So, i was looking for a way to quickly get a YouTube video’s metadata without having to setup the developer account and get an API key since i just needed to integrate it as one small feature.

After doing a quick Google search, I came across the oembed API to fetch metadata for any video with using its link. So it goes like dis

tldr:
{% gist https://gist.github.com/100lvlmaster/37e26620fe9329597168e2a6188da8ce.js %}
But after a bit of refactoring 🧹…
{% gist https://gist.github.com/100lvlmaster/3dd10cc6940917706a07e971ed3305b7.js %}
The basic HTTP request looks like this…

    [http://youtube.com/oembed?url=${YOUR](http://youtube.com/oembed?url=${YOUR)_VIDEO_URL}&format=json

Gives us a response like this…

    **{
    **"title": "Rick Astley - Never Gonna Give You Up (Video)",
    "author_name": "RickAstleyVEVO",
    "author_url": "[https://www.youtube.com/user/RickAstleyVEVO](https://www.youtube.com/user/RickAstleyVEVO)",
    "type": "video",
    "height": **113**,
    "width": **200**,
    "version": "1.0",
    "provider_name": "YouTube",
    "provider_url": "[https://www.youtube.com/](https://www.youtube.com/)",
    "thumbnail_height": **360**,
    "thumbnail_width": **480**,
    "thumbnail_url": "[https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg](https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg)",
    "html": "<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/dQw4w9WgXcQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
    **}**

That’s pretty neat :]
[**navinko**](https://navinko.netlify.app)


So, i was looking for a way to quickly get a YouTube video’s metadata without having to setup the dev...

Fetch any YouTube video’s metadata in 2 lines

![cat.gif](https://media.giphy.com/media/LmNwrBhejkK9EFP504/giphy.gif)
So a project i’ve been working on recently needed a module where i had to receive user notifications in the background and also refresh user’s info as soon as the notification was delivered to a user .

Now, this could’ve been done using the cloud function we were using to send the notification. but we needed to refresh the data only when the user received notification.

so LESGOOOOOOOO!
![drake.gif](https://media.giphy.com/media/S5yqNNTQlEZfqQ7InC/giphy.gif)
the plugins we’ll need:
```
    flutter_local_notifications:
    cloud_store:
    firebase_messaging:
```

make sure you’ve set these up before proceeding

run the app once and find the **GeneratedPluginRegistrant.java **file in android/app/src/main/java/io/flutter/plugins. we’ll need these to identify the import names later.

now head over to the folder containing **MainActivity.kt **and here we’ll create a registrant class.

**CloudFirestorePluginRegistrant.kt**
```
    package <com.your.application>

    import android.util.Log

    import io.flutter.plugin.common.PluginRegistry

    import io.flutter.plugins.firebase.cloudfirestore.CloudFirestorePlugin

    class CloudFirestorePluginRegistrant {

    companion object {

    fun registerWith(registry: PluginRegistry){

    Log.d("CloudFirestore", "registerWith");

    if(alreadyRegisteredWith(registry)) {

    Log.d("Already Registered","");

    return

    }

    try {

    CloudFirestorePlugin.registerWith(registry.registrarFor("io.flutter.plugins.firebase.cloudfirestore.CloudFirestorePlugin"))

    } catch (e: Exception) {

    Log.d("CloudFirestore", e.toString());}

    Log.d("Plugin Registered","");

    }

    private fun alreadyRegisteredWith(registry: PluginRegistry): Boolean {

    val key = CloudFirestorePluginRegistrant::class.java.canonicalName

    if (registry.hasPlugin(key)) {

    return true

    }

    registry.registrarFor(key)

    return false

    }

    }

    }
```
and now lets register this class in our **Application.kt **in the same folder
```
    package <com.your.application>

    import io.flutter.app.FlutterApplication

    import io.flutter.plugin.common.PluginRegistry

    import com.your.application.CloudFirestorePluginRegistrant

    class Application : FlutterApplication(), PluginRegistry.PluginRegistrantCallback {

    override fun onCreate() {

    super.onCreate()

    }

    override fun registerWith(registry: PluginRegistry?) {

    if (registry != null) {

    CloudFirestorePluginRegistrant.registerWith(registry)

    }}
    }
```
and thats about it.

*Note: remember to omit “notification” key from our payload to trigger onBackgroundMessage callback.*

now we can simply call this code in our firebase messaging onBackgroundMessage callback:
```
    onBackgroundMessage: _onMyBackGroundMessage;

    _onMybackGroundMessage(Map<String,dynamic> message){

         firestore.instance.collection(message['data'['userName'])
          .document(notfication).set({name:['data']['userName]});

    }
```
and now we can make cloud firestore queries even if the app is in background.
![mindblown.gif](https://media.giphy.com/media/SACoDGYTvVNhZYNb5a/giphy.gif)

So a project i’ve been working on recently needed a module where i had to receive user notifications...

Flutter Local Notifications and Cloud Firestore Queries in the BACKGROUND


## 

Being a junior developer at a startup is a tough job, for a self-taught developer and who is also getting a degree in Computer Science. I started out as an intern and transitioned to a full stack junior developer position. And these are the three things that became my kryptonite for a short time.

Since these are problems and since we are problem-solvers, these are my analyzes.
![gif1.gif](https://media.giphy.com/media/xT5LMKYQAjTBqvIvio/giphy.gif)
## **1.Procrastination**
![gif2.gif](https://media.giphy.com/media/26xoplW0VhLLByrAY/giphy.gif)
So , you’ve realized those ugly blockers that are simple to solve yet take a long time to overcome. They really keep you from writing that sweet, well-formatted code. But as soon as you hit those kind of blockers, you take a small break before resuming knowing the time to solve it. This is a form of procrastination.

A good approach would be to remind yourself to snap out of it, but like all habits this will take time to stick.

How i got past this:-

I kept in contact with my project management tool/superior, this kept me focused on the task.

## 2.Decision making
![gif3.gif](https://media.giphy.com/media/Uni2jYCihB3fG/giphy.gif)
Another problem that consumed a lot of my time was small decisions, that were based on the architectures and packages/plugins to use. I would wait to until my boss was free because i didn’t want compromise on the architecture and coding standards. This might’ve been better for some occasions, but in most cases, ` Time is of the essence ` and we wouldn’t want to waste that.

How i got past this:-

I solved the problem in any way first and then took the overhead time to refactor the code. You could always go back but you cant solve it in 3 seconds when you’re asked to.

## 3. Underestimating project ETA
![gif4.gif](https://media.giphy.com/media/RLE2Q5ajPa6GgUxe1z/giphy.gif)
When you think a small task will take 15 minutes but you forget important factors. BUGS, BLOCKERS and the time it takes to find the solution. It completely alters the ETA by adding hours or even days. But you remember your 15 minutes ETA and then you start biting your nails.

It’s always good to ask your experienced counterparts/bosses for directions. One such advice i received was to divide the tasks into smaller tasks and increment time by that. So if a module is it be built, you factor in the time to refactor code, build repository classes, models, and then you estimate your time.

How i got past this:-
> # ‘ Divide and conquer ‘ - someone.

Divide the tasks into smaller sub-tasks and estimate all of their time together.

## But Then Again

Since we’re all different and we navigate through life in our own ways. It’d be nice to hear how **you** overcame these obstacles.


Being a junior developer at a startup is a tough job, for a self-taught developer and who is also get...

3 obstacles of a beginner junior developer and how to overcome them


## 

![](https://cdn-images-1.medium.com/max/2000/1*_ShIAU-S30RyiuEDpaZ12Q.jpeg)

I’m not an avid reader. I’ve only read a handful of books and this is the second self-help book I've read up until yet.This book was recommended by my Soft Skills professor.I was mildly depressed about the meaning of life before i read this book.But now i would say that I’ve have eased up a bit.

## **About the book**

This book was written by Brazilian author Paulo Coelho and published in 1988.Initially written in Portuguese,it has been translated to over 70 different languages.It is an international best-seller.The book is on the shorter side with well over 165 pages. The book is essentially a novel trying to convey the message of finding one’s own purpose in life and the general meaning of life.

## **Synopsis**

*The Alchemist* tells the story of a young shepherd named Santiago who is able to find a treasure beyond his wildest dreams. Along the way, he learns to listen to his heart,finds his true love and, more importantly, realizes that his dreams, or his Personal Legend, are not just his but part of the Soul of the Universe.

![](https://cdn-images-1.medium.com/max/2000/1*Ni5MH-Wb5-S1XPkXThMT6g.jpeg)

## My Thoughts

The Alchemist is a fantastic book and has a story filled with optimism with some tests of faith here and there.The book is a journey in itself and has a very deep meaning to it.It conveys the message that we all have a purpose in life also known in the book as “One’s Personal Legend”.Everyone has their own “Personal Legend” and it depends on us whether to follow it or not.The book talks about how the World rewards the people who follow their “Personal Legend”.Although those who do not,aren’t punished yet they live their lives with regret.The World favors those who follow their “Personal Legend” at first like the phenomenon of “beginner’s luck” and then it tests your faith and determination to chase your “Personal Legend”.In the end,you embark on satisfying journey which once completed leaves you with happiness and satisfaction to the soul.It’s nothing short of a well-written anime.At certain parts it provides the same stimulation and leaves you with goosebumps.It leaves you hunger to find your own “Personal Legend”.It also makes you a bit wiser about your goals.

![](https://cdn-images-1.medium.com/max/2000/1*xu64vOmAU5k_9O_9I5IOcw.png)

## **Favorite quotes from the book**

““*And, when you want something, all the universe conspires in helping you to achieve it.*” 
― **Paulo Coelho, The Alchemist**

*“What’s the world’s greatest lie?” the boy asked, completely surprised. “It’s this: that at a certain point in our lives, we lose control of what’s happening to us, and our lives become controlled by fate. That’s the world’s greatest lie.”*

“*One’s Personal Legend(destiny) is what you have always wanted to accomplish. Everyone, when they are young, knows what their Personal Legend is. “At that point in their lives, everything is clear and everything is possible. They are not afraid to dream, and to yearn for everything they would like to see happen to them in their lives. But, as time passes, a mysterious force begins to convince them that it will be impossible for them to realize their Personal Legend….whoever you are, or whatever it is that you do, when you really want something, it’s because that desire originated in the soul of the universe. It’s your mission on earth.*”

“*Tell your heart that the fear of suffering is worse than the suffering itself. And that no heart has ever suffered when it goes in search of its dreams, because every second of the search is a second’s encounter with God and with eternity*.”

“*If someone isn’t what others want them to be, the others become angry. Everyone seems to have a clear idea of how other people should lead their lives, but none about his or her own*.”

“*Love is not to be found in someone else but in ourselves; we simply awaken it. But in order to do that, we need the other person*.”

“*One is loved because one is loved. No reason is needed for loving*.”

“*You can become blind by seeing each day as a similar one. Each day is a different one, each day brings a miracle of its own. It’s just a matter of paying attention to this miracle.*”

“*It’s the possibility of having a dream come true that makes life interesting*.”

“*There is only one thing that makes a dream impossible to achieve: the fear of failure*.”

Find me at:
[100lvlmaster.in](https://100lvlmaster.in)

I’m not an avid reader. I’ve only read a handful of books and this is the second self-help book I'v...