Skip to content

Latest commit

 

History

History
267 lines (143 loc) · 5.26 KB

presentation.md

File metadata and controls

267 lines (143 loc) · 5.26 KB
Raw

Week 7 Project

Evgeny, Jo, Saki, Safia

"Name My Kitty"

Concept

  • logged in users can upload pics :frame_with_picture:
  • any one can submit name suggestions 👆
  • [stretch] Other animals, not just cats (filter by species) 🐒
  • [stretch] up-vote names 👍
  • [stretch] cat-pic poster chooses name

Figma Design

Demo

How We Worked

Jo

Deployment - Safia Facilitator - Jo User - Evgeny Quality - Saki

Spike: file upload 📩

heard it before

We launched straight in

File structure and deployment > Authentication > App content > CSS

Kanban

Facilitator Role Circle

⚔️ Timing breaks ⚔️ Play a tune in breaks ✔️ Spot checks ✔️ Swapping at smaller pieces of work ⚔️ Don't forget estimates! ✔️ Prompt answers to questions and choose people decisively (hands up)

Database setup

Oli's set up a basic Express + Postgres app

Step 1: a) create schema in excel b) then init.sql

Step 2: a) create script folder with files db:setup & db:build & connection.js

b) Add scripts to package.json

  • npm run db:setup
  • npm run db:build

c)Push to github

Step 3: Individually a) Pull from github and npm i

b) Terminal: - ==chmod +x ./scripts/db:setup==& ==chmod +x ./scripts/db:build== - ==npm run db:setup== & ==npm run db:build== - repeat if changed init.sql c) VS code: DATABASE_URL= 'postgres://jess:123@localhost:5432/week7db' into .env

File Architecture

Quality: Role Circles

  • Making sure everyone has similar extensions: ie prettier so code formatting is the same
  • Making sure everything is consistent. ie names are consistent (ie req/res vs request/response, function names)

Technical Spike: Allow user to upload files

To create a form:

  • <form enctype="multipart/form-data>
  • <input type="file" id="cat_photo" name="cat_photo" required>

Save form to database

  • You need a diff type of body parser called multer to parse the data
  • Datatype for picture is bytea which allows to store binary string
  • ie init.sql looks like this: picture bytea not null,

Getting the image to display 🎉

Dynamically create a URL to actually load the image

server.get("/cat-pic/:catid", catPic.get);

  • params need to match server URl, and url :id should not have hyphens!
  • Function to display cat image on the dynamically created URL
function get(request, response) {
    const catId = request.params.catid;
    const cat = model.getCat(catId).then((cat) => {
        response.send(cat.picture);
    }).catch((error) => {
        console.error(error);
    })
}

The image tag

<img src="/cat-pic/${cat_img.id}" alt="" width="64" height="64">

Things we learnt

  • Co-authoring - the angle brackets are really important otherwise it doesn't work (screenshots below)

Questions we answered

Questions we didn't answer :thinking_face:

  • should auth.createUser (which leads to model.createUser) actually be called something more obvious like auth.createPassword?

  • should we use a @TODO extension in VSCode? see https://dev.to/eclecticcoding/todo-list-in-vscode-2mnb

  • "Add _ in front of unused arguments like the request argument in login.get". Why?