/Pearls-Of-Wisdom

Quote collecting app

Primary LanguageJavaScript

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