Bookmark System & Mark as Read with JSON Data | Deploy React App to Surge | React Bangla Tutorial

7 months ago

🚀 আজকের ভিডিওতে শিখো কিভাবে React অ্যাপে JSON ডাটা থেকে পোস্ট লোড করে Bookmark ফিচার বানানো যায়!
✅ Bookmark বাটনে ক্লিক করলে সাইডবারে Bookmark করা হেডলাইনগুলো দেখা যাবে।
✅ Mark as Read বাটনে ক্লিক করলে সেগুলো রিমুভ হয়ে যাবে।
📦 শেষে দেখিয়েছি কিভাবে পুরো প্রজেক্টটি Surge এর মাধ্যমে লাইভ করা যায়!
🔻 আগের ভিডিওগুলো না দেখে থাকলে আগে দেখে নাও:
📌 React এ Tailwind CSS কিভাবে ব্যবহার করবেন : https://youtu.be/067wnod58sc?si=01T-J_DiTcsfrZmf

📌 React এ AI দিয়ে Fake Data তৈরি করে Show করুন Tailwind Setup + JSON Fetch in Bangla: https://youtu.be/Jc6kOJRWekM?si=ibamzYTpRzxNPz6B
📌 Set Layout and Make React Responsive | Display Blog Data from blogs.json: https://youtu.be/ZwtAsZFKL3k?si=WYuhn6XjoRG_ihKm
📌 Add Bookmark Feature in React & Show Data in Sidebar: https://youtu.be/eHFeKbbrHoM?si=poYFkV-bc-P6rnbC
🧠 এই প্রজেক্টে ব্যবহৃত টপিক:
• React useState, useEffect
• JSON ডাটা লোড
• Bookmark ফিচার
• Mark as Read Logic
• Surge Deployment
👉 ভিডিও ভালো লাগলে লাইক দিও, কমেন্টে জানাও এবং সাবস্ক্রাইব করতে ভুলবে না!

Transcript

00:00Assalamualaikum

00:02How are you?

00:03So in the last video

00:04I'm going to take a bookmark

00:06So I'm going to take a project

00:08development

00:10knowledge book

00:12CMD

00:14CMD

00:16I'm going to open

00:18I'm going to open

00:20NPM

00:22Run Dev

00:24I'm going to open

00:26I'm going to open

00:28I'm going to open

00:30Okay

00:32So

00:34So

00:36So

00:38So

00:40So

00:42So

00:44So

00:46So

00:48So

00:50So

00:52So

00:54So

01:08So

01:10So

01:12So

01:14So

01:16So

01:18So

01:20First of all, we have a block, which we have already done,

01:24block name JSX file,

01:27and we have a mark as read name button,

01:29something that we can do, and we can click on it,

01:34then we can add the bookmark.

01:38Then, we have a button that has a button,

01:43we have a button that has a button that has a button that has a button that has a button.

01:48Here we see, the blocks.

01:51The block has a block.

01:54Then, it is a block.

01:56This block is a block.

01:58So, blocks.jsx, blocks, and single blocks.

02:04Then, we have a page.

02:06We have a block which is not a block.

02:09Then it is a block.

02:11It is a block.jsx.

02:14This is the same.

02:15It is the block.jsx.

02:17So we will be able to establish the app.js Asset so would be able to establish the status of the app.js i want to be able to establish the status of the application of the application.

02:37to have the app.jaxes

02:40the main is the senior most

02:44how to get the app.jaxes

02:47so let's see if we are going to show

02:51how to get the app.jaxes

02:54when we are going to state declarer

02:56the same name

02:59set bookmark

03:00we are going to state declarer

03:03the same way to state declare the code

03:05where the name has the name

03:07const

03:09we will declare the bookmark

03:11the name of the bookmark

03:13the name is

03:15mark as read

03:17reading time

03:19reading time

03:21set reading time

03:23reading time

03:25use state

03:27use state

03:29use state

03:31.

03:33.

03:39.

03:43.

03:45.

03:47.

03:49.

03:51.

03:53.

03:55.

03:56.

03:57.

03:59.

04:06.

04:16.

04:21.

04:23.

04:27.

04:28.

04:29.

04:39.

04:43.

04:48.

04:53.

04:57time add it

05:04so that we are going to do

05:07airport

05:09I am going to go to a handle

05:12the car is available

05:14I am going to add the app.jacks

05:16and I am going to add the button

05:18I am going to add a blog

05:19so the blogger is going to add

05:22the blogger is already

05:24this.

05:25So, here, there is the same type ofiller, you should have the same type ofiller.

05:31with the same type ofiller, its name, the same type ofiller, it appears, and the same type of

05:41iller, which gives you a text.

05:44This is a type ofiller.

05:46It shows you that your information is not there.

05:51I'm going to receive column I love that receive currency I call it a

05:54number of portable blocks every time I'm not sure I'm not sure I'm not sure

05:58I'm gonna pull a block is a job of the poster say job of the poster say

06:01pull a block Tonya Jeta say we blocked so we've got a lot of me going to

06:05support one tell you that he got to have a job I can imagine a map course

06:08he blocks a blocks a map I do what he said I'm not to the attack you

06:12a blog I can a KSA I can a KSA can handle book I said I got that lawyer for a blog

06:20I said look okay so a glass a tabra icon a wheelchair on the radio about the handle

06:26Marcus Reid it around rubber function is about a deal of what I see I'm a blog

06:31about I see tell them another conclusion to have a blog is it over tell them

06:34under block to go yellow is it block is a blog at the last see I call it a

06:39record table receive critical tell them read a recipe called in a blogger even

06:42about when I think about it was not on the bottom auto for a agent knowledge

06:46book a can I'm not after justice money I'm not sure about their function

06:50related to see airport I'm lucky go see blogger doxie blogger about a block

06:54to come about agency blocks a doxie blocks to come about energy blog a

06:58phone blog is a market reader say it can I'm not a partner a call careful so

07:02Marcus read code I say is a can I say can I'm the anchor this is a corner of the

07:05I am a connector button to record this is button to develop so Marcus read detector button is a

07:10chat it was a little as a so I'm going to get a touch and scotable yeah so I'm going to

07:14back on three globally I have probably like he can a mark as read I can a Marcus read the

07:20lump a bar I'm ready to take care of us the Marcus ritual last year I'm rich I lose you

07:25turn mother to a design go to the body check a doctor but I'm gonna class for the class name

07:29I can underline the baby underline that put a wheelchair I'm ready to party which a

07:34font font blue board is love air but I'm not a letter color is a very text color

07:39and keep text text blue I text blue charge of the circle on the heat

07:47I was the I say terminal a color color did this even I'm right honey on the

07:51function of it called group the function of a control video on click the on click

07:57one clicker with a function number I don't ever say the same column control s

08:01and I'm gonna ask the master but I can click click on me see how I'm gonna can

08:04over a car on check and I'm other nine kissing a I'm not going to say according to

08:09thought so I'm not going to want to inspect your book on the ship I press

08:12worry I can actually let's go ahead and click color time added it here's a click

08:16color time added it with this a term on our button casco tis a new port again

08:20respond to policy so I'm already kind of link to take us a bar to come on a

08:24.

08:29.

08:37.

08:39.

08:41.

08:45.

08:53.

08:54.

08:54the previous page I hope they are now doing so.

08:56This page is the site for reading time.

08:59Here's the attention to the reading time.

09:01Here is the reading time.

09:04And then the reading time is added.

09:08The writing time has been added.

09:11Now I have to add the static counts to read time.

09:15The answer to the reading time is added.

09:18To get the accurate number,

09:21I am the same time to find the same time to go then I'm not said book said reading time

09:26I'll be today no good that could do so we take other I'm a problem a problem

09:32I said reading that by reading time that I'm a part of the wheelchair mother book marks

09:36a bit of a hand on a bookmarked about his love a girl but is a bookmarks have a

09:40bar on channel a bar on channel I'm ready to go to show my dad I can I'm not

09:45reading time is equal to reading time

09:52reading time save

09:53save

09:55reading time

09:57bookmarks

09:59bookmarks

10:01reading time

10:05copy

10:07bookmarks

10:09receive

10:11reading time

10:13read

10:15like

10:17read

10:19read

10:21reading time

10:23reading time

10:25reading time

10:26it was

10:35reading time

10:37read

10:39read

10:41it is a river with seven and a arrow function the a potato have been a little it ever read

10:47was able sorry ever day ever job or a judeo am right and a customer again

10:52lucky go to see bookmark pool block taru puritan right to the capital tina so a

10:573-0 cham raiji diva said deeper for a a can i'm writer of a dilemma reading time ever to

11:02design is spent time on read it a solar checks of borrow minute okay some of the refresh query

11:08Alright, go and get check this...

11:16See, you can see this...

11:24okay

11:45okay

11:54ok

11:56hello

11:58hello

12:00hello

12:02okay

12:04okay

12:06okay

12:08okay

12:10okay

12:12okay

12:14basically

12:16okay

12:18okay

12:20you can say

12:22that

12:24okay

12:26okay

12:28okay

12:30I

12:31now

12:32that

12:34I'm

12:36I like

12:38gonna

12:40see

12:42I'm

12:44I'm

12:46I'm

12:47last name BG , blue type , blue , blue , blue , blue , 300 , very good ,

13:00here we have margin , 2 , margin , 2 , margin , 2 ,

13:08padding , 4 , rounded , 3 , 3 , rounded , 3 ,000 , rounded , 3 , , x , , x , x , x , x , x , x , x , x .

13:33If you need to add a new page for the text also says you can see the text is written in the chat box

13:48You can see the text, the text is written in the chat box

13:52This is the key to change the text blue .

13:56So text blue, text blue ,

14:02It is in the left hand, it is in the left hand.

14:08Click on, click on, click on click on, click on the right hand button.

14:15click on read then markahaz read , click on click on it

14:24then click on it

14:26click on it

14:28In this example we can make the content

14:32what we can do is

14:36we can make the link a bookmark

14:41and then markahaz read

14:42so I can select the block then click on the bookmark read and then click on the bookmark or the bookmark read

14:50and then click on the bookmark to click on the bookmark to remove

15:06Okay, so we have to go to the code.

15:10We have to inspect the code.

15:15We have to inspect the code.

15:20We have to take the code.

15:22Encounter two children with the same K.

15:26K should be unique so that components maintain that identity occurs update.

15:30Non-unique K may cause children to be replicated or omitted.

15:35The behavior is unsupported and could change in a future version.

15:38Okay, so we can find this.

15:40We just find this.

15:43We can find this.

15:46We have to find this, either.

15:48We have to find this.

15:49We can find this in the next video.

15:51So, we have to click on the C.

15:53And we will search on the next video.

15:56This is the title.

15:58I am going to click on the title.

16:02I am going to click on the title.

16:05That is the title.

16:07It is the title.

16:09The title is the title.

16:11It has a unique ID.

16:13We have to file the JSON file.

16:15So, it is the title.

16:18It was the title.

16:20The ID was already shown.

16:22This is the size of the block ID.

16:28I use the ID.

16:31At this spot, the hashtaggo Jieiro Player.

16:36Make sure this is the library and write the rights to our Tonですか.

16:43der, the title is also the title.

16:48તયે પર્ષ સરસેલગ બરશયે આક઱ હમે પર્ણો વેહસે

16:55.

17:00.

17:03.

17:14.

17:19.

17:20.

17:23.

17:24nd

17:24.

17:24which it so it after I call an event of the Google Chrome

17:27I'm sure correct extension right corner Lamp okay and it are a me pin

17:33quickly in good film was a baruch a I'm ready a mother can actually I share

17:38program like an a click column a can a inspect query inspect color for a

17:43console a console a job or for a chamican a click color if it seems wrong

17:48troubleshoot the instruction the pace isn't appear to be using react what

17:52happened allow file to access okay the react tap don't show up okay react

18:02developer tool key will say file slash URL allow access to file URLs Chrome

18:09extension setting page okay

18:15extension is I manage extension I can take a chamber react table upper tool

18:20details as I can take a wheelchair on all side is also a site setting I'm gonna

18:27get so 9 allow access to file URL okay

18:30as I am rich alien incognito aegu site does it at the wrong road chain

18:36except for the body to do DC ever to be directly quickly a practice is the

18:41film a baruch a reactor upshot at the last test the pace is in development

18:45development built on react okay so I did react there we to say about the day I'm

18:50raho check and take a canina I cannot I don't know I take a low option to send a

18:56center hole check on it and pay

18:59mm-hmm okay so I'm gonna quickly okay that can age I'm even bookmark

19:05I have to go check my number I'm I can take a channel I know I can take a

19:14check

19:15bookmarks

19:16check

19:17check

19:18check

19:20check

19:21check

19:22check

19:23check

19:24check

19:26check

19:27check

19:28check

19:29check

19:30So basically should map a map it will be two parameters

19:34Is this the third parameter ...

19:36We'll state the same parameter

19:37We'll put a date on bookmark

19:41I'll build an actor

19:42a vector parameter

19:44And it's the index

19:45So this is the next parameter

19:47We'll start with a bookmark

19:50And with a I like it

19:53I'll call it I'll write

19:55and then click on the IDX

19:56If the IDX is the name of the name

19:58okay set color ever is the jay javaar pere amrita ke refresh the the lamp a

20:03project a mre aqean e click koree r kentu kono error as the sna kano karo chay id maan

20:08nne hoche poti bar act act agarano tuna id dhita se so he caro nne hoche a

20:12maadere aqean tu r kono error dhita se na eta hoche acta maadere problem solve

20:17kola amra acha second hoche aamra jeta chaayitie silla mmeetle red off raki

20:20shetho chayitie silla amra jeta chayitie silla mshetho chay jay aamadere jokon amra

20:26Sometimes, we can click on the link to the text.

20:29After we click on the link, we have no click on the link.

20:43I will click on the link to the link to the link to the link.

20:51So, this is the block, handle mark read, handle mark read is called Blog

21:00So, this is the block, this handle mark read, this is the handle mark read, and here we will structure our ID

21:08Distructure as a blog.json, ndistructure as a blog.json, ndistructure as a blog.json ndistructure as a blog.json.id and then the idea was used.

21:19reading timer for a I'm like an idea of a credible this is a way I did a

21:24physically another G really money issue ideas a blog just on a idea say

21:29which I'm right I can't be able to love and now that I'm right after

21:33Jesus was a a can't answer for a AJ I'm on their J mark as reader say

21:38Marcus reader J handle us a handler bit or a I'm wrong say I'm under it ago

21:43I'm under which is my J handle book for click and Marcus read a timer for a

21:48I'm not select I did this party is a mother J I got this it I did the love and

21:52now I'm like a console of the key that I'm not a crossover console dot log

21:57I'm a there J I did a set a whole chapter like the watcher remove remove I

22:03remove item it for a much I'm like another idea of a particular a bar I can

22:09accuse you for single or unexpected token ID is land okay a connector comment table

22:16We are going to inspect and inspect, but we click on the console and click on the console.

22:26We click on the console and click on the list.

22:30So, it's the ID and ID.

22:33So, we already know that it's a simple simple thing.

22:37simple genieze jeraki got the way set out a mother is a console logging of idea

22:41say a can I'm legit a core was it how much I am there a honey I'm rock

22:44filter cool because I tell I'm a key girl I'm not connect a variable

22:49become a const remaining bookmark remaining bookmarks is equal to another

22:57bookmarks as a ej can a quote is a bookmarks as a a bookmarks a bookmarks

23:03marks bookmarks dot filter filter go filter go filter go filter a condition

23:11another filter condition was on the calendar ago I'm gonna check on the

23:14bookmark is a popular local bookmark this is a loop column a bonnet or

23:18better take a amrita core was it out check bookmark book book mark book market

23:25j ideas a bookmarker ID and not is equal to not is equal to a cha okay it

23:31not is equal to id

23:35save column

23:37remaining bookmarks

23:41filter

23:43and then

23:45set bookmarks

23:47set bookmarks

23:49remaining

23:51bookmarks

23:53save column

23:55reload

23:57add column

23:59paste

24:03symbol

24:09save column

24:11assault

24:13only

24:15you

24:17use

24:19and

24:21numbers

24:21number

24:25the

24:27is

24:29First, you can click on it, and then you can click on it.

24:32So, this will be a very easy option.

24:35So, this is the main tool to add,

24:38so that you can use the main theme.

24:42You can add the githah to the key.

24:45So, what do you do with the first thing?

24:46I'm going to add the githah to the add dot.

24:50Then, we can add the githah to the key and the working copy of the src app will be replaced by the crlf.

24:57I am going to get commit commit m

25:03get commit m key

25:06finally done

25:09finally done something is affected

25:11ok

25:12get push

25:14so get push

25:16get up

25:17get up load

25:18get up load

25:19get up load

25:20get up load

25:21get up load

25:22get up load

25:23download

25:24get up load

25:25get ignore

25:43get stop

25:47get start

25:48get start

25:49get start

25:51get start

25:52topic

25:53A key system is, Deploying the app, you may run npm run dev build command to build the app

26:01So, the app is very important, so we can make it, so we can run it, npm run build

26:08We can run it, run it, run it, npm run dev, development is, so development is, in all of the other things

26:15But, when we build it, we can run it, npm run build

26:19Alright, so we can run it, npm run build run, and build is done

26:27So, build done, build is done, but we can see it, we can see it, and see it, and see it,

26:33then we can see it, npm run preview, the app is also done, so we can see it, so we can see it

26:40I can see the video in the video

26:42I will see the video

26:44I will see the video

26:46Netlify

26:48Netlify

26:50We will see

26:52Google firebase

26:54Search

26:56First, install search

26:58If you haven't already

27:00Search is not

27:02If we don't have to do

27:04We will see search

27:06It is very simple

27:08When you run

27:10npm install g search

27:12When you run

27:14npm install g search

27:16CMD

27:18Enter

27:20Enter

27:22Search

27:24Install

27:26Install

27:28We will do

27:30React

27:32Npm run build

27:34Npm run build

27:36Don't do

27:38Npm run build

27:40But

27:42Search

27:44Search

27:46Search

27:47And

27:48Email

27:49Enter

27:51Select

27:52Click

27:54Enter

27:58Click

27:59okay so I can email password or for it which a mother is another can project

28:17distal a chairman domain car we color dot searcher as G a sinister hello and a

28:24mother attack on a photo photo upload or for a I'm ready to do is a car color

28:32search as G a name of the show is a I'm ready to go and I'm ready to go and

28:40carry color dot as G I'm ready to go last yes I'm going to go and I'm going to edit

28:46code like thorean hocha a mother is a knowledge book data say I'm going to say

28:50Now just hold aいきます

28:55So, anything I would have put at

28:58put create a module

29:20it had to return 9 with plus react as an always to get into what I said but

29:27accounts in the motor high nature okay so I'm lucky god what I found it the only

29:31one equally as a and your to build good the NPM run will delay the Badma

29:36number will die how they were counter on Richard motorbils see both currency and

29:40kind of bolt honey the car we color search to say a bullet item of the

29:44search dog is today by looking to other LinkedIn was your bond is a link to

29:48is a curvy color search .sg

29:50it is a change

29:51it is a inter

29:52inter the level of the data change

29:54massive smile.search.sg

29:57so

29:58so

29:59so

30:00how to do it

30:01how to do it

30:02how to do it

30:03custom domain by adding

30:04search

30:05you domain.com

30:06custom domain

30:07you can do it

30:08you can do it

30:09you can do it

30:10search

30:11I'm going to do it

30:12I'm going to do it

30:13check on a

30:14c name

30:15c name

30:17c name using cpanel

30:18custom domain

30:19add

30:20so

30:21this is a public folder

30:23public folder

30:25public folder

30:26I'm going to check

30:27folder to go

30:28file to go

30:29name

30:30just c name

30:31cn

30:32a m

30:33cnm

30:34cnm

30:35cnm

30:36and

30:38a

30:39cnm

30:40and

30:41a

30:42cnm

30:43cnm

30:44dc

30:45tnm

30:46a

30:47y

31:04go the low chair that another curve color search as g it'll be taken to

31:11ijata to last day same website damage it of the COO to this at low I want to

31:16know what I can tell last day so be simple as it a motorway said on the

31:24radio to last yes so we're going to simply wait after a sergey deploy got

31:28the word not about energy or no good how deploy got the charnik and our

31:31as a static web render as a flight controller say on a gas on a gas

31:36energy to the church that they are cut about it could easily Koraja among

31:40the guitar of the application level say I'm not Janik it at dot

31:44double check it see your MIT commit and deploy deploy it

31:55I will check it it was okay in the chest I said he had a good color so I think

32:02I'm gonna use a problem is that could be a project a money money on a

32:08borrow is a correct apart color color which I'm a public that's not just a

32:11currency so do you go to an abortion tell us a comment over now to the visit

32:15I can tell a practice code second next video that's how it doesn't know

32:17about the consulta gonna love is a salam alaikum

Bookmark System & Mark as Read with JSON Data | Deploy React App to Surge | React Bangla Tutorial

Category

Transcript

Comments

Recommended