React30-Project 6: Building a Quote Generation API with Express.js
Introduction
In this tutorial, we’ll create a backend API for generating quotes using Express.js. We’ll start by using local JSON data, and later replace it with data from a MongoDB database.
Building API explanation with Express for a beginners:
Imagine you’re running a toy store.
1. Setting Up Your Store (Initializing Express):
— First, you need a place where your store will be. That’s like creating your store in a new town (server). So, you tell the town, "Hey, I’m going to have a toy store here!"
const express = require('express');
const app = express();
const port = 3000;
2. Toy Catalog (Creating API Endpoints):
— Now, you decide what toys you want to sell and create a catalog (API endpoints). You say, "I’ll have a shelf for dolls, a shelf for cars, and a shelf for teddy bears."
// Dolls shelf
app.get('/dolls', (req, res) => {
res.send('Here are the dolls!');
});
// Cars shelf
app.get('/cars', (req, res) => {
res.send('Check out the toy cars!');
});
// Teddy bears shelf
app.get('/teddy-bears', (req, res) => {
res.send('Snuggle with our teddy bears!');
});
3. Opening Your Store (Starting the Server):
— Now that everything is set up, you open your toy store (start the server) so that people in the town can visit and buy toys.
app.listen(port, () => {
console.log(`Toy store is open on port ${port}!`);
});
That’s how your toy store (Express API) works.
Now let’s get back to building our project:
Step 1: Set Up Express.js
First, we’ll set up a new Express.js project. Open your terminal, create a new folder quotes-api and run the following commands within the folder:
npm init
touch index.js
npm install express --save
npm install -g nodemonThis command will create a new Express.js project with the necessary files and dependencies.
Next create a `quotesSource.json` file in the project folder and data in the from below link:-
Github-QuotesSource
Step 2: Setting up routes
Open index.js file and add below code to setup basic route for return random API:
const express = require('express');
const app = express();
const quotesJSONArray = require('./quotesSource.json');
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello World!')
});
app.get('/quotesList',(req, res) => {
res.send({ 'quotesList': quotesJSONArray });
});
app.get('/randomQuote',(req, res)=>{
const randomNumber = Math.floor(Math.random() * 21);
const quoteItem = quotesJSONArray[randomNumber];
res.send(quoteItem);
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})Start the server by running below command in terminal:
nodemon index.jsNow if you open the browser and open address localhost:3000/randomQuote you should see random quote returned by server as shown below:
Step 3: Connect to MongoDB
- Create a MongoDB Atlas account if you haven’t already on below website:
MongoDB Atlas - Create a new cluster and follow the setup instructions provided by MongoDB Atlas.
Step 4: Install Mongoose
In your terminal, run the following command to install Mongoose and other required packages, a MongoDB ORM for Node.js:
npm install mongoose body-parser dotenv cors --saveStep 5: Connect to MongoDB Atlas
Edit the index.js file to connect to your MongoDB Atlas database:
const express = require('express');
const app = express();
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors')
const quotesJSONArray = require('./quotesSource.json');
const port = 3000;
require('dotenv').config()
// mongodb connection
mongoose.connect(process.env.DB_CONNECTION_URL, { useNewUrlParser: true }, (err) => {
if(err) {
console.error(err);
} else {
console.log("connected");
}
});
// allow localhost access in frontend
app.use(cors())
// routes for quotes
const quotesRoute = require('./routes/quotes');
app.use(bodyParser.json());
app.use('/quotes', quotesRoute);
app.get('/', (req, res) => {
res.send('Hello World!')
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})Create a .env file in your quotes-api folder and add variable `DB_CONNECTION_URL` with value of mongoDB Atlas connection URL.
Step 6: Create a Quote Model
Create a folder named models in the quote-api folder, and inside it, create a file named Quotes.js with the following content:
const mongoose = require('mongoose');
const QuotesSchema = mongoose.Schema({
'quotes': {
type: Array,
required: true
},
})
module.exports = mongoose.model('Quotes', QuotesSchema, "Quotes")Step 7: Create Quotes routes
Create a folder named routes in the quote-api folder, and inside it, create a file named quotes.js with the following content
const express = require('express');
const router = express.Router();
const Quotes = require('../models/Quotes');
router.post('/add', async (req, res) => {
const quotesObject = new Quotes({
'quotes': req.body.quotes
});
try {
quotesObject.save((err, response) => {
if (err) {
console.log("error", error);
} else {
console.log("saved", response);
}
});
} catch (err) {
console.log(err.message);
res.status(500).send("Error in Saving");
}
res.status(200).json({
"response": "success"
});
});
router.get('/list', async (req, res) => {
const quotesObject = await Quotes.find({});
res.json({'result':quotesObject[0].quotes});
});
router.get('/random', async (req, res) => {
const randomNumber = Math.floor(Math.random() * 21);
const quotesObject = await Quotes.find({});
const quoteItem = quotesObject[0].quotes[randomNumber];
res.send(quoteItem);
});
module.exports = router;You can either populate the Quotes database directly in MongoDB atlas dashboard with random quotes array or use /add API created above to add the array in database using values from quotesSource.json file added earlier.
Github-QuotesSource
Step 8: Test the API
Restart the server (nodemon index.js) and test the API with Postman or a web browser by visiting localhost:3000/quotes/random.
Github source code:
Github-QuotesGenerationBackend
Note: MongoDB connection details are indexTest.js file in above repo.
Youtube tutorial for first part:
Conclusion
Congratulations! You’ve successfully built a backend API for quote generation using Express.js and connected it to a MongoDB database hosted on MongoDB Atlas. Have a nice day ahead!
You can find more content on my Youtube channel below:
SaurabhNative-Youtube
Check out project 7 in the series below:-
