Creating Register page with ReactJS | LinkTree Project
This tutorial is a part of the Series ‘Complete FullStack LinkTree Project with MERN (opens in a new tab)‘. This Project covers beginner to Intermediate level implementation of MongoDB, Express, ReactJS, NodeJS, and NextJS.
Project Walkthrough
Users can signup on the LinkTree website and start creating their LinkTree right away. They get a user profile editing page, edit or customize links page, a Dashboard to edit and track the links, and many more.
I’ve created a YouTube series on this Project in 6 parts. This Code snippet is from the 2nd part where we have created a Register page.
Frontend
import React, { useState } from "react";
import styles from "../styles/apply.module.css";
import Footer from "../components/Footer";
import { toast } from "react-toastify";
import Link from "next/link";
import { useRouter } from "next/router";
const Apply = () => {
const router = useRouter();
const [handle, setHandle] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [category, setCategory] = useState("");
const [submitted, setSubmitted] = useState(false);
const handleCategoryChange = (e) => {
setCategory(e.target.value);
};
const handleRegister = (e) => {
e.preventDefault();
if (!category) return toast.error("Add a category");
// backend part
fetch("http://localhost:8080/api/register", {
method: "POST",
headers: {
"content-type": "application/json"
},
body: JSON.stringify({
handle,
email,
password,
category
})
})
.then((res) => res.json())
.then((data) => {
console.log(data);
if (data.status === "success") {
toast("You are registered successfully");
localStorage.setItem("LinkTreeToken", data.token);
setSubmitted(true);
router.push("/login");
}
})
.catch((err) => {
toast.error("Try a different username");
});
};
return (
<>
<section
className={
styles.background + " min-h-screen flex justify-center items-center"
}
>
<div className="main">
<div className="content bg-white border-2 px-4 py-8 rounded-2xl shadow-lg">
<h1 className="text-2xl font-bold text-center">
Join the top 1% creators
</h1>
<p className="text-center">Create Linktree for your brand</p>
<p className="text-center py-5 font-bold text-gray-500">
Start building your Hub
</p>
<form
onSubmit={handleRegister}
className="flex flex-col gap-4 text-lg mt-5"
>
<span className="flex flex-row shadow-md border-2 px-3 py-2 rounded-md focus:outline-none">
<img className="w-6 mr-2" src="/svg/ig.svg" alt="" />
<input
value={handle}
onChange={(e) => setHandle(e.target.value)}
className="focus:outline-none"
type="text"
placeholder="Social Handle"
required
/>
</span>
<input
value={email}
onChange={(e) => setEmail(e.target.value)}
className="shadow-md border-2 px-3 py-2 rounded-md focus:outline-none"
type="email"
placeholder="Enter your email"
required
/>
<input
value={password}
onChange={(e) => setPassword(e.target.value)}
className="shadow-md border-2 px-3 py-2 rounded-md focus:outline-none"
type="password"
placeholder="Set a password"
required
/>
<h5 className="text-sm text-center text-indigo-400">
Account Type:
</h5>
<span className="flex">
<label className="flex flex-row mr-3">
<input
type="checkbox"
className=""
value="Creator"
checked={category === "Creator"}
onChange={handleCategoryChange}
/>
<p className="pl-2">Creator</p>
</label>
<label className="flex flex-row mr-3">
<input
type="checkbox"
className=""
value="Agency"
checked={category === "Agency"}
onChange={handleCategoryChange}
/>
<p className="pl-2">Agency</p>
</label>
<label className="flex flex-row mr-3">
<input
type="checkbox"
className=""
value="Brand"
checked={category === "Brand"}
onChange={handleCategoryChange}
/>
<p className="pl-2">Brand</p>
</label>
</span>
<input
className="bg-indigo-600 text-white py-2 rounded-lg cursor-pointer"
type="submit"
value="Apply"
/>
</form>
</div>
<h4 className="text-center text-white pt-3">
Already have an account?{" "}
<Link className="font-bold text-red-400" href="/login">
Login
</Link>
</h4>
</div>
</section>
<Footer />
</>
);
};
export default Apply;Backend
const express = require("express");
const app = express();
const cors = require("cors");
const mongoose = require("mongoose");
mongoose.set("strictQuery", false);
const { registerUser } = require("./controllers/auth");
require("dotenv").config();
app.use(cors());
app.use(express.json());
mongoose
.connect("mongodb://127.0.0.1:27017/linkTree-9")
.then(() => {
console.log(`mongodb COnnected`);
})
.catch((err) => {
console.log(err.message);
});
app.get("/", (req, res) => {
res.send(`Server is running on port ${port}`);
});
app.post("/api/register", registerUser);
const port = process.env.PORT || 8080;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});onst User = require('../models/user');
const jwt = require('jsonwebtoken');
const registerUser = async(req, res)=>{
const { handle, email, password, category } = req.body;
console.log(req.body);
try {
const defaultLink = { url: 'typefinance.com', title: 'TypeFinance', icon: 'https://typefinance.com/favicon.ico'}
const user = await User.create({handle, email, password, role: category, links: [defaultLink]});
const token = jwt.sign({email: email}, process.env.SECRET_JWT);
console.log('user', user);
return res.json({message: 'user created', status: 'success', 'token': token, id: user._id});
} catch (err) {
if(err.code === '11000'){
return res.json({message: "Try different handle or email", status: 'error'});
}
return res.json({message: err.message, status: 'error'});
}
}
module.exports = {registerUser};Summing up
Here are the resources used in the tutorial, NextJS Featured Template: On GitHub (opens in a new tab) NextJS Documentation: Docs (opens in a new tab) Tailwind CSS: Tailwind (opens in a new tab)
I hope this part of the tutorial on the Fullstack LinkTree Project was helpful to you. If you faced any problems while following the video or the source code snippets, comment below and I’ll reply as soon as possible. See you soon.
