Giter Club home page Giter Club logo

week4-case's Introduction

Want to solve a mystery? 🧐

Week 4 - CASE

How to install

  • Download files
  • cd to the main folder
  • npm install to install the modules cited in package.json file

Technical criteria 🦹

  • Express server ✔️
  • Modular codebase ✔️
  • PostgreSQL database ✔️
  • Hosted on Heroku ✔️
  • One of the spike topics ✔️
    • upload files
  • Validate user-submitted data
  • Handle errors and inform the user ✔️
  • Styled appropriately

User stories 🕵️‍♀️

As a user, I want:

  • Create an account before uploading a picture
  • Receive a message if something on my registration goes wrong
  • Access the page with all the pictures uploaded to the application
  • Click on a picture
  • Come back later and see my picture is still there

Acceptance criteria ✔

  • Sign-up / Log-in forms
  • Add picture form only available to logged in users
  • Page showing all pictures
  • Individual page for each picture
  • Semantic HTML
  • PostgreSQL database hosted on Heroku
  • Secret environment variables

Future Improvements 🔩

  • Improve CSS for all pages
  • Tests for all routes
  • Individual page for each user
  • Flash messages
  • GitHub actions CI
  • More testing with Cypress

Schema 🍥

What we learnt 📚 🤓

  • How to upload local files to a database using multer
  • Creating effective schemas to handle the information
  • Authorizing access to users
  • Session management (with cookies)
  • Working with async code to solve database race conditions.
  • Deploy to Heroku and configure environment variables there
  • Using console and Heroku logs to debug

Bugs 🐞 🪲

  • In home page, we first placed the following line outside the if...else statement:
response.send(layoutHTML('Home', homeHtml));

As a result the home page was not rendering even when the user was successfully logged in.

💡 To solve this: We moved this line once in the if statement and once in the else.

week4-case's People

Contributors

elenamarinaki avatar aaadriana avatar cerealenjoyer avatar

Stargazers

 avatar

week4-case's Issues

Login

  • get, post
  • verifyUser (auth.js)
  • save session (model.js)

Authorisation

  • create user (auth.js)
  • create session (model.js)
  • delete session (model.js)

Impressive work!

It's so freaking impressive, and a testament to how much you have learned at FAC so far, that you have been able to design, code and deploy a fully functioning server side app, complete with newly researched features, when for most of this week there has only been two of you!! Great concept, lovely design, informative readme and lots of great code. Seriously well done!

Light-house

Screenshot at Oct 22 10-10-32

The light house score is great . well done 👍

Signup

create user to database

Mobile styling

The home page top graphic extends beyond the screen in mobile view, and so do the uploaded images (I'm viewing on Android, built in Xiaomi browser). Consider adding some media queries or dynamic styling to resolve this.

Styling

That was nice to see you tried to style your pages in this short time, in the "add-picture" page though I think adding the notes inside a box that look like a button makes the page a bit untidy. and the "back to the home page can be smaller and centered

The home page

homepage

Love the detective theme homepage, in mobile mode this theme is not fitting the screen fully.

Consistent font usage

<link href="https://fonts.googleapis.com/css2?family=Poller+One&display=swap" rel="stylesheet">

@font-face {
font-family: 'Breezy-Beach-Regular-Alternates';
src: url('/Breezy-Beach-Regular-Alternates.woff') format('woff'),
url('/Breezy-Beach-Regular-Alternates.ttf') format('ttf'),
url('/Breezy-Beach-Regular-Alternates.otf') format('otf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'American-Typewriter-Regular';
src: url('/American Typewriter Regular.ttf') format('ttf'),
url('/American Typewriter Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500&family=Lato&family=Oswald&family=Raleway:wght@300;400;500&display=swap');

Looks like you're downloading 4 fonts: Poller One, American Typewriter, Breezy Beach & Inconsolata.

First I'd recommend loading all your fonts consistently—if you're using Google Fonts load them all using a single <link> tag in the <head>.

Avoid using @import in CSS to specify more resources—this creates a "waterfall" loading effect which slows the page load down. The browser must download the HTML, find the <link href="style.css">, download the CSS, find the @import, download the new CSS file etc... It's better if everything is specified up front in the HTML.


You should also avoid downloading fonts you don't need. I.e. I can't see Inconsolata or Poller One actually used anywhere in your styles. You reference Nunito in one rule, but that isn't actually loaded. You probably need to audit which fonts you're actually using.

README

  • instructions
  • user stories
  • acceptance criteria
  • future improvements
  • schema
  • what we learnt
  • bugs

Form Validation

  • email
  • password
  • all fields completed
  • error messages
  • accessibility

would be cool to see all your guesses on a pic

Looks like you are storing the guesses but I can't see my guesses anywhere, would be cool to see all my guesses on each pic page so that I am not making the same guesses twice. Or maybe some feedback to say that I'd already guessed it

Would be better with loot boxes

I should be able to spend real money to buy mystery gems to buy and open mystery boxes that gave me answers to random mysteries

validation

The sign-up works great and if the form had validation that would make it perefect

Nice server file

I like how you've marked the different sections with comments

.env file

You don't have to write any username and password in the example.env file and always change the password after deleting the .env file from the repository :)

Validation!

if (!ALLOWED_TYPES.includes(file.mimetype)) {
response.status(400).send(
`<h1> Bad file extension! </h1><p>Please upload an image file</p>
<a href="/add-picture">Try uploading again</a>`
);
} else if (file.size > MAX_SIZE) {
response.status(400).send(
`<h1> That's way too big! </h1><p>Picture must be < 5MB</p>
<a href="/add-picture">Try uploading again!</a>`
);
} else {

Love to see some validation ✨

However it would be good to validate user input on the other forms. I managed to create a user with empty email and password fields (by removing required from the inputs in the DOM). Now I can submit the "log in" form with empty inputs and get logged in, since "empty email" and "empty password" are in the database 🙃

Heading elements are for structure, not subtitles

const html = /* html */ `<h2 class='signup'> please upload an image that represents you </h2>
<h3> <em> please </em> do not upload a photo of yourself to the internet, that is an extremely irresponsible thing to do! </h3>

Heading elements like h3 are there to create a page structure. If you imagine deleting everything but the headings you should be left with a table of contents that represents each section of the page. This means you should only use a new lower heading level when you're creating a sub-section within the current one.

You also should never skip heading levels—it doesn't make sense structurally to have an h1 followed by an h3; there must be an h2 in between (if you want the text to be smaller use CSS).

In this case (and a couple of others) you're using heading elements more like subtitles. Since this is just supplementary text (and not actually labelling a new section) it's ok to use a regular text element (like a <p>).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.