Giter VIP home page Giter VIP logo

week3-bdjs's Introduction

Week3 - BDJS: e-Coffee

Authentication

Co-authors

Co-authored-by: danilo-cupido [email protected]

Co-authored-by: cerealenjoyer [email protected]

Co-authored-by: 0bubbles0 [email protected]

Co-authored-by: jijip41 [email protected]"

Roles

  • UX → Sasha
  • DevOps, Deployment → Ji
  • Facilitator, Scrum → Barbara
  • Quality Assurance → Danilo

Our Planning Links

Our Mistakes & Fixes

  • npm install dotenv → needed this to run our local server

  • Why doesn't sign-up work?

    • needed to customise our ./scripts/create_db, ./scripts/populate_db
    • .env:
      • Database_URL: local psql address
      • add COOKIE_SECRET
    • change async functions back to .then()

Description

https://learn.foundersandcoders.com/course/syllabus/apprenticeship/authentication/project/

Your project this week is to build a web app that authenticates users and stores user-specific data in a PostgreSQL database.

Our app, ${placeholder} is looking at disrupting 'doing a coffee run'. Instead of asking around your office and trying to remember everyone's drink order, ${placeholder} lets you see everyone's drink order wherever they are: At their computer, in the queue at starbucks, even ${somewhere else}! Simply log on and put in your drink order, and your coworkers will be able to access that data from their app. We at BDJS know that tastes change and develop over time, so if you need to change your coffee order, that's no problem! Just log back in and change your order.

User stories

Core

  • As a user, I want to: submit information to your site for anyone to see
  • As a user, I want to: come back to your site later and see what I posted is still there
  • As a user, I want to: be the only person allowed to delete my stuff
  • As a user who needs a coffee, I want to: Log in and share my favourite drink
  • As a user who is buying coffee, I want to: View everyone's coffee order, so I know what to get them from Starbucks
  • As a user who already uses our app, I want to: Edit my coffee order, and my name, in case either of them change.

Acceptance Criteria

  • Forms for users to sign up and log in
  • A form for users to submit data only accessible to logged in users
  • A page showing all the data
  • A way for logged in users to delete their own data
  • Semantic form elements with correctly associated labels
  • A Postgres database hosted on Heroku
  • Hidden environment variables (i.e. not on GitHub)

Stretch criteria

  • Tests for all routes
  • A user page that shows everything posted by a single user
  • GitHub Actions CI setup to run your tests when you push

week3-bdjs's People

Contributors

0bubbles0 avatar cerealenjoyer avatar danilo-cupido avatar jijip41 avatar

Stargazers

 avatar  avatar

week3-bdjs's Issues

I dont like coffee

The place it says "I dont like coffee" delete my username and message. could be named differently

Always use links for navigation

.catch((error) => {
console.error(error);
response.send(
buildPage(
`Error`,
/*html*/ `<h2>User not found</h2> <div>
<form action="/goback" method="POST" class="centre">
<button id="gobackBtn">Go back</button>
</form>
</div>`
)
);
});

It's fantastic that you've not only handled this error, but you've sent a useful error message back to the user and even provided them with a quick action to take.

My only issue is that the "Go back" button should really just be a link. It's a navigation action ("view this page") rather than submitting any user data to the server. Always prefer the simplest solution you can.

Also POST requests generally shouldn't return HTML responses—it's better for form submissions to redirect to a new page so you get a fresh GET request. Otherwise you get problems like users refreshing the response page (or clicking back to it later) and resubmitting the form by accident. Also generally browsers do things like cache GET responses (since they should be safe). They cannot do this for POSTs since they are designed to change things on the server.

Lighthouse test! 👏🏾

Desktop: 💯 % Performance, Best Practice & SEO 🥳 , 90% Accessibility 👍🏾

Accessibility

  • Background and foreground colors do not have a sufficient contrast ratio.Read more

Screenshot 2021-10-14 at 19 22 02

  • List items (<li>) are not contained within <ul> or <ol> parent elements. Read more

Screenshot 2021-10-14 at 19 22 53

Mobile: 98% Performance, 💯 % Best Practice 🥳 & 96% SEO , 90% Accessibility 👍🏾

SEO

  • Tap targets are not sized appropriately 67% appropriately sized tap targets.
    Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements. Learn more.

Screenshot 2021-10-14 at 19 21 28

Folder Structure

  • ideas from Tuesday-morning workshop: Session management
  • .env files
  • update .gitignore

Heroku: database, deploy

  • deploy simple "Hello"
  • set up database
  • deploy advanced: with working database, what about .env?

the layout

I like the simplistic layout of the cade and how it functions. it is easy to follow

Lighthouse Accessibility

You have a really good lighthouse accessibility score of 93 💡

The only minor issue was that: 'List items (<li>) are not contained within <ul> or <ol> parent elements.'

This means that screen readers would not announce them properly

Readme

Really like your detailed Readme file with all your co-authors, project role, mistaked, links.
Next time maybe add some screenshots of your app and instructions on how to run your repo locally.

Commented out code

I know your probably didn't have time, but try to remove any unused commented out code and console.logs

Design

Love your coffee theme, app name and colour. Looks very stylish and professional.
The only improvement is to make it more responsive for mobile view, as names get mixed up.

cypress

Good testing methods for running the tests on cypress.

Forms: Sign-up, Log-in

  • Sign up
  • Log in
  • Write a coffee wish

All:

  • Authentication: cookie, hash, SQL
  • HTML: semantic, label
  • requirements
  • eventListeners
  • error: function, HTML field, css class .error

Character limit on Name

Name could have a character limit in the form to stop mega long names breaking the page layout

Installations

  • ESLint
  • Cypress
  • Node.js, Express, Nodemon
  • Database
  • Cookies
  • Encrypt

MIRO (README link)

I tried to access your schema for the project on MIRO, but access was denied.

Project board

I really like your project board! Especially the 'Try again later' tab. Look really organised ☕

Missing baseURL

Your tests are not running because when you start running your tests, Cypress does not know the url of the app you plan to test. So, Cypress initially opens on https://localhost + a random port.

As soon as it encounters acy.visit(), Cypress then switches to the url of the main window to the url specified in your visit. This can result in a 'flash' or 'reload' when your tests first start.

By setting the baseUrl, you can avoid this reload altogether. Cypress will load the main window in the baseUrl you specified as soon as your tests start.

  • You are missing
{
  "baseUrl": "http://localhost:3000"
}

You will find more information in the cypress docs

Miro, hackmd

Great to see that you have used Miro board for visualising and created Hackmd with all the setup instructions. This will save you lot of time in the future projects.

Readme

Liked the readme files, highlighted problems when it came to heroku which we found usefull

Great job! 🎉

Well done in hosting your project on Heroku! 🥳
I was able to sign up and see my order as well as delete it and had errors handled with user not found! 👏🏾
Also excellent work as you were able to to velocity & actuals! This will help you manage your time in the up coming weeks.
Well done in co-authoring, and getting your commits near enough even.
Your code is modularised and you managed to get some cypress tests done!
Pat your selves on the back!

Database: set up

  • ? preset coffee options?
  • tables, columns, constraints
  • try INSERT, SELECT
  • connect Heroku database
    • Connect to your Heroku database with psql your_heroku_database_url
    • Insert the data into your DB with \i init.sql

Well done with your project

Hi team! Very impressed with all your hard work and how nice your project looks and it works and you managed to deploy it! You improved your database skills and learned so much during this week and you should be very proud of yourself!

Authentication/model/tests

You successfully managed to implement sign up/log in/sign out and even update the user details. That was the main goal for this project and you achieved it, it all works! Your code looks clean, readable and modularised.
And you even had time for all the tests! Well done!

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.