How to create JSON Server and Fetch Data For Front-end

How to create JSON Server and Fetch Data For Front-end
In this tutorial, we are going to create a JSON server and fetch data from it to test the front-end of the application. We will make a mock API. Sometimes we need some data for testing Front-end, JSON Server provides a mock API for testing the front-end. So we will look at how to make a beautiful UI using Html and CSS and fetch data from the JSON Server as well as we are going to filter the data which we fetch from the JSON server.
Comment us if you have any questions or
👉 Support Me on Patreon 😊:
/ dailytuition
🚀 Udemy Courses:
www.udemy.com/...
🎅 Playlist :
Complete MERN Series
• Getting Started with M...
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
🛠️ Tools I use:
🟠 My Theme: • Finally, I am Back! St...
🟠 Font Family: fonts.google.c...
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
👉 Follow us:
🟠 / akki.2013
📂 Source Project
📦 github.com/aka...
⏱️ Timestamps ⏱️
00:00 - Intro
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
More Videos:
💡 Complete Node Course
• Complete Node & Expres...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 React Complete Tutorial
• Complete React 16.8 Cr...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete Mobile Shopee E-Commerce Website Course - PHP & MySQL
• Complete Mobile Shopee...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete Portfolio Website with Bootstrap - HTML/CSS
• Complete Portfolio Web...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete Responsive Blooger Website Using HTML/CSS
• Complete Responsive Bl...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Create a Shopping Cart Using PHP and Mysql
• Create Shopping Cart U...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Asp.net Registration Form Design with Validation Part - 1
• Asp.net Registration F...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete CRUD Operation with PHP MySql Database
• Complete CRUD Operatio...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 What is Node.js? How to install it?
• What is Node.js? Only ...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 PHP Complete Registration & Login System Using MySQLi - Complete Guide
• PHP Complete Registrat...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Hosting WordPress Website with Free Hosting
• Hosting Wordpress Webs...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Bootstrap Grid System The Complete Guide - In Action
• Asp.net Registration F...
Like this video If you find anything useful. Share with your friends that is all for now I will see you In the next one.
Thank You...! 🙏
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
#dailytuition #programming #tutorials #code #vscode

[@caugbarros]

Hi from Brazil! Your video helped me a lot, thank you, great work 😊

[@DailyTuition]

Glad it helped!

[@sachinkumanache6603]

great sir now i understand how to create json server 🙏🙏

[@Comedy_Center12]

Love You Brother ❤❤❤❤

[@DailyTuition]

Keep supporting.

[@rp-th6wh]

Thank you so much brother

[@DailyTuition]

Always welcome

[@AllinOneBox8]

Thanks, your video is very clear and understandable

[@forester1]

Sir i want to use it for mobile application back end server database Like firebase realtime data base Is it possible ? Is it secure ?

[@DailyTuition]

Yes it is

[@ManishSharma-lm3wg]

also how to perform crud operations on this ?

[@young_blackafrica_my_pride8625]

This is awesome 💯

[@VirtualVortex4356]

Thankyou for the tut

[@gowthamip6688]

It's really nice and now I got some idea about json server✨.. Thank you for providing valuable vedio

[@DailyTuition]

You are most welcome

[@raymondmichael4987]

Being wondering, can you create a “production ready “ application using sveltekit & tailwindcss using json-server as a mock api. I enjoyed the last production ready series with nodejs

[@DailyTuition]

Yes sure.

[@kacperkepinski4990]

why your port is 5500 and you write ip instead of localhost in browser?

[@PoonamKumari-wc5ls]

Sir How to upload this angular app with database on online server like AWS or netlify

[@deepmane5845]

inside template literals how to add onclick function for me it say undefined

[@MuhammadIrfan-ni9pb]

Sir how to change color status depend on situation, for example green for active red for inactive? Thanks sir

[@raymondmichael4987]

You put expression to test on status in the class names like class=‘ text-${status == “active”? green : red}-500’ That is: If(status == “active”) return “green” else return “red” Happy coding. Greetings from Tanzania 🇹🇿

[@sacmah2655]

How can someone display this information by just clicking a button?

[@illusionShadowvlogs]

sir react app install next new object create freamework start sir help u sir

[@hkmedia238]

i AM BATMAN

[@abdurrahmanrasel408]

Very helpful 🔥

[@gangstersofsona8486]

Very helpful video Sir. But, even after removing the html code for "tr" I get displayed undefined in the table as first row. The other row data are perfectly loaded from json server. Can you please help me with that?

[@mdismailhossain2219]

You are doing a great job Sir......we are listening to you, learning from you.....Lots of love and respect...

[@DailyTuition]

Thank you. Keep supporting

[@sr.nitish2268]

You are the best...we liked your videos and leaned alot from it...please keep teaching us :)

[@DailyTuition]

Thank you, I will

[@mihuynh1825]

Hi thanks for your video. Why is it reloading the page even I used preventDefault() to prevent onclick/submit of button of the form?

[@DailyTuition]

Plz show me the code

[@hidayet.hidayetov]

Calm down while listening :) tnx

[@ManishSharma-lm3wg]

awswome video, please provide src code as its focused on data fetch so had to type front end long

[@DailyTuition]

It's in the description

[@chsuman1055]

Could you please explain with out using tables ?

[@DailyTuition]

What do you want me to explain?

[@mornelouw]

The first 11mins 36 is a waste of time. JSON server explanation only starts after that

[@ericyamir]

great video. what do I need to do to display amounts as $100,000 instead 100000?

[@uminhtetoo]

Thank you so much for sharing your knowledge, Sir.

[@kareemreda55]

name theme and font family in vscode

[@nishanthcodes4576]

Life saver!!

[@codeAlongwith]

Your making life hard for yourself without using emmet.

[@akashchauhan4142]

😂

[@lifebest4404]

Sir how to create uber app backund php

[@DailyTuition]

Backend?