Project Structure(Backend)

Backend Folder Structure

The updated dependencies in package.json file of backend will look like:

"dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.3"
},

Example: Create the required files and write the following code.

Javascript

// server.js
 
import express from 'express';
import cors from 'cors';
const app = express();
app.use(cors());
 
app.get('/', async (req, res) => {
    try {
        const { text, source, target } = req.query;
        const url = `https://api.mymemory.translated.net/get?q=${text}&langpair=${source}|${target}`;
        const response = await fetch(url);
        const json = await response.json();
        const matches = await json.matches;
        const translatedText = matches[matches.length - 1].translation || 'No translation found';
        res.send(translatedText);
    } catch (error) {
        console.log(error);
        res.send('Something went wrong!');
    }
});
 
app.listen(5000, () => {
    console.log('Server is running on port 5000');
});

Start your server using the following command.

node server.js

Text Translation Tool using MERN Stack

In this article, we’ll walk through the step-by-step process of creating a text translation application with MongoDB, React, ExpressJS, and NodeJS. This application will provide users with a user-friendly interface for translating text between different languages.

Output Preview: Let us have a look at how the final output will look like.

Output

Tags:

#Dev Scripter 2024 #MERN-Projects #Dev Scripter #MERN Stack #Project #Web Technologies

Steps to Create the Backend Server:

Steps to Setup Frontend with React:

Project Structure(Backend)

Javascript

Text Translation Tool using MERN Stack

Similar Reads

Contact Us