Ecomm Site-ReactJS -Front End DataBase for JSON API Fetch

While developing a fake ecommerce App this week, I realized that there was a very limited selection that I could find for a shopping API to fetch data from. By limited, I mean I only found one free possibility, https://fakestoreapi.com/docs. Please feel free to message me directly if you know of any others, I’d love to use them. I thought, then, my only option, if I didn’t want to use the Fake Store API, would be for me to create a Rails Application and implement a PostgreSQL DB and build out models and controllers. After a little research I found a site that was actually using their React Application to host its own necessary data. The application held one file for it’s JSON and one file for its images…and in truth, if you wanted to host your images thru a 3rd party service, you would only need the one Data file, with a key/value set for the image url. I am so excited to learn about this! This process will cut out time for me building out a backend, so I can focus on learning more about Javascript and ReactJS functionality. Ya!

Love having more time to focus on functionality!

To set up our boiler plate ReactJS application in terminal run: “npx create-react-app <app-name-here>”. When the application has successfully finished compiling, cd to the application and open it in your specified text editor. Open your terminal within the app and run command: “npm install”. This will install Node.JS, a desktop application (or runtime environment) that runs JavaScript files, into our application. Next, run command: “npm start”. This will automatically launch a local browser so that we can see what our javascript application renders to the DOM.

To set up our json data in our application: Create a new file in the applications ‘public’ folder called db.json. In this file you can code a JSON object named with a key of your preference (my example: “products”) that includes an array value of all of the items that you’d liked to specify as your data.

Image for post
Image for post
db.json data file

Again, you can either host your images on a 3rd party site and incorporate another key value pair per each item here (ex: url: “http://……), or like in my example, you will create a new folder named ‘products’ and save all of your corresponding images into this folder. To follow along, please name each image by their sku + “_2” + “.jpg”. Next, run: “npm install -g json-server”. This will install our json-server for a mock REST API. We’ll need to get this mock server running before we make our fetch request, run command: “json-server public/db.json — port 8000”.

We are now ready to fetch this data and connect our images.

Upon the components mounting, we want our program to immediately make our first fetch to our data and render all products to the DOM. For the sake of this example we will code all of this initial fetch and render our Products component in our App.js file. We will immediately store the data from our fetch in our local state object (as products) and then send that info as a prop to our Products container.

Image for post
Image for post
Initial Fetch from mock API

Our Products component will be responsible for mapping over the products prop that it receives and rendering the data according to how you want it to appear on the DOM. You’ll notice that on line 9 in Products.js image below, the image src is called using the product.sku key.

Image for post
Image for post

Please find an example of this working mock API server in my github repo: https://github.com/osha7/ecommerce-with-filter. Happy Coding!

Written by

Software Engineer proficient in Ruby, Ruby On Rails, Javascript & React JS.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store