How can I create a react and koa project from scract? - node.js

Question

Hi, I'm new to this react and koa. Is this code correct? I'm trying to create react and koa projects from scratch. I have a react project. I would like to create a downloadable windows exe. I can do it with a node server using Zeit pkg but I don't know how to do that (or something similar) with react.
I have tried Zeit pkg. Not seeing many other options.
Backend
server.js
require('dotenv').config();
const Koa = require('koa');
const bodyParser = require('koa-bodyparser');
const cors = require('#koa/cors');
const { dbConnect } = require('./utills/dbConnect.js');
const app = new Koa();
app.use(cors());
app.use(bodyParser());
//routers
const userRouter = require('./routes/user.router.js');
app.use(userRouter.routes())
.use(userRouter.allowedMethods());
const vehicleRouter = require('./routes/vehicle.router.js');
app.use(vehicleRouter.routes())
.use(userRouter.allowedMethods());
app.listen(8080, () => {
dbConnect();
console.log("Application running on port 8080");
});
//Installed packages
// #koa/cors
// #koa/router
// dotenv
// jsonwebtoken
// koa
// koa-bodyparser
// mongoose
// nodemon
model.js
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const userSchema = new Schema({
id: {type:String, required:true},
name: {type:String, required:true},
email: {type:String, required:true},
password:{type:String, required:true}
});
const User = mongoose.model("User", userSchema);
module.exports = User;
Controller
const jwt = require('jsonwebtoken');
const User = require("../models/user.model");
const getAllUsers = async (ctx)=>{
await User.find().then((users)=>{
ctx.body = users;
}).catch((err)=>{
console.log(err);
})
}
const addUser = async (ctx)=>{
const {id, name, email, password} = ctx.request.body;
const newUser = new User({id, name, email, password});
const user = await User.create(newUser);
if(user){
ctx.body = user;
ctx.set('Content-Type', 'application.json');
ctx.status = 201;
} else {
ctx.body = {status:"error occured"}
ctx.set('Content-Type', 'application.json');
}
}
const updateUser = async (ctx)=>{
const uid = ctx.params.id;
const {id, name, email, password} = ctx.request.body;
const updateUser = {id, name, email, password}
await User.findByIdAndUpdate(uid, updateUser).then(()=>{
ctx.body = {status:"User Updated"};
}).catch((err)=>{
console.log(err);
ctx.body = {status:"Error occured"}
})
}
const deleteUser = async (ctx)=>{
const uid = ctx.params.id;
await User.findByIdAndDelete(uid).then(()=>{
ctx.body = {status:"User Deleted"};
}).catch((err)=>{
console.log(err);
ctx.body = {status:"Error occured"}
})
}
const login = async (ctx)=>{
const {email, password} = ctx.request.body;
const user = await User.findOne({email});
console.log(user)
if(user && (password == user.password)){
const token = jwt.sign(
{
_id: user._id,
name: user.name,
email: user.email,
password: user.password
},
'SecretKey123'
)
return ctx.body = {token:token}
} else {
return ctx.body = {status:'Login Failed'}
}
}
const auth = async (req, res)=>{
const token = req.headers['x-access-token']
try {
const decoded = jwt.verify(token, 'secret123')
const _id = decoded._id
const user = await User.findById(_id);
return res.json({ status: 'ok', name: user.name, role: user.role, id: user._id, subRole: user.subRole, uid:user.id, user:user })
} catch (error) {
console.log(error)
res.json({ status: 'error', error: 'invalid token' })
}
}
module.exports = {addUser, updateUser, deleteUser, getAllUsers, login, auth}
Router
const Router = require('#koa/router');
const { addUser, getAllUsers, updateUser, deleteUser, login, auth } = require('../controller/user.controller');
const userRouter = new Router({
prefix: '/users'
});
userRouter.get('/',getAllUsers);
userRouter.post('/add',addUser);
userRouter.put('/update/:id', updateUser);
userRouter.delete('/delete', deleteUser);
userRouter.post('/login', login);
userRouter.post('auth', auth)
module.exports = userRouter;
DB Connect
const mongoose = require('mongoose');
const dbConnect = () => {
const dbConStr = process.env.MONGODB_URL;
mongoose.connect(dbConStr, (connection)=>{
console.log("MongoDB Connection Success");
})
}
module.exports = {dbConnect}
Frontend
App.js
import logo from './logo.svg';
import './App.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import HeaderComponent from './components/HeaderComponent';
import Register from './pages/Register';
import Users from './pages/Users';
import Login from './pages/Login';
function App() {
return (
div className='container'>
HeaderComponent/>
Router>
Routes>
Route exact path="/" element={Users/>}/>
Route exact path="/register" element={Register/>}/>
Route exact path="/login" element={Login/>}/>
/Routes>
/Router>
/div>
);
}
export default App;
Login.jsx
import axios from "axios";
import React,{useEffect, useState} from "react";
function Login() {
//User Details
const[email, setEmail] = useState('');
const[password, setPassword] = useState('');
function loginUserHandler(e) {
e.preventDefault();
const user = { email, password }
axios.post('http://localhost:8080/users/login', user).then((res)=>{
if(res.data.token){
sessionStorage.setItem("isLogged", true);
window.location="/";
} else {
window.location.reload(false)
alert("login failed")
}
}).catch((err)=>{
console.log(err);
})
}
return (
div>
h2 className="text-center mt-3">Login/h2>
div>
form style={{width:"50%", margin:"auto"}}>
div className="form-group">
label>Email : /label>
input type="email" className="form-control" onChange={(e)=>setEmail(e.target.value)} />
/div>
div className="form-group">
label>Password : /label>
input type="password" className="form-control" onChange={(e)=>setPassword(e.target.value)} />
/div>
div className="text-center mt-2">
button className="btn btn-primary" onClick={loginUserHandler}>Login/button>
/div>
/form>
/div>
/div>
);
}
export default Login;
Register.jsx
import axios from "axios";
import React,{useEffect, useState} from "react";
function Register() {
//User Details
const[name, setName] = useState('');
const[email, setEmail] = useState('');
const[id, setId] = useState('');
const[password, setPassword] = useState('');
function registerUserHandler(e) {
e.preventDefault();
const user = {name, email, password, id}
axios.post('http://localhost:8080/users/add', user).then(()=>{
alert('User added');
}).catch((err)=>{
console.log(err);
})
}
return (
div>
h2 className="text-center mt-3">Register/h2>
div>
form style={{width:"50%", margin:"auto"}}>
div className="form-group">
label>Name : /label>
input type="text" className="form-control" onChange={(e)=>setName(e.target.value)} />
/div>
div className="form-group">
label>Email : /label>
input type="email" className="form-control" onChange={(e)=>setEmail(e.target.value)} />
/div>
div className="form-group">
label>ID : /label>
input type="text" className="form-control" onChange={(e)=>setId(e.target.value)} />
/div>
div className="form-group">
label>Password : /label>
input type="password" className="form-control" onChange={(e)=>setPassword(e.target.value)} />
/div>
div className="text-center mt-2">
button className="btn btn-primary" onClick={registerUserHandler}>Register/button>
/div>
/form>
/div>
/div>
);
}
export default Register;