mohamad-monir / class18-project-mohamad Goto Github PK

I have been asked to review your project.

Here is my review for the server

Questions

• How did you test the server since you don't have MySQL package for node?
• Why do you have a public folder with index.htm and style.css? React should handle that

Improvements

package.json
Make sure to have scripts for bother server and client and install proper dependencies for the server

{
"server": "server script",
"client": "client script",
"dev": "run both server and client scripts"
}

server/app.js

You don't need this, at least for development mode

app.use(express.static(path.join(__dirname, "public"))); 

You are not taking advantages of these so you don't need them

app.get("*", (req, res, next) => { //no need to name the function, you can simply use arrow function
  console.log("someone made a request with GET method");
  next();
});

app.get("/", function(req, res) {
  res.send("index page, triggered by GET /");
});

handle 404 error after using api routes

app.use("/api", apiRouter);


//handle 404 errors here with your custom message

server/Index.js

don't use port like this, while hosting the website the host will provide dynamic ports
so change it to

const PORT = process.env.PORT || 5000;

server/validation.js

Null is an object too so check if it's not Null too

if (typeof houseObj !== 'object') {

api/index.js

• fakeDb is not defined or imported, how do you use it?

• There should be some consistency between all your responses so try to always use a pattern so the client understands you better
  I always try to do it like this
  res.status(status code here).json({ error: false or true, message: success or error message, data: data to send})

• Parse the ids before use it in the find loops

Here my review for the client

-Firstly you need to work on the application folder structure
That's what i do for mine(it's not the best but works for small projects)

src
-components
--headerNav.js
-containers
--Home.js
--Login.js
-assets
-styels
-utils
index.js

-Make sure all component files start with a capital letter so we know it's a component before even open the file

App.js
-Separate the Routes and NavBar

Routers
Change the folder name may be

Routers/Contributers.js

• Why do you empty the state before posting it to the server??? do it after the post, inside then
• Have some pre post states to show a loading screen, like isPostingToServer...etc
• Destructure the state before using it
• htmlFor needs the input to have id with the same value as htmlFor

Routers/Form.js
same as Routers/Contributers.js

• proper form validation

Routers/Home.js

• Give classNames proper name

Routers/HouseList.js

• await should always be used inside try..catch block
• handle the errors, make sure to always use catch for the fetch or try...catch when using async..await