Node and React Router Dynamic API Routes

We will be creating a book library website similar to Audible that has a backend Node API. This API will hold the book data which will be dynamically available allowing you to select all of the books and also the books by book ID. You will learn how to create routes on the backend and also on the frontend in React using React Router.

Step 1: Setup the backend project

Create a folder for your project and then cd into it. Copy and paste this code into your terminal and then hit enter to setup your project

cd to the root folder and then open the project in your code editor. Add the code below to both .gitignore files

Copy and paste the code below into the corresponding files

app.js

controllers/admin.js

routes/admin.js

Add these run scripts to your package.json file

Now run the command npm run dev from your backend folder and the server should be up and running.

Step 2: Create the REST API

In this guide we will be using a local file server however it is fairly simple to connect it to a database as well. If you want to learn how to connect a mongoDB database you can read my article Creating MERN Stack Applications (2020)

Replace and update the code in the existing files with the ones below

controllers/admin.js

data/books.json

models/Books.js

routes/admin.js

There are three CRUD routes

http://localhost:8080/books/ is for sending a GET request that will return all of the books as json

http://localhost:8080/books/647f8d9a-97b5-461c-9cfe-b04d8b9e1028 is for sending a GET request that will get a book by its bookId (just replace the ID with one for any of the books in the file to return its data as json)

http://localhost:8080/add-book is for sending a POST request that will add a new book to the file. This app does not have a form so you will need to use an API tool like Insomnia or Postman to add new books. Or you could just do it manually by updating the file in data/books.json

And thats it for the backend you now have Dynamic API Routes working for the Book data.

Step 3: Setup the frontend project

cd into the root folder for your project and then copy and paste this code into your terminal and then hit enter to setup your React frontend project

Once the setup is complete cd back into the backend folder and run the command npm run servers so that both the backend and frontend servers run at the same time.

Go to the frontend folder and inside of src create folders for components and pages. Delete all of the css inside of App.css Now we are going to get React Router up and running so first create a file called Home.js and put it inside the pages folder.

Update and add the code below into their corresponding files

pages/Home.js

app.js

index.js

Now when you go to http://localhost:3000/ you should see the home page for the Book Library

Step 4: Create the app

Ok lets finish building this app!

Create a component called Nav.js and put it in the components folder. Now create two files Book.js and Books.js and put them in the pages folder.

Finally copy and replace the code in the files with the code below

components/Nav.js

pages/Book.js

pages/Books.js

pages/Home.js

App.css

App.js

Your App should look like the images below! Congrats you just learned the basics of creating backend and frontend dynamic API routes.

Books Home Page

Books Library Page

My Book Page

👨🏿‍💻 Full Stack Developer 📝 Blogger 🎮 Gamer ✏️ Creative 👁 Anime Addict ٩(●ᴗ●)۶

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