DEV Community: Next Dev

What things I learned in 2022 as a full stack developer

Next Dev — Fri, 13 Jan 2023 16:15:31 +0000

2022 was a year that taught me various things about various topics like startups, the stock market, coding, etc. Genuinely talking, I improved this year as I realized that reality is very different from what one thinks. Read till the end and I will tell you my amazing story.

🧐Connecting Dots

In these 5 months, I spent most of my time making videos and blogs on self-help topics such as how to deal with anxiety. I gained a lot of experience in writing content and also structuring my content in a way which is simple for viewers to understand and learn from it. I didn't know that making videos on self-help videos will help me while I was making videos on coding topics such as How to use supabase auth.

You cannot connect dots looking forward, you can only connect them looking backward. -- Steve Jobs

During these months, my board exams (exams conducted in India for high school students) were also conducted in which I performed lethargically (badly) and you can imagine how I performed with the example that when I was having a science exam the day after, I was learning MongoDB. I was interested in scoring the highest marks in the exams as others do as I don't find any practical knowledge in those exams. But I learned it hard way that I needed to score high but no worries about the past 🤓.

💪Startup trap

I was one of those who were building a startup without even having an idea. It sounds pretty unobvious but having spent time in that trap I learned many things which would have wasted my time in the future. The lessons I learned are written below:

💪 It's not easy to do a startup.
🧮 If your startup is not solving any real problem, you are just wasting your time.
❓If you have self-doubt about your startup then you need to analyze it before it's too late.
🎥 Many influencers didn't do any business themselves but they will try to teach you how to do business.
📚 Practical knowledge is equal to or more important than the knowledge we gain from books. Eg If you went to a place, you can better understand it than the person who read about it.
💰 If it was so easy to make money, why didn't the whole world become rich?

Your idea doesn't matter until you execute it in the right manner. -- Ashneer Grover

🤩Youtube

In May, I finally decided to open a YouTube channel and blogging website (on hashnode, medium, dev.to) through which we help people learn to code. I was facing a problem with setting up supabase auth in my app so I thought why not make a video about it in Hindi? That's where I got started.

My channel's growth was amazing compared to my previous YouTube channels. So I just started putting more videos on it. I also started learning new things such as railway (for Postgres database hosting) to upload its videos on YouTube. In simple words, opening a channel on YouTube also improved my development skills. Moreover, if I want to teach something, I first deep dive into it. This habit of diving deep into a topic and then explaining it to the viewers helps me a lot in becoming a better researcher.

😍Career

It does not matter what skill I know, my parents wanted me to have a degree. So, I decided commerce with maths as my stream. Now, many of you will be thinking 💭 why did he choose that stream even having spent so much time coding? Your question is obvious and the following are the reasons:

🏦 I wanted to become a stock market investor and spend some part of my life researching markets and businesses.
🌴 Economics attracts me. Seriously, this subject just made me hook into this stream. Apart of the school syllabus I am used to reading books like (Principles for dealing with world changing order)https://amzn.to/3GEl49y.
💰 As I have told you, I was trapped in a startup trap which also influenced me to take this stream. I wanted to have adequate time for building my startup but when I got into the section, I realized the reality and changed myself as soon as possible.

🥳Opportunities

After reading till here, you can judge that my interests are finance, economics (including history, psychology) and the most important one that is engineering. By the way, for me, engineering is creating a valuable solution that helps people rather than getting a degree.

So for me, I see opportunities for myself in the following areas:

Data Scientist
Machine Learning expert
Fund Manager
Blockchain developer
Business around any of these things:
1. AI
2. Investing
3. Blockchain

⛓️Why am I learning blockchain?

Blockchain can be a future technology as it can be used to solve many industrial problems such as resource allocation and corruption. I am betting on this technology's usability in the industry. If this technology works out, then I am going to rock in the industry. By the way, at the time of writing this blog, I am learning blockchain from a blockchain expert (NOT sponsored) -- https://www.algoexpert.io/content#blockchainexpert.

I hope you have liked this blog. This blog doesn't include all of my 2022's events but I tried to teach you the most important lessons that I learned in the year.

How to use Prisma with express, postgress, and Graphql?

Next Dev — Mon, 10 Oct 2022 14:04:28 +0000

Welcome friends to this new blog. In this blog, you will learn how to set up APIs with the help of an express server. You will learn how to integrate graphql in the express server.

GitHub link — https://github.com/nextdev1111/prisma-postgres-graphql-express

Youtube Video in Hindi

📒Notes

I will be using **pnpm for this project but the tutorial will show you how to do it with **npm.
We will be using **typescript **for this project.

Step1: 📦 Setup

Make a folder by whichever name you want but you need to consider npm naming restrictions.

Then run this command

npm init -y

Make another folder named src. Make a file named **index.ts **in the src folder.

[root folder]

--- src
--- --- index.ts

To install dependencies and setup typescript

This will install dependencies 👇

npm i @graphql-tools/schema @prisma/client dotenv express graphql express-graphql

This will install dev dependencies 👇

npm i -D [@types/dotenv](http://twitter.com/types/dotenv) [@types/express](http://twitter.com/types/express) [@types/node](http://twitter.com/types/node) prisma ts-node typescript

Then type 👇 to create a **tsconfig **file.

npm install -g typescript tsc --init

Step2: 🗃️ Prisma Setup with postgress database

Type this command in your terminal

npm prisma init

Prisma will set up two things in your root folder.

Prisma folder
.env file

In the prisma folder, you can find schema.prisma file.

Let’s add a database now.

go to https://railway.app/

Click on start new project

You can set up a PostgreSQL database. If you find any problem, you can also watch the youtube video.

Then, you should copy the postgresql database connection key

Then go to .env your project’s root folder.

Then change the connection string in your .env file.

→ Remember to also include the password in the connection string.

Then type

prisma db push

⚠️Errors

If you face any errors, you should check the connection string.

Step3: ✨Express Server

This is the basic express server

If you want to add an entry to your database.

You can also use prisma studio

npm prisma studio

Step4: 💪Grahpql Integration

You can use graphiql on this path

[http://localhost:3000/graphql](http://localhost:3000/graphql)

If you want to ask any questions, feel free to ask 👇
Join the Next Dev Discord Server!

Flutter: 🔴 How to Update and Delete Data in Supabase || Part — 4

Next Dev — Sun, 31 Jul 2022 07:10:50 +0000

Hey there 👋, in this blog post, you will learn how to **update **and **delete **the data in supabase using flutter packages (supabase_flutter).

If you want to know how to use supabase in flutter
Flutter Supabase

If you understand Hindi 👇

Now, let’s begin with update and delete functions

Please continue this blog if you are familiar with this one 👇
Flutter: 🔴 How to Create and Read data || Future Builder || Part — 3

This is the read screen.

In the part -3 , I just showed how to load the data. But in this part, you will learn how to delete and update the data.

Delete Button → You can see Delete button in the **trailing **of the list tile.

Update Button → You can see this in **onTap **of the list tile.

Now comes, the edit screen

If you have any question, feel free to ask here 👇
Join the Next Dev Discord Server!

Flutter: 🔴 How to Create and Read data || Future Builder || Part - 3

Next Dev — Sun, 24 Jul 2022 04:16:00 +0000

Hey there 👋, in this blog post, you will learn how to create and read the data in supabase using flutter packages (supabase_flutter).

If you understand Hindi 👇

Firstly, you need to set up supabase in a flutter. So for that, you need to read this 👇 article.
How to use supabase database in flutter || 🔴 Part — 1

Step1: You need to make a table for the supabase database

Step2: Now you need to make a todo.dart file

You can make models.dart file in the **model **folder.

export 'todo.dart';

Step3: Now, you need to make a supabase_data_manager.dart’ in the data folder in the utils folder. eg 👇

Now you can use this code 👇

Then you can make a utils.dart file in the utils folder.

// from data

export 'data/supabase_data_manager.dart';

Now, you need to make a screens folder.

there are 3 files in the screens folder

Create Screen — ‘create_screen.dart’
Read Screen — ‘read_screen.dart’
screens.dart for exporting the above screens

Now, you can switch the screens in the main. dart.

Example

Thanks for reading this blog. You can now try it out.

If you want to how to update and delete data 👇

https://medium.com/@nextdevelopment1111/flutter-how-to-update-and-delete-data-in-supabase-part-4-675bf3f8fcbc

If you have any questions, feel free to ask here 👇
Join the Next Dev Discord Server!

How to setup supabase authentication in a flutter app with deep linking|| 🔴 Part — 2

Next Dev — Sun, 17 Jul 2022 04:38:16 +0000

Welcome friends to this blog post where you will learn how to set up the supabase authentication in the flutter app. Moreover, the deep link is also available.

The people who understand Hindi 👇

If you didn’t setup the supabase in your app, then follow this previous blog where you learn how to setup supabase 👇
How to use supabase database in flutter || 🔴 Part — 1

You can follow this GitHub repository
GitHub - nextdev1111/flutter-supabase-authentication

So, let us come to the app.

Now we will make the screens in screens folder

First we need to auth manager, auth state, auth required state in utils folder.

This is auth state 👇 which you can use to load the data of the user from supabase. If you face any problem, feel free to ask me at discord. Link at the last.

There are 3screens in **screens **folder.

Home screen (user should be authenticated)
Login Screen
Splash Screen

This is the splash screen 👇 which will initilize when the user opens the app.

Now, you need to add snack bars for notifying user.

make this constants.dart in contstants folder.

Now, let’s go to android manifest for adding deep link.

Add this **full **code in the file. Don’t just copy the data line, but copy full intent filter.

In IOS, add this **full **code.

Now, the last step is left

go to your supabase project.

Now, first close your app and then re run it. Your deep link will work only then.

Feel free to ask your questions here 👇
Join the Next Dev Discord Server!

How to use recoil effects_unstable for loading data from API.

Next Dev — Thu, 07 Jul 2022 11:31:37 +0000

Welcome friends 👋, to this new blog post where you will learn how to use effects_unstable for fetching the data from an API.

For people who know Hindi:

In this blog, I will use this API — https://jsonplaceholder.typicode.com/todos

🤔Situation

Suppose I have a website for making todos where I want to load the todos from an API. So, how will I do it with recoil?

Moreover, your project manager gave you this project which uses Nextjs as its framework and has made these files before 👇

atoms/atoms.ts

Index.ts file

🥳Solution to load the data

we have two methods

Method 1️⃣— Effects_unstable

Method 2️⃣— Effects_unstable

⚠️Concerns

If you are using frameworks like nextjs then you need to know something unique and that is that recoil loads the data by serverside rendering which makes the website load slow.

For any questions, feel free to ask here 👇
Join the Next Dev Discord Server!

How to persist the data in atoms with local storage using recoil persist.

Next Dev — Sun, 03 Jul 2022 05:03:40 +0000

Welcome friends 👋. In this blog post, you will learn how to persist the data in local storage in recoil.

For people, who understand Hindi

👁️Situation

Suppose, you are making a to-do list website where people can type todos and todos will be stored in the local storage. But the question arises, how can you persist the data with local storage.

😍Solution

Let’s take an example 👇

In the 👆 example, there is an atom(‘todosAtom’) that is responsible for storing all the todos.

Now, we can use effects_UNSTABLE

Here, we are using **effects_unstable **which runs when the atom is initialized or changed.

But, unfortunately, you will encounter an error if you are using an SSR framework like nextjs.

🤔Then how to solve it?

yarn add recoil-persist

recoil-persist

Now, all of your work would be done with the help of the recoil persist.

If you have any questions, feel free to ask here👇:
Join the Next Dev Discord Server!

Atom Family in Recoil for Statement Management — Nextjs

Next Dev — Wed, 29 Jun 2022 11:30:23 +0000

Welcome friends. This blog post will teach you how to use the recoil atom family to update the specific atom in recoil state management.

If you understand Hindi, 🥳 this is for you 👇

If you want to know the basics of recoil
Recoil State Managment

🤔Situation

When to use atom Family in recoil.

Suppose, you got a project for making a todo app. Now, you have to make a website where you can edit each todo and also create a new todo.

Firstly, you created a website that uses atoms for storing all the todos, and then you used a selector family for changing a specific todo.

Sample Source Code — https://github.com/nextdev1111/atomfamily-tutorial

Now, you can use this code in your ide.

🤕Problem with this code

There’s a major problem with this code. The problem is that if you update a single todo title, then all the components, which use the atoms will rerender.

This is because, when you change one todo, you ultimately change the whole list which forces all the components to re-render and it takes a lot of power which essentially decreases performance.

😍In simple words

In simple words, the atoms family takes a param and changes a specific item **but atoms don’t take a param and change the **whole atom.

🤔Solution

You can use atomFamily which helps you to edit a specific todo. This is very performant in big sites.

How to use it?

Taking this website as an example, you need to follow these steps:

Step1: Remove Selectors and Add AtomFamily

First, Delete the selector's folder and their imports.

Go to atoms.ts file and change this

Step2: Change the index file

Go to index.tsx file.

Step3: Change the component — ‘Todo’

Go to todo.tsx file in the components folder.

If you want to understand more, feel free to message me at
[Join the Next Dev Discord Server!]
https://discord.gg/hN4Wc5VR4M

Selectors Family in Recoil for Statement Management — Nextjs

Next Dev — Sat, 25 Jun 2022 13:46:39 +0000

Welcome friends. This blog post will teach you how to use the recoil selectors family for state management.

Video for those who understand Hindi:

How to use atoms in Recoil
How to use Selectors in Recoil

🤯Selectors vs SelectorFamily

When you use selectors, you **cannot **pass any parameters for doing some logical work. But when you use selectors Family, you can pass a param and can have a logic.

Example 👇

🤔Situation

Suppose, you have a to-do list website.

Example of the website:

**In simple words, **you enter the id of a todo that you want to edit. Then using the recoil selector family, we can get the data of **specific **todo by passing id as a param.

Then you have made the **atoms **for it 👇.

Index.tsx file 👇

This is your **selectors **file.

Now, let’s go to box.tsx file 👇

Still any doubt 🤔. You can join our discord channel👇
Join the Next Dev Discord Server!

How to connect railway. app with nextjs using Prisma.

Next Dev — Mon, 20 Jun 2022 13:02:01 +0000

Welcome 👋 friends to this new blog post where I will teach you how to connect railway and nextjs with the help of Prisma.

Requirements:

Nextjs Project (Frontend Framework)
Railway.app (This is for the database)
Prisma (I will tell you how to install it.) (ORM tool)

Step1: Make a railway.app project

Then make a postgress database.

Step2: Open your nextjs project.

Then open a terminal and write this command.

yarn add @prisma/client

Then write

prisma init

Then you will find a new folder called **Prisma **in your root folder.

Then go to .env

Before changing anything in .env , go to

Then change this in your .env file.

Now you can see this tutorial:

🤔Situation

Now you have two situations. Either you have tables or you don’t have any tables inside your database.

1. If you have tables in your database.

Just write the command

prisma db pull

Then check out the ‘schema.prisma’ file

2. You have tables. But you want to update them by prisma file.

prisma db push

3. You don’t have any tables in your database.

For example, write this command in your ‘schema.prisma’ to make tables.

Code:

Now, you have to write the command

prisma migrate dev

Then it will ask you for your migration name.
You can write there anything you want.

Then you will see one folder as **Migrations **in your **Prisma **directory.

You can check your database and see the results.

Thanks for reading this blog.

If any question arises in your mind, feel free to ask here 👇
Join the Next Dev Discord Server!

If you want to see a video tutorial in Hindi:
https://youtu.be/Su047Z6FBN4

CRUD Functions using Prisma, Nextjs, and Supabase(Postgress database)

Next Dev — Sun, 12 Jun 2022 07:07:52 +0000

Welcome friends to this new blog post where I will teach you how to use CRUD functions using Prisma(ORM tool) with the help of Nextjs (API folder).

First, you have to setup Prisma in your Nextjs app 👇
Get Started with Prisma and Nextjs with Supabase (Postgress Database)

So, let’s begin

First, you need to install 2 packages

yarn add react-hot-toast swr

😁Create Schema

Then write this command

prisma migrate dev

If you don’t have any GUI tool for managing your data in the database. Then you can write this command

prisma studio

That will open up a website at localhost:5555, by which you can manage your data quickly.

✍️Create Function

First, you need to create a form.

Then you need to make an API ENDPOINT in your app.

To create that, make a file named — profiles.ts in your API folder in the pages folder.

Then write this code 👇

//@ts-ignore in 18th line helps to ignore the type error.

Now you can try the **create **command.

📖Read Function

Then go to your profiles.ts in API folder.

Now you can get the data that you created:

📝Update Function

Then go to your profiles.ts in api folder.

Now, you can see that your entry.name has been changed to ‘Taranpreet Singh’.

⛔Delete function

Now you can go to api.tsx in your api folder.

Now you can test the button.

If you encounter any error, then observe your console logs.

😃Thanks for reading.

If you understand Hindi, you can watch this tutorial 👇
https://youtu.be/NiCQ4KIi6VU

You can join my discord channel here 👇
Join the Next Dev's server Discord Server!

Get Started with Prisma and Nextjs with Supabase (Postgress Database)

Next Dev — Sat, 11 Jun 2022 06:51:38 +0000

Welcome 👋 brothers and sisters to this amazing blog post where you will learn how to get started with Prisma setup in nextjs.

Things which we will need:

Prisma Client
Nextjs Project
Supabase or Any other database
😁Enjoyment

**Step1: **Make a Nextjs project and open the terminal

**Step2: **Write this command in the terminal

npm i @prisma/client

Then write this command:

prisma init

Then you will find a new folder named: ‘prisma’ in your root directory.

Now go to ‘schema.prisma’

You can see something like this.

Then go to ‘.env’ file in your directory.

You have to paste your database URI there

So, let’s go to supabase to find the URI:

Just paste it into your .env file

Now you can enjoy it. You have set up all the things.

🤔Situation

Now you have two situations. Either you have tables or you don’t have any tables inside your database.

1. If you have tables in your database.

Just write the command

prisma db pull

Then check out the ‘schema.prisma’ file

2. You don’t have any tables in your database.

For example, you can write this command in your ‘schema.prisma’ to make tables.

Code:

Now, you have to write the command

prisma migrate dev

Then it will ask you for your migration name.
You can write there anything you want.

Then you will see one folder as **Migrations **in your **prisma **directory.

You can check your database and see the results.

Thanks for reading this blog post.

For people who Hindi:
https://youtu.be/pnai0oGVN9g

For people who want to join discord:
Join the Next Dev's server Discord Server!