First question from myself in stackoverflow.
tldr:Watched followed a YouTube video and downloaded from his github link for the course code but I seem to be having problems in the routing from all the other questions I have read on stackoverflow.
I have been following this YouTube Video https://www.youtube.com/watch?v=MpQbwtSiZ7E. I downloaded the source code from his link https://github.com/dejwid/airbnb-clone . From all the questions that I have been reading from this seems to be a routing problem. I do not know if it was during the cloning or following his video but the network section from the browser inspect has been showing 404 for UserContext.js(googlechrome) RegisterPage.jsx(googlechrome) axios.jsx(in firefox) and 204 OPTIONS preflight. Most of it very similar to his actual github code other than the .env file and app.listen(); in the index.js at the end. images of some errors.
enter image description here enter image description here
api/.env
API_PORT = 5173
MONGO_URL = "mongodb+srv://admin:[email protected]/?retryWrites=true&w=majority&appName=Cluster0"
client/.env
VITE_API_BASE_URL=http://localhost:4000/
RegisterPage.jsx
import {Link} from "react-router-dom";
import {useState} from "react";
import axios from "axios";
export default function RegisterPage() {
const [name,setName] = useState('');
const [email,setEmail] = useState('');
const [password,setPassword] = useState('');
async function registerUser(ev) {
ev.preventDefault();
try {
await axios.post('/register', {
name,
email,
password,
});
alert('Registration successful. Now you can log in');
} catch (e) {
alert('Registration failed. Please try again later');
}
}
return (
<div className="mt-4 grow flex items-center justify-around">
<div className="mb-64">
<h1 className="text-4xl text-center mb-4">Register</h1>
<form className="max-w-md mx-auto" onSubmit={registerUser}>
<input type="text"
placeholder="John Doe"
value={name}
onChange={ev => setName(ev.target.value)} />
<input type="email"
placeholder="[email protected]"
value={email}
onChange={ev => setEmail(ev.target.value)} />
<input type="password"
placeholder="password"
value={password}
onChange={ev => setPassword(ev.target.value)} />
<button className="primary">Register</button>
<div className="text-center py-2 text-gray-500">
Already a member? <Link className="underline text-black" to={'/login'}>Login</Link>
</div>
</form>
</div>
</div>
);
}
index.js
const express = require('express');
const cors = require('cors');
const mongoose = require("mongoose");
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('./models/User.js');
const Place = require('./models/Place.js');
const Booking = require('./models/Booking.js');
const cookieParser = require('cookie-parser');
const imageDownloader = require('image-downloader');
const {S3Client, PutObjectCommand} = require('@aws-sdk/client-s3');
const multer = require('multer');
const fs = require('fs');
const mime = require('mime-types');
require('dotenv').config();
const app = express();
const bcryptSalt = bcrypt.genSaltSync(10);
const jwtSecret = 'fasefraw4r5r3wq45wdfgw34twdfg';
const bucket = 'dawid-booking-app';
app.use(express.json());
app.use(cookieParser());
app.use('/uploads', express.static(__dirname+'/uploads'));
app.use(cors({
credentials: true,
origin: 'http://localhost:5173',
}));
async function uploadToS3(path, originalFilename, mimetype) {
const client = new S3Client({
region: 'us-east-1',
credentials: {
accessKeyId: process.env.S3_ACCESS_KEY,
secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
},
});
const parts = originalFilename.split('.');
const ext = parts[parts.length - 1];
const newFilename = Date.now() + '.' + ext;
await client.send(new PutObjectCommand({
Bucket: bucket,
Body: fs.readFileSync(path),
Key: newFilename,
ContentType: mimetype,
ACL: 'public-read',
}));
return `https://${bucket}.s3.amazonaws.com/${newFilename}`;
}
function getUserDataFromReq(req) {
return new Promise((resolve, reject) => {
jwt.verify(req.cookies.token, jwtSecret, {}, async (err, userData) => {
if (err) throw err;
resolve(userData);
});
});
}
app.get('/api/test', (req,res) => {
mongoose.connect(process.env.MONGO_URL);
res.json('test ok');
});
console.log(process.env.MONGO_URL);
app.post('/api/register', async (req,res) => {
mongoose.connect(process.env.MONGO_URL);
const {name,email,password} = req.body;
try {
const userDoc = await User.create({
name,
email,
password:bcrypt.hashSync(password, bcryptSalt),
});
res.json(userDoc);
} catch (e) {
res.status(422).json(e);
}
});
app.post('/api/login', async (req,res) => {
mongoose.connect(process.env.MONGO_URL);
const {email,password} = req.body;
const userDoc = await User.findOne({email});
if (userDoc) {
const passOk = bcrypt.compareSync(password, userDoc.password);
if (passOk) {
jwt.sign({
email:userDoc.email,
id:userDoc._id
}, jwtSecret, {}, (err,token) => {
if (err) throw err;
res.cookie('token', token).json(userDoc);
});
} else {
res.status(422).json('pass not ok');
}
} else {
res.json('not found');
}
});
app.get('/api/profile', (req,res) => {
mongoose.connect(process.env.MONGO_URL);
const {token} = req.cookies;
if (token) {
jwt.verify(token, jwtSecret, {}, async (err, userData) => {
if (err) throw err;
const {name,email,_id} = await User.findById(userData.id);
res.json({name,email,_id});
});
} else {
res.json(null);
}
});
app.post('/api/logout', (req,res) => {
res.cookie('token', '').json(true);
});
app.post('/api/upload-by-link', async (req,res) => {
const {link} = req.body;
const newName = 'photo' + Date.now() + '.jpg';
await imageDownloader.image({
url: link,
dest: '/tmp/' +newName,
});
const url = await uploadToS3('/tmp/' +newName, newName, mime.lookup('/tmp/' +newName));
res.json(url);
});
const photosMiddleware = multer({dest:'/tmp'});
app.post('/api/upload', photosMiddleware.array('photos', 100), async (req,res) => {
const uploadedFiles = [];
for (let i = 0; i < req.files.length; i++) {
const {path,originalname,mimetype} = req.files[i];
const url = await uploadToS3(path, originalname, mimetype);
uploadedFiles.push(url);
}
res.json(uploadedFiles);
});
app.post('/api/places', (req,res) => {
mongoose.connect(process.env.MONGO_URL);
const {token} = req.cookies;
const {
title,address,addedPhotos,description,price,
perks,extraInfo,checkIn,checkOut,maxGuests,
} = req.body;
jwt.verify(token, jwtSecret, {}, async (err, userData) => {
if (err) throw err;
const placeDoc = await Place.create({
owner:userData.id,price,
title,address,photos:addedPhotos,description,
perks,extraInfo,checkIn,checkOut,maxGuests,
});
res.json(placeDoc);
});
});
app.get('/api/user-places', (req,res) => {
mongoose.connect(process.env.MONGO_URL);
const {token} = req.cookies;
jwt.verify(token, jwtSecret, {}, async (err, userData) => {
const {id} = userData;
res.json( await Place.find({owner:id}) );
});
});
app.get('/api/places/:id', async (req,res) => {
mongoose.connect(process.env.MONGO_URL);
const {id} = req.params;
res.json(await Place.findById(id));
});
app.put('/api/places', async (req,res) => {
mongoose.connect(process.env.MONGO_URL);
const {token} = req.cookies;
const {
id, title,address,addedPhotos,description,
perks,extraInfo,checkIn,checkOut,maxGuests,price,
} = req.body;
jwt.verify(token, jwtSecret, {}, async (err, userData) => {
if (err) throw err;
const placeDoc = await Place.findById(id);
if (userData.id === placeDoc.owner.toString()) {
placeDoc.set({
title,address,photos:addedPhotos,description,
perks,extraInfo,checkIn,checkOut,maxGuests,price,
});
await placeDoc.save();
res.json('ok');
}
});
});
app.get('/api/places', async (req,res) => {
mongoose.connect(process.env.MONGO_URL);
res.json( await Place.find() );
});
app.post('/api/bookings', async (req, res) => {
mongoose.connect(process.env.MONGO_URL);
const userData = await getUserDataFromReq(req);
const {
place,checkIn,checkOut,numberOfGuests,name,phone,price,
} = req.body;
Booking.create({
place,checkIn,checkOut,numberOfGuests,name,phone,price,
user:userData.id,
}).then((doc) => {
res.json(doc);
}).catch((err) => {
throw err;
});
});
app.get('/api/bookings', async (req,res) => {
mongoose.connect(process.env.MONGO_URL);
const userData = await getUserDataFromReq(req);
res.json( await Booking.find({user:userData.id}).populate('place') );
});
app.listen(4000);
UserContext.jsx
import {createContext, useEffect, useState} from "react";
import axios from "axios";
import {data} from "autoprefixer";
export const UserContext = createContext({});
export function UserContextProvider({children}) {
const [user,setUser] = useState(null);
const [ready,setReady] = useState(false);
useEffect(() => {
if (!user) {
axios.get('/profile').then(({data}) => {
setUser(data);
setReady(true);
});
}
}, []);
return (
<UserContext.Provider value={{user,setUser,ready}}>
{children}
</UserContext.Provider>
);
}
I have tried to add /api on the path of the base URL but it shows just a blank page. I have tried to change app.listen(); in index.js (at the end) to 4000 3000 5000 5173. I have tried to change the API_PORT = 5173 in .env to 4000 5173 5000. I have asked Perplexity ai and chatgpt 3.5 but they only give generic answers taht have not worked. I do not know what else to do. This deeply shows my lack of knowledge but I would also like to see someone get answer because almost all the answers on the other questions or forums have not worked for me.
Edit: I have added a .env with VITE_API_BASE_URL=http://localhost:4000/ in it. After a great advice from @Phil. Changed the api.listen(5173); to api.listen(4000).
