Page Views Counter: Netlify Dynamic Site Challenge using Netlify Blobs

This is a submission for the Netlify Dynamic Site Challenge: Build with Blobs.

What I Built

Welcome to the Page Views Counter project!

I've implemented a page view counter using Netlify Blobs and Netlify Functions, allowing us to monitor page view efficiently.

Implementation and Usage Details

• Objective: Track page views.
• Implementation: Implemented an API with Netlify Functions and store view counts using Netlify Blobs Service.
• Usage Instructions:
  1. Send a GET Request: Send a GET request to the API endpoint with the URL of the page to track.
  2. Receive Response: Receive the response containing the page URL and its view count.
  3. Display View Count: Display the view count on your page as needed.

API Endpoint

• Endpoint: https://page-views-counter.netlify.app/page_view?page=https://example.com/index.html/
• Method: GET
• Request Parameters: page (URL of the page to track)

• Sample Request:

  curl https://page-views-counter.netlify.app/page_view?page=https://example.com/index.html/
  

• Sample Response:

  {
    "data": {
      "page_url": "https://example.com/index.html/",
      "view_count": 8,
      "last_modified": "2024-05-11T07:45:42.482Z"
    }
  }
  

The API response includes the page URL and its corresponding view count in JSON format.

Demo

View Live Demo: https://page-views-counter.netlify.app/

Platform Primitives

I used Netlify Blobs as a data storage solution to store the view count data for each page. Whenever a page is visited, the view count data is incremented and stored in a Blob associated with that specific page.

GitHub

kananinirav / page-views-counter

Page views counter using Netlify Blog and Netlify Functions

Page Views Counter

Welcome to the Page Views Counter project! This project aims to track the number of views each page receives.

I've implemented a page view counter using Netlify Blobs and Netlify Functions, allowing us to monitor page view efficiently.

Implementation and Usage Details

• Objective: Track page views.
• Implementation: Implemented an API with Netlify Functions and store view counts using Netlify Blobs Service.
• Usage Instructions:
  1. Send a GET Request: Send a GET request to the API endpoint with the URL of the page to track.
  2. Receive Response: Receive the response containing the page URL and its view count.
  3. Display View Count: Display the view count on your page as needed.

API Endpoint

• Endpoint: https://page-views-counter.netlify.app/page_view?page=https://example.com/index.html/

• Method: GET

• Request Parameters: page (URL of the page to track)

• Sample Request:

  curl https://page-views-counter.netlify.app/page_view?page=https://example.com/index.html/

• Sample Response:

  {
    "data": {
      "page_url": "https://example.com/index.html/"
      "view_count": 8,
      "last_modified": 

  …

View on GitHub

More Ideas to Explore 💡

• We can develop an API to store and track page-like counts.
• We can display the most popular posts on a static website.
• Utilize Netlify Edge functions to gather location-based data and store it in Netlify Blobs. This enables the display of location-specific top posts or most-liked posts, etc...
• And many more use cases 😀

Subscribe to My Newsletter:

If you're ready to subscribe, simply click the link below:

Subscribe to My Newsletter

By clicking the link, you'll be directed to the newsletter page, where you can easily subscribe and receive regular updates delivered directly to your inbox. Don't miss out on the latest trends and expert analysis in software development.

Stay updated with my latest and most interesting articles by following me.

If this guide has been helpful to you and your team please share it with others!

Comments

[Philip How]

Well done!

[Kanani Nirav]

Thank You 😊