Home > other >  How can i get information from the front-end (react) and use it in the backend (node.js) to send sms
How can i get information from the front-end (react) and use it in the backend (node.js) to send sms

Time:11-06

I made service website and i want to use the information from the cart to send a sms confirming that the form they filled put and the products and services they selected. I would also like to receive that same information.

I only have server that is listening at port: 5000

const express = require('express');
const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const  client = require('twilio')(accountSid, authToken);
require('dotenv').config();
const app = express();
const port = 5000;

app.get('/', (req, res) => {

  sendTextMessages();
  res.send(`
  <div style='text-align: center; padding-top:40px'>
    <h1>Hello World</h1>
    <p>This is a sample page</p>
  </div>
  `);
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

function sendTextMessages() {}

/////////Cart.jsx////////
import React, { useState } from 'react';
import CartItems from '../components/CartItems/CartItems';
import CartForm from '../components/CartForm/CartForm';

const Cart = () => {
  const [formData, setFormData] = useState({});
  const [cartData, setCartData] = useState([]);

  const handleSubmit = () => {
    // Here, you can send the formData and cartData to your server or perform any other action you need.
    // You can access formData and cartData to submit the data.
    console.log('Form Data:', formData);
    console.log('Cart Data:', cartData);
  };

  return (
    <div>
      <CartForm setFormData={setFormData} />
      <CartItems setCartData={setCartData} />
      <button style={{
    backgroundColor: '#ff5a5a',
    color: '#fff',
    border: 'none',
    padding: '20px 60px', // Increase padding for a larger button
    borderRadius: '5px',
    cursor: 'pointer',
    display: 'block',     // Center horizontally
    margin: '0 auto',     // Center horizontally
    fontSize: '18px',
  }} onClick={handleSubmit}>Get Free Estimate</button>
    </div>
  );
}

export default Cart;

CodePudding user response:

why you use Frontend and backend in the same file? separate the frontend and backend and communicate with them using Axios search about how you can build REST API and how to hit the end points from the frontend using Axios

  • If you want to make the frontend and the backend in the same project you can use ejs for server-side rendering, search about MVC in node.js using Express.js and .ejs
  • Related