This project demonstrates the implementation of a server-side cache to enhance the performance of a web application that interacts with an external API to fetch and display data. In this example, we've built a simple application using ExpressJS and React that fetches Pokémon data from an API and displays it using a React frontend.
Implementing a server-side cache can significantly reduce the load times and enhance the performance of applications dealing with large volumes of data or frequent data access. This example showcases a basic file-based caching system that stores JSON responses for Pokémon data fetched from the PokeAPI.
Before you start, ensure you have the following installed:
- Node.js
- npm (Node Package Manager)
To set up the project on your local machine:
-
Clone the repository:
git clone https://github.com/latitude-dev/server-side-cache-tutorial.git cd server-side-cache-tutorial
-
Install dependencies for the server:
cd server npm install
-
Install dependencies for the client:
cd ../client npm install
To run the server and the client applications:
-
Start the server:
cd server npm run start
-
In a new terminal, start the client:
cd client npm run start
The server will be running on http://localhost:4000
, and the client will be accessible through http://localhost:3000
.
Once both the server and client are running:
- Navigate to
http://localhost:3000
in your web browser. - You can view Pokémon data by entering a Pokémon ID into the input field and clicking the search icon.
The application will display the Pokémon data fetched from the server, utilizing the server-side cache to speed up subsequent requests for the same data.
- This project utilizes data from PokeAPI.
For more information about this project, check out the tutorial.