JSON Server Mini-Series

Introduction

• Presented by: Vishwas
• Series on: JSON Server
• Sponsor: Tascade (organization and collaboration platform)
  • Offer: 100% lifetime discount

Video Overview

• Title: What and Why of JSON Server
• Purpose:
  • Introduction to JSON Server
  • Set up package.json for a simple project
  • Overview of features in JSON Server

What is JSON Server?

• An npm package to create fake REST APIs with zero coding.
• Why use it?:
  • Front-end developers need mock data for prototyping.
  • Supports asynchronous data fetching.
  • Handles GET, POST, PUT, DELETE requests.
  • Saves time in backend setup (no need for Node, Express, MongoDB).

Key Features of JSON Server

• Use a JSON file as a database.
• Supports API requests for:
  • Querying a list of items
  • Querying by ID
  • Filtering
  • Sorting
  • Pagination
  • Comparison operations (e.g., greater than, less than)
  • Full-text search
  • Parent-child entity relationships
  • POST, PUT, DELETE operations
• Configuration options

Prerequisites

• Understanding the JSON format.
• Basic knowledge of how an API is consumed in a front-end application.

Example JSON File

• Contains two keys: products and reviews
  • products: Array of 10 objects (each with ID, title, category, price, description)
  • reviews: Array of 5 objects (each with ID, rating, comment, product ID association)

Setting Up JSON Server

Step 1: Create package.json

• Command: npm init -y

Step 2: Install JSON Server

• Command: yarn add json-server or npm install json-server

Step 3: Create a start script

• Add a script named serve-json in package.json: "scripts": { "serve-json": "json-server --watch db.json" }
• Command to run it: yarn serve-json
• Visit localhost:3000 to see the JSON Server homepage.

Next Steps

• Learn how to query and mutate the JSON file via API endpoints.
• Start with GET requests in the next video.