Pearls of Wisdom by Reuben, Emaggy, Gigi and Leonie - Week 8

Team

Reuben 🎻 Emaggy 🤴🏿 Gigi 🙋 Leonie 👶

Photographer: Gigi

The app

Pearls of Wisdom is a quote taking app that allows users to log quotes and add them to an account/ group. Users can create a new account or use an existing account to add quotes to.

Code of conduct

• Changing pairs frequently
• Commit regularly
• 20/20/20
• Plan and document (file structure, layout, schema)

Milestones

Wednesday morning: Wireframe, file structure Wednesday afternoon: Repo, server, database Thursday morning: client side requests and handlebar Thursday afternoon: CSS

Wireframes

Install

npm install

npm test

npm run nodemon

OR

npm start

To-Dos

• Come up with idea

• Set up workflow/milestones

• Set up code of conduct

• Decide on file structure & wireframe

• Create user flow & take pic for readme

• Set up repo

  • packages Dev: tape, supertest, nodemon, dotenv,
  • packages DEP, express, express-handlebars, body-parser(for parsing post requests), pg, query-string, serve-favicon

• Set up express server structure

  • Set up server.js
  • set up app.js

• Set up hbs files

  • error
  • home
  • main
  • header
  • head
  • footer

• Make Schema for database

• Set up database tables

  • db_build.sql
  • db_build.js
  • db_connect

• Set up database queries

• set up {{#each}} in queriesByCategory to populate the table with quotes

• Connect to Heroku

• Create routes

  • redirect when post request is made to /submitquote
  • Home & TDD
  • error client side & TDD
  • post route & TDD
  • back home route & TDD
  • server side error
  • Search by category (without posting) & TDD

• CSS

Stretch Goal

• Like quotes and display top on home page Like quotes and display top on home page
• Search quotes by keyword
• Delete quotes

File structure

• public
  • css folder
  • images folder
  • js folder
• src
  • app.js (middleware & calls index.js in controllers)
  • server.js (starts the server)
  • models (database stuff)
  • controllers folder (request handling functions are exported from their files and used in index.js.)
    • index.js (imports all handling functions and defines endpoints)
    • error.js (exports each function)
    • home.js (exports each function)
    • quotes.js (exports each function)
  • views folder
    • home.hbs (fills into body of homepage, no header )
    • error.hbs (view for errors 500 and 404)
    • quotes.hbs (fills into body of quotes page)
    • layout folder
      • main.hbs (common skeleton of page, no header)
      • error.hbs (common skeleton for 404 and 500)
    • partials folder
      • head.hbs (metatags, fills into main.hbs)
      • header.hbs (fills into quotes.hbs)
      • form.hbs
      • footer.hbs (fills into main.hbs)
      • quotesByCategory.hbs (fills into quotes.hbs)

FORM ENDPOINT AND RENDERING

router.post('/submitquote', (req, res) => {
  res.render("quote", {quotesArrayFromDatabase}
  })
})

quotes.hbs

<ul>
  {{#each quotesArrayFromDatabase}}
  <li>{{author}}{{quote}}<li>
  {{/each}}
</ul>

Slides

What we struggled with?

• server side validation
• inserting PNG files in handlesbars
• Using FETCH- Not working well with redirecting
• Making tests for server errors
• Naming with the categories (lowercase in backend, capitalized in front end
• Lack of time for database testing