fac-11/thelibrary

THE centralised resource of useful weblinks for FAC

theLibrary ⚡

A centralised postgresql resource for FAC

Coverage: 90% Statements 18/20, 62.5% Branches 5/8, 100% Functions 0/0, 100% Lines 18/18

Requirements

• Simple web app with a node server and a database
• Your database comes with a schema, which should be documented in your readme (along with any other architectural decisions)
• Database hosted on Heroku, or locally
• Build script for your database
• Security concerns appropriately considered (you must protect against script injections!)
• Good test coverage both server- and client-side
• Content dynamic, but DOM manipulation kept to a minimum
• Mobile-first design
• Clear user journey (even if you take one of our suggested ideas, document the user journey in your readme)

User story

I can pick a topic and find a bunch of rad online resources with an article title, print data and link 🔗

On load I can find out about the coolest articles peeps are raving about 🆒 🆒 🆒

Planning: architecture and flow

We planned out our flow as follows:

And wanted it to look like this:

Database Schema

resources 📚

Column	Type	Modifier
id	serial	PRIMARY KEY
title	VARCHAR(300)	NOT NULL
link	VARCHAR(300)	NOT NULL
publish_month	INTEGER
publish_year	INTEGER
upvotes	INTEGER	DEFAULT 0

topics 💻

Column	Type	Modifier
id	serial	PRIMARY KEY
topic	VARCHAR(300)	NOT NULL
week	INTEGER

resources_topics 📑

Column	Type	Modifier
resource_id	INTEGER REFERENCES resources(id)	ON UPDATE CASCADE
topic_id	INTEGER REFERENCES topics(id)	ON UPDATE CASCADE

What we decided on and how we decided to do it

Cool learnings

• Turns out sql hates capital letters! You can't name databases with caps 😿
• ALSO atom is a thief! 🚔 And sometimes steals your letters from terminal
• Writing tests within a foreach loop which take a callback 😨

const topicArray = ['Javascript', 'CSS', 'Node', 'Databases', 'Accessibility', 'Git', 'TDD', 'HTTP', 'APIs', 'Callbacks', 'Software Architecture', 'Servers', 'Development Methodologies', 'HTML', 'UX'];
topicArray.forEach((topic) => {
  tape(`getTopic ${topic} query`, (t) => {
    getTopic(topic, (err, res) => {
      const actual = res[0].topic;
      const expected = topic;
      t.equals(actual, expected, `getTopic object output topic should be ${topic}`);
      t.end();
    });
  });
});

• Pushing to heroku from a local branch:

git push heroku yourbranch:master

Good links

thelibrary's Issues

Create style.css

mobile first.

Add normalize.css

Create handle_trending.js

same as get_topic.js but with a different query string

'Topic' headers should not appear at all on topic pages

They are currently appearing when you upvote (same as with the trending header on home page).

Instead we want to get rid of it completely as we have the topic title in the search/dropdown box.

include an "all" button at the top of the list of topics?

If I click on a particular topic (e.g. callbacks), it would be nice to be able to go back to the list of all the resources available.

Right now, I can only choose to go to another topic from the list.

Set up file structure

Folder database

• db_connection.js
• db_build.js
• db_build.sql

Folder public

• style.css
• index.html
• dom.js
• request.js
• Folder assets > favicon.ico

Folder tests

• Folder tests_ database (duplicate of database folder)
• database.test.js
• src.test.js
• public.test.js

Folder src

• server.js
• router.js
• handlers.js
• get_topic.js
• get_trending.js

In ROOT

• .gitignore (config.env, node_modules, ds_store)
• travis.yml
• config.env
• Procfile

Create index.html

Create html doc.

Mobile first!

Doc should have grabable id's for js

Another SG for you!

Another stretch goal would be to add all the existing books in there in a table with possibility to request renting them, plus seeing which ones exist but are currently rented and stuff :-)

Set up Travis

👍

Update readme with schema

Draw out schema tables in readme

Create a database on heroku

following instructions from this morning

Create db_build.sql

Figure out how our data is going to look - according to schema.

Create handle_topic.js

Create file with getTopic function which takes a string and a callback.

Function will have to create a sql query with the string, then call dbConnection with the query string and pass the response to the callback

created a build script for your test database but don't use it in your test file

Instead of these lines, you could just require in db_build_test.js, which does the same thing 👍

Responsiveness: all font sizes need to be scaled up for mobile

Except the dropdown which is a great size!

Add travis badge

They're cool :)
if you click on the badge that shows up on the travis site it will give you an image url you can add to your readme

Create dom.js

Dom function will take in an object and append each resource as a button.
It will clear the current content.
It will replace the title eg Trending will become css

Amend resources_topics table to include primary key

Responsiveness: upvote button doesn't centre

When scaling down, the upvote button progressively moves upwards out of centre.

Create server.js

Create a server using environment variables

RUN ISTANBUL

Do test coverage and add the badge to the readme <3

no description of how to run the database locally in your readme

This may not have been explicitly stated to you guys, but it's really important that you have instructions in your readme that explain how to run your project locally.

In the case where you have a database in your project, you want to instruct people on:

• creating their database locally
• what environment variables they need to set
• what scripts they should run

etc.

empty file: public.test.js

is empty :(

Suggestion: Add functionality to submit a resource

Would be nice to submit a resource to the site

Trending title no longer displayed

With the removal of topic titles, we no longer have a way of signifying the front page is the trending section.

I've no suggestions at the moment as the title removal looks great, but worth thinking about how to incorporate it into the design :)

TECHNICAL SPIKE - topic numbs

Check how easy it is to query all topic names for each resource to be used in DOM.

UX: Dropdown list view needs to be longer

As currently we can only see four topics at a time without having to scroll.

refactor out DOM function

Currently the DOM function is very large! Some of the code can be refactored into separate functions eg setClassAttributes, and called inside for ease of reading.

Create XHR request function

in request.js create an xhr request function that take a string value and a callback as arguments.

The function will feed the string into the url and pass the response text to the callback.

Integrate with GitHub

This will allow us to make sure each individual only upvotes the one time amongst other things - possible integration with Gitter being one of them.

Set up node dependencies / dev dependencies

Project dependencies
env2
pg

Dev dependencies
tape
tap-spec
nodemon
istanbul
shot
eslint
travis

Add in scripts
tests: 'tape tests/*.test.js | tap-spec'
start: 'node ./src/server.js'
devstart: 'nodemon ./src/server.js'

move into `foundersandcoders` organisation

Given that you're building on this during biz dev time & intending for FAC to actually use this, could you move it into the foundersandcoders github organisation? 🙏

Just go to Settings -> ("Danger Zone" at the bottom) -> Transfer ownership -> Type in theLibrary & foundersandcoders

Protect against script injection

Don't let them do this!

no error handling in topic or trending handlers

You return your errors here:

• https://github.com/FAC-11/theLibrary/blob/master/src/handlers.js#L42
• https://github.com/FAC-11/theLibrary/blob/master/src/handlers.js#L51

instead of serving something meaningful to the user

Create Heroku

Set up a heroku site with a database

Create handlers.js

Handlers will have 4 routes

• handle home
• handle public
• handle topic
• handle trending

Make all tags/ elements accessible

THanks :)

test database

make a mock database for testing purposes

Create event listener

When user clicks on a topic on the site, an event listener will call the xhr function and pass in the dropdown value string.

in tests: dbConnection.query is async

(me and Aisha discussed this)

Because .query is async, maybe each test should be inside the callback e.g.

dbConnection.query(sql, (err, res) => {
  if (err) return console.log(err);
  tape('SQL query case check', (t) => {
    getTopic('css', (err, res) => {
      const actual = res[0].topic;
      const expected = 'CSS';
      t.equals(actual, expected, 'getTopic object output topic should be "CSS" as the SQL query string is case insensitive');
      t.end();
    });
});
});

https://github.com/FAC-11/theLibrary/blob/master/tests/database.test.js#L8

'Trending' header doesn't come up on the homepage

Should come up on page load but doesn't. Instead it appears on upvote click.

Handlers not servering css

oops!

Create router.js

Create a router which is server handlers according to endpoints.

allow upvoting

Add a like button to articles which updates the database and sends back the current state of database for the page you are on

Click event listener firing off twice!

Problem with our event listener in 'dom.js' upvoting twice?!

Create build script for database

create build_script.js
create build_script.sql
create db_connection.js

Weirdly formatted topic name when there's nothing in database

development%20methodologies > Development Methodologies please.