Yes you have heard it right actually i am building a project on the Replit mobile app as it is able to do most of the work that’s why I devloped a project in this app due to financial reasons but the question is not about that is there anyone who worked with Replit mobile app and has devloped on that if yes then please help in connecting my backend(express/node) and frontend(react) so that I can submit my form data to my backend currently I am facing issues when trying to do that and also do tell if that is not possible on mobile version or I am doing mistakes in my code as i processed a get
request in a pretty good manner but is facing issues from post request
backend/Subscribe.js
import express from 'express';
import bodyParser from 'body-parser';
import cors from 'cors';
const app = express();
let corsOptions = {
origin: 'https://dfdfc0c8-b50e-4037-aa34-cea130730c3f-00-3eebp8qm9h0io.sisko.repl.co:5173/',
optionsSuccessStatus: 200,
credetnials: true,
}
app.use(cors(corsOptions))
app.use(bodyParser.json());
app.get('/api',() => {
res.send("Hello from Browser")
})
app.post('/api/form',(req,res) => {
console.log(req.body)
let {Name, Email}= req.body
console.log(Name, Email)
res.json({'message':'Form Submitted'})
})
app.listen(8000,() => {
console.log("server Started at Port 8000")
})
src/components/SubscriptionForm.tsx
import React, { useState } from "react";
import axios from "axios";
import Button from "./Button";
import Page from "./Page";
import FormBox from "./FormBox";
export default function SubscriptionForm({ plan }) {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [responseMessage, setResponseMessage] = useState("");
const createSubscription = async () => {
let userData = {
Name:'Ramu',
Email:'[email protected]'
}
await fetch('https://dfdfc0c8-b50e-4037-aa34-cea130730c3f-00-3eebp8qm9h0io.sisko.repl.co:8000/api/form',{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body:JSON.stringify(userData),
}).then(response => response.json()).then(data => {
console.log(data)
})
console.log('clicked')
};
return (
<Page classes={'items-center'}>
<FormBox>
<form
onSubmit={(e) => {
e.preventDefault();
createSubscription();
}}
>
<span className="font-family-inter flex justify-center p-2 text-4xl font-bold">
SUBSCRIBE
</span>
<div className="flex h-[190px] w-[280px] flex-col items-center justify-around">
<div className="flex flex-col justify-center">
<label>Name</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="mt-1 flex h-[35px] w-[240px] justify-center rounded-sm p-2 text-brand-secondary"
/>
</div>
<div className="mt-4 flex flex-col justify-center">
<label>Email</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="mt-1 flex h-[35px] w-[240px] justify-center rounded-sm p-2 text-brand-secondary"
/>
</div>
</div>
<div className="mt-[60px] flex justify-center">
<Button disable={false}>SUBSCRIBE TO {plan.slice(2)}</Button>
</div>
</form>
</FormBox>
<div>{responseMessage}</div>
</Page>
);
}
Please don’t focus on the code and it’s data and the logic behind passing that data to backend i came here just to resolve the single issue that I faced