fac-17 / savage Goto Github PK

Testing on backend is reasonably thorough for Database and Server! 🥇

Tests all work and look useful, good docs to get this set up

It's obvs pretty amazing, though it took us a bit of time to really figure out how to use the app even with the readme. If you had in the user inputs some placeholder text so people know what should go in there that would be useful.

Your accessibility score is quite high (72) but there is an issue with form labels. It suggests your username and password fields aren't labelled - they are but you have capitalised the labels in for but not the IDs, change the case of the label and I reckon you'll be on 💯

Docs are good and have all the important information. If you break down the user guide a little bit it will be a lot easier to follow, i.e. in steps

When you do:

const getAllDataQuery = require("./queries/getAllDataquery");
const getSVGsQuery = require("./queries/getSVGsquery");
const postSVGquery = require("./queries/postSVGquery");
const postSHAPEquery = require("./queries/postSHAPEquery");
const getSHAPEsquery = require("./queries/getSHAPEsquery");
const insertSVG_SHAPEquery= require("./queries/post_SVG_SHAPE");

You can do create a file in queries called index.js and inside put:

module.exports = {
getAllDataQuery: require("./queries/getAllDataquery"),
getSVGsQuery = require("./queries/getSVGsquery")
};

Then you can require the whole directory require('./queries);

Then just do queries.getAllDataQuery() etc.

See below:

https://stackoverflow.com/questions/37417422/nodejs-good-practice-to-just-use-the-index-js-to-exports

Very cool that each query has its own file! 👍

You have a file (index.js) which exports all the modules in the queries folder. I tried to work out where this file was called but I couldn't work it out. 😕 Could you talk about this in your presentation?

It works locally and it's extremely cool. WELL DONE :)

CSS is well modularised and even has commenting to explain what each section is for!

GG 🏅

Still some comments left over e.g. in db_build.js

You've got cursor: pointer on your input fields, but this probably isn't best practice because it's not a button, so it's misleading for the user.

You've also got your login button black on hover - perhaps another way of showing hover would be better for accessibility?

when I check endpoin /getAllData I have unrestricted access to your database and all the user's info without being logged in

Good protection against SQL injection

    dbConnection.query("INSERT INTO svg_shape(svg_id, shape_id) VALUES ($1,$2)", 

You've declared your language, but lots of countries speak English - and they all speak them wrong except Great Britain! So make sure you add gb to your language setting so users can experience your website in the correct English.

So clean, so profesh, so beautiful.

Love the 'SaVaGe ARTWORK CREATOR' font especially

Well done on implementing logic to provide customized page for the user

I'm interested in the logic of the following lines. Why would you change the url, rather than keeping the same endpoint and serving up the file?

if (req.url === "/") {
      req.url = "/public/indexProtected.html";
    }

Router.js, lines 9-11

Top scores all around nice one!

Great work, but I don't understand if I have logged in or I have entered wrong username or wrong password. I am not sure where I am in the app, home/standard page or my own page

You have a beautiful project, but I can't really enjoy it as I don't get half of it...
Hard to follow the readMe, I don't get how to enter inside of your database, I'm confuse in the project...
But super funky idea! Well done with the SVG! 🍾

This is such a good idea. Using the same xhr request function for all the backend requests. AND a callback!? Super impressed.

Such a cool idea that almost kinda works!

!(congrats)[https://media.giphy.com/media/g9582DNuQppxC/giphy.gif]

dbConnection.query("INSERT INTO svg_shape(svg_id, shape_id) VALUES ($1,$2)", [svg_id, shape_id] spotted -> adopted, how do you call this again?

I logged in, then pressed back, then the heroku link again the data wasnt being displpayed anymore though

This is witchcraft and I'm not okay with it.

res.end(file.replace("{{ username }}", username));
handlers.js, line 23

500 indicates a server error. 404 indicates the resource isn't found, which is what you're describing on line 19 of handlers.js (inside your staticAssets function). If one of the requested files isn't found, it probably wouldn't be due to a server error, just an incorrect URL.

Perhaps add a 'please select' comment to the dropdown for a better user experience?

I'm nitpicking now, coz the code is pretty dang good, but there are still a lot of console.logs in the code. Maybe delete once you've finished.

This is something we all end up saying to each other every week, but I REALLY mean it this week. Your design is fantastic, minimalist, clear. A reminder that white and black can be really powerful. Great job!!

On desktop I can recognise where the dropdowns are...

But as a mobile user, I'm not sure! What's dropdown and what's text with a border around it?

You have included authorisation, cookies, back-end validation, showing the username when logged in... FANTASTIC! 🌟

Perhaps some client side-validation would be helpful?
Relates #62

Great job implementing client-side validation checks and providing descriptive feedback for your users!

It’s worth bearing in mind that, while client side validation can enhance the user experience, it isn’t considered secure.

For future reference, it’s a good idea to repeat regex pattern matching checks on the server side too. Currently, if somebody wanted to bypass your form input regex requirements, they could do so quite easily by removing the HTML required attribute in their browser’s console.

Looks like you've got the login working great, and the codebase is very clean and slick. But it's hard right now to use it without a way to register. I'm sure this is next on your list!