feat: mock data api

[Matdweb]

About the Pull Request

This pull request introduces a vital API endpoint, api/posts, aimed at streamlining API calls to both JSONPlaceholder and Picsum Images. This endpoint efficiently retrieves post data and images, centralizing them in the frontend and managing the data using the Redux Toolkit state manager. It employs the createAsyncThunk function to handle API requests, ensuring seamless data display within the application's layout.

Details

Objective

The primary goal is to harness the capabilities of the JSONPlaceholder and Picsum APIs for fetching posts and images, respectively. This implementation leverages API endpoint technologies and manages information through Redux Toolkit.

Changes Made

• Instead of separate api/posts and api/images endpoints, we combined the logic into a unified api/posts endpoint, streamlining the handling of both post and image data. This endpoint consistently returns posts along with associated images.
• The endpoint is designed to retrieve a maximum of 12 items (posts) from the JSONPlaceholder API, ensuring that the total number of returned items is capped at 100 posts. This setup guarantees that the app can retrieve no more than 100 posts and images.
• The redundant next/font package has been removed, as Next.js 13 now includes it by default.
• Configuration changes were made in the next.config document to define the host for Picsum images. This enables the use of the Image component provided by Next.js.
• A types/ folder was created to house types for the posts and images objects.

Redux Configuration

• The postsSlice was created with an initial state containing properties for isLoading, posts, and error. The posts array stores individual posts.
• Reducer functions addNewPost and addNewPosts were implemented to add a single post and an array of posts, respectively.
• The fetchPosts function was established using createAsyncThunk to handle requests to the api/posts endpoint, returning an array of posts upon success or marking the error state property as true.
• The fetchPosts function requires a lastPostId parameter to function correctly, as it uses this parameter to track the last fetched post and determine the remaining posts to retrieve.

All of these features have been implemented and are demonstrated in the application's layout. The pull request also includes essential dependencies, configuration changes for hosting Picsum images, and notes on potential performance impacts. Screenshots and a video demonstration have been included to illustrate how the changes function in practice.

API Endpoint: /api/posts

About this endpoint

The /api/posts endpoint is a core feature of this application, designed to efficiently retrieve post data from external sources and centralize it for use in the frontend. This section provides an in-depth understanding of the endpoint, its functionality, usage, and response.

Purpose

The primary purpose of the /api/posts endpoint is to streamline the retrieval of post data while adhering to best practices. It simplifies data access by fetching posts from the JSONPlaceholder API and managing this information seamlessly in the app.

Functionality

The /api/posts endpoint functions as follows:

• It is accessed through a POST request, following a structured format.
• The endpoint is optimized to retrieve a maximum of 12 items (posts) from the JSONPlaceholder API.
• The total number of returned items is capped at 100 posts, ensuring efficient data management.

Usage

To use the /api/posts endpoint, make a POST request with the following structure, as shown in this example using the fetch method:

await fetch('/api/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ lastPostId })
});

Ensure that the method is set to 'POST' and provide the request header with 'Content-Type' set to 'application/json'. The body of the request should include the lastPostId parameter, which is crucial for tracking the last fetched post.

Response

When you make a POST request to /api/posts, the endpoint will return a response containing an array of posts. This array represents the retrieved posts and associated images, facilitating further usage and display within the application.

Dependencies:

• Posts: JSONPlaceholder Posts
• Images: Picsum Images

Configuration Changes:

• Configure HOST for Picsum images in the next.config document.

Impact:

Performance Impact:
It's worth noting that there might be room for improving the image API provider or the loading process, as the loading of images may currently be relatively slow.

Screenshots:

See how the changes work:
create-mock-data-api-test-video

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
twitter-clone	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 1, 2023 5:03am

[Matdweb]

Great work on this pull request! It's evident that a lot of thought and effort went into creating the /api/posts endpoint and its integration into the application.

I noticed that you've implemented addNewPost and addNewPosts as reducer functions in the postsSlice. While these functions can be helpful in certain scenarios, they might be unnecessary in this context. This is because the state of the posts is updated when the fetchPosts function is applied. The fetchPosts function already handles adding new posts to the state.

In most cases, having both addNewPost and addNewPosts alongside fetchPosts might lead to redundant code and complexity. I would suggest considering whether you truly need addNewPost and addNewPosts, and if they can be safely removed to simplify the codebase.

Overall, this pull request is a great step towards improving data retrieval and centralization in the app. Keep up the excellent work!