i want to create a website name biodata.
com where people can sign in and save their
information .after sign in the website ,the website provide them a individua user id (according
person name fast 3 wordwith the qube of the sum of his name asclli value).when a person want
sign in another website if another any website want person information person can provide only
the biodata user id and password...necessery information automatically save another website
from biodata website using user id and password(biodata website user id and password).now
the process describe:at first i search from any browser [Link] on the [Link] web
site show me sign up page where two botton sign up and [Link] login button click the website
show my profile(if previous sign up).if click sign up button it show a another page where i
provide my information like name,parents name,email,phone
number,adress,skill,hobby,study,current job,[Link] click submit [Link] all information
save database .and the [Link] provide me a user name accordin my name.i set the
[Link] profile page including navigation bar where notification bar(any notification),msg
bar(can message with another person).including other navigation bar,in one side show my photo
and user id.i can update and chage the information,.all information save in [Link] i want
sign up amny others website only i wanr my [Link] user id and password my necessary
information save the another website automatically with my [Link] this website we can save
our time and sign up another website [Link] the website with
htms,css,js,react,[Link],[Link],OAuth 2,jwt and necessary [Link] the full code for
creating the website?
Basic Setup for Frontend (React): First, create a React project:
bash
Copy code
npx create-react-app biodata-frontend
cd biodata-frontend
—
react component
import React, { useState } from "react";
import axios from "axios";
const App = () => {
const [isSignup, setIsSignup] = useState(false);
const [formData, setFormData] = useState({
name: "",
email: "",
password: "",
phone: "",
address: "",
skill: "",
hobby: "",
photo: null,
});
const handleSubmit = async (event) => {
[Link]();
if (isSignup) {
try {
const response = await [Link]("[Link] formData);
[Link]([Link]); // Handle successful signup
} catch (err) {
[Link]("Signup failed:", err);
}
} else {
try {
const response = await [Link]("[Link] formData);
[Link]([Link]); // Handle successful login
} catch (err) {
[Link]("Login failed:", err);
}
}
};
return (
<div>
<h1>{isSignup ? "Sign Up" : "Login"}</h1>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Full Name"
value={[Link]}
onChange={(e) => setFormData({ ...formData, name: [Link] })}
/>
<input
type="email"
placeholder="Email"
value={[Link]}
onChange={(e) => setFormData({ ...formData, email: [Link] })}
/>
<input
type="password"
placeholder="Password"
value={[Link]}
onChange={(e) => setFormData({ ...formData, password: [Link] })}
/>
{isSignup && (
<>
<input
type="text"
placeholder="Phone"
value={[Link]}
onChange={(e) => setFormData({ ...formData, phone: [Link] })}
/>
<input
type="text"
placeholder="Address"
value={[Link]}
onChange={(e) => setFormData({ ...formData, address: [Link] })}
/>
<input
type="text"
placeholder="Skills"
value={[Link]}
onChange={(e) => setFormData({ ...formData, skill: [Link] })}
/>
<input
type="text"
placeholder="Hobbies"
value={[Link]}
onChange={(e) => setFormData({ ...formData, hobby: [Link] })}
/>
</>
)}
<button type="submit">{isSignup ? "Sign Up" : "Login"}</button>
</form>
<button onClick={() => setIsSignup(!isSignup)}>
{isSignup ? "Already have an account? Login" : "Don't have an account? Sign Up"}
</button>
</div>
);
};
export default App;
—
backend
Enter
Ya Qalbee
npm init -y
npm install express mysql2 bcryptjs jsonwebtoken cors body-parser
Enter
Ya Qalbee
Folder Structure:
server/: Server-side code.
controllers/: Handle user-related logic (signup, login).
models/: Manage database connections and queries.
routes/: Define API routes.
utils/: Utility functions like password hashing, JWT signing.
Express Server Setup ([Link]):
