React JS

Here is code for signup.jsx: import React from ‘react’import {Button, Label, TextInput} from ‘flowbite-react’import { Link } from ‘react-router-dom’ const Signup = () => {  return (    <div className=’ max-w-3xl mx-auto flex flex-col md:flex-row mt-20 gap-3 p-3′>        <div className=’ flex-1 flex items-center justify-center flex-col gap-3′>        <Link to=’/’>    […]

Write a function in index.js:- app.use((err, req, res, next)=>{    const statusCode=err.statusCode || 500;    const message=err.message || “Internal Server Error”;    res.status(statusCode).json({        success:false,        statusCode,        message    })})   Add “next” parameter in signup function in “auth.controller.js” – Add next in catch –   Create a folder

Install a package – npm i bcryptjs import it in auth.controller.js – import bcryptjs from ‘bcryptjs’ Add marked two line of code for hash the password – Complete code for auth.controller.js: import User from ‘../models/user.model.js’ import bcryptjs from ‘bcryptjs’ export const signup=async(req, res)=>{ const {username, email, password}=req.body; if(!username || !email || !password || username===” ||

Create a route file “auth.route.js” in “routes” folder. auth.route.js: – import express from ‘express’ import { signup } from ‘../controllers/auth.controller.js’; const router=express.Router(); router.post(‘/signup’, signup); export default router; ——- Create a file “auth.controller.js” in “controllers” folder. auth.controller.js: import User from ‘../models/user.model.js’ export const signup=async(req, res)=>{ const {username, email, password}=req.body; if(!username || !email || !password || username===”

Add below given text in index.js: – app.get(‘/test’, (req, res)=>{ res.json({message:”API is working”}) }) Create a folder “routes” in “api” folder. Create a file “user.route.js” in “routes” folder. Write code in user.route.js – import express from ‘express’ const router=express.Router(); router.get(‘/test’, (req, res)=>{ res.json({message:”API is working”}) ) export default router;   import “user.route.js” in index.js import

Create a folder “models” under “api” folder. Create a file “user.model.js” in “models” folder. user.model.js: import mongoose from “mongoose”; const userSchema=new mongoose.Schema({     username:{         type:String,         required:true,         unique:true     },     email:{         type:String,        

Install the database in the root folder not in the client folder npm i mongoose https://www.mongodb.com/atlas/database sign up on this website, choose try free You can do signup with your Google account as well Create new project in mongodb atlas Set Project Name and do next After creating a project, click on “Database”, Build Database

If you are in the client folder, go back on the root, run command – cd.. Run command: npm init -y In package.json add – “type”:”module” Create a folder in the root  “api” Create a file in api folder “index.js” Install express using below given command – npm i express write below given code in

Follow below given steps to crate a responsive menu bar or header component in React JS – Create a “component” folder in src folder Create a file “Header.jsx” in component folder Add Header.jsx component in App.jsx Between BrowserRoter and Routes. Header will show on every page. Install Flowbite React Add navbar component in Header.jsx Add

Here are steps to Create Pages and Define Routes in React JS – Step 1: Create a folder “pages” under src folder. Step 2: Create page “About.jsx”, “Signin.jsx”, “SignUp.jsx”, “Dashboard.jsx” “Home.jsx”, “Projects.jsx” Signin.jsx Page Code: import React from ‘react’ const Signin = () => {   return (     <div>