abelcastro.dev

Sports Dashboard

2023-11-07

Rest-APIDjangoAngular

Learning Angular by using it on my blog

2023-10-05

TypeScriptRest-APIChatGPTAngular

Mocking APIs with json-server: A Step-by-Step Guide

2023-08-23

Rest-APIChatGPT
1
...
5
6
7
...
10

Abel Castro 2026 - checkout the source code of this page on GitHub - Privacy Policy

I am big football (soccer) fan and follow sports news daily. However, even with this routine, I often find myself unfamiliar with the current standings in the Premier League, Serie A, or other leagues.

In my view, football coverage these days is overwhelmingly occupied with topics like transfer rumors, relegating actual match outcomes to secondary importance.

This observation sparked the idea for my latest project: Sports Dashboard. This Angular-based website displays the standings of the most prominent football leagues across Europe. Additionally, the Austrian Bundesliga features on the site not because it's one of Europe's most critical competitions, but because I reside in Austria and wish to stay informed about local football.

The API

To provide the frontend with data I developed a new REST endpoint: GET https://abelcastro.dev/api/sports/standings/.

The data will be automatically updated every day at 2 AM.

Upting the data

I have implemented a management command import_league_standings.py, which is scheduled to run daily via a cron job on the server.

Conclusion

My goal with this project was to become familiar with Angular, and for me, the best way to achieve that is by working on a real project. In this case, the project turned out to be something truly useful. I hope the Sports Dashboard will also help me to reduce the frequency of my visits to sports news pages.

I wanted to share a little adventure I had while learning Angular. My blog at abelcastro.dev was doing just fine with Django, but I thought, "Why not tinker around with Angular and learn some new skills?" So, I created a playground at ng.abelcastro.dev and decided to see what I could do!

Exploring Angular Fun

Angular is a fantastic toolbox for making web applications more interactive. Even though my blog was working perfectly with Django, I wanted to learn Angular just for the sake of learning, not necessarily to make it look fancier.

Setting Up Angular Playground (ng.abelcastro.dev)

First things first, I set up a separate space for Angular at ng.abelcastro.dev. This way, I could experiment and learn without interfering with the good old Django backend.

Smooth Data Flow with a RESTful API

To make things flow smoothly, I created a pathway for my Angular app to access the blog's data using a RESTful API at `abelcastro.dev/api/posts´ in my Django backend. This API helps Angular fetch blog posts.

The Django Side of Things

In the Django world, I used the Django REST framework to create the /api/posts endpoint. This way, my Angular app can easily fetch the blog post data it needs.

Angular App: Fetching the Data

Inside the Angular app, I used Angular's HttpClient module to fetch data from the Django backend's /api/posts.

Conclusion

You can find the repository for my new angular blog here 🚀.

Introduction

During the development of web applications, working with APIs is a common task. However, sometimes APIs might not be fully developed or available, which can hinder the development process. To overcome this challenge, developers often resort to mocking APIs to simulate their behavior. One popular tool for achieving this is json-server. In this article, we'll walk you through the process of mocking an API using json-server and provide an example of how to create a mock API with custom data.

Getting Started

  1. Installation: First, ensure you have Node.js installed on your machine. If not, download and install it from the official Node.js website. Once Node.js is installed, open your terminal and install json-server globally using npm:
npm install -g json-server
  1. Create a JSON File: Start by creating a JSON file to hold your mock data. You can use any text editor or IDE to create this file. For example, let's create a file named db.json with the following content:
{
 "products": [
   {
     "id": 1,
     "name": "Mock Product 1",
     "price": 19.99
   },
   {
     "id": 2,
     "name": "Mock Product 2",
     "price": 29.99
   }
 ]
}

Save this file in your project directory.

  1. Start the Mock Server: Open your terminal, navigate to the directory containing db.json, and start the mock server by running:
json-server --watch db.json

The mock server will start at http://localhost:3000.

  1. Accessing the Mock API: You can now access your mock API by sending HTTP requests to the appropriate endpoints. In our case, the data will be available at http://localhost:3000/products.

Customizing the Mock API

The example above showcased a simple mock API for products. You can customize the data and structure of the API according to your application's needs. Add more endpoints, nested data, or different types of data to match your requirements.

Conclusion

json-server is a valuable tool for developers to create mock APIs that simulate real API behavior. It allows you to continue developing frontend components without waiting for backend APIs to be fully implemented. By following the steps outlined in this article, you can quickly set up a mock API for testing and development purposes. This approach enhances productivity and ensures a smooth development process, even when working with incomplete or unavailable APIs. Happy mocking!