How to Create an Ecommerce Site with React

Close

How to Create an Ecommerce Site with React

Spinning up a Fake Back End

In the next step, we’ll set up a fake back end to store our products and handle user authentication. As mentioned, for this we’ll use json-server to create a fake REST API and json-server-auth to add a simple JWT-based authentication flow to our app.

The way json-server works is that it reads in a JSON file from the file system and uses that to create an in-memory database with the corresponding endpoints to interact with it. Let’s create the JSON file now. In the route of your project, create a new backend folder and in that folder create a new db.json file:

mkdir backendcd backendtouch db.json

Open up db.json and add the following content:

{  "users": [    {      "email": "regular@example.com",      "password": "$2a$10$2myKMolZJoH.q.cyXClQXufY1Mc7ETKdSaQQCC6Fgtbe0DCXRBELG",      "id": 1    },    {      "email": "admin@example.com",      "password": "$2a$10$w8qB40MdYkMs3dgGGf0Pu.xxVOOzWdZ5/Nrkleo3Gqc88PF/OQhOG",      "id": 2    }  ],  "products": [    {      "id": "hdmdu0t80yjkfqselfc",      "name": "shoes",      "stock": 10,      "price": 399.99,      "shortDesc": "Nulla facilisi. Curabitur at lacus ac velit ornare lobortis.",      "description": "Cras sagittis. Praesent nec nisl a purus blandit viverra. Ut leo. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Fusce a quam."    },    {      "id": "3dc7fiyzlfmkfqseqam",      "name": "bags",      "stock": 20,      "price": 299.99,      "shortDesc": "Nulla facilisi. Curabitur at lacus ac velit ornare lobortis.",      "description": "Cras sagittis. Praesent nec nisl a purus blandit viverra. Ut leo. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Fusce a quam."    },    {      "id": "aoe8wvdxvrkfqsew67",      "name": "shirts",      "stock": 15,      "price": 149.99,      "shortDesc": "Nulla facilisi. Curabitur at lacus ac velit ornare lobortis.",      "description": "Cras sagittis. Praesent nec nisl a purus blandit viverra. Ut leo. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Fusce a quam."    },    {      "id": "bmfrurdkswtkfqsf15j",      "name": "shorts",      "stock": 5,      "price": 109.99,      "shortDesc": "Nulla facilisi. Curabitur at lacus ac velit ornare lobortis.",      "description": "Cras sagittis. Praesent nec nisl a purus blandit viverra. Ut leo. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Fusce a quam."    }  ]}

We’re creating two resources here— users and products. Looking at the users resource, you’ll notice that each user has an ID, an email address and a password. The password appears as a jumble of letters and numbers, as it’s encrypted using bcryptjs. It’s important that you don’t store passwords in plain text anywhere in your application.

That said, the plain text version of each password is simply “password”—without the quotes.

Now start up the server by issuing the following command from the root of the project:

Community Questions