Solution/ quiz1

[abe2dev]

No description provided.

[helgakern]

Quiz I Cluckr

SCORESHEET FOR STUDENT IBRAHIM

TOTAL SCORE: 100%

Build Cluckr, a simple Twitter clone, with Express.

Icon	Value
✓	correct
✗	wrong

Part 1: Application Skeleton

Value: 9%

Total: 9/9

Build an Express app with the following:

Feature	Mark	Notes
Logging middleware installed and setup.	✅
Nodemon tool installed as a development dependency and made useable as a NPM script.	✅
Static assets middleware setup.	✅

Part 2: Sign In

Value: 10%

Total: 10/10

Feature	Mark	Notes
Create a sign-in page that shows a form with a single field for a username. When a user submits the form, store the username in cookies. Also, add the ability for users to sign out as well.	✅
Using a CSS file loaded from your static assets directory. Style the Sign In page to look like the wireframe.	✅

Part 3: Clucks

Value: 12%

Total: 12/12

Create a Postgres database for Cluckr.

Use a Knex migration to a create table to hold clucks, Cluckr's equivalent of tweets. Clucks should have the following fields:

Feature	Mark	Notes
Knex file and configs set up correctly	✅
A username	✅
An image_url	✅
A content	✅
A self-increment unique id	✅
created_at and updated_at timestamps	✅

Part 4: Create Clucks

Value: 28%

Total: 28/28

Feature	Mark	Notes
Routes related to clucks must be in one file.	✅
Only allow a user that's signed-in to create clucks.	✅
When submitted, Cluckr should add a new cluck to the database.	✅
A user should be able to give a link to an image url.	✅
The cluck should get its username field from the username in the cookies.	✅
A successfully submitted cluck redirects the user to the index page.	✅
Style the new cluck form to look like the wireframe below.	✅

Part 5: The Clucks Index

Value: 20%

Total: 20/20

Create a page to list and show all clucks as shown below.

Feature	Mark	Notes
Order them by their creation date.	✅
The X-rectangles should be replaced with images only if an image was submitted for the cluck. This would be the same image_url saved from the form above.	✅
Find an image to use in place of the rooster avatar.	✅
Both paths, / and /clucks, should send the user to this index page.	✅
Style the cluck index to be similar to the wireframe.	✅

Part 6: Navigation Bar

Value: 12%

Total: 12/12

Add a navigation bar.

Feature	Mark	Notes
There should be a "chicken" icon for the brand. Feel free to use any chicken image. The one in the wireframe comes from Twemoji.	✅
Clicking the brand sends the user to the index.	✅
The "Cluck!" button should link to the new cluck form.	✅
It should have a "Sign In" button that links to the /sign_in page.	✅
When the user is signed in, display their name instead of the "Sign In" button.	✅
Style the navigation back to look like the wireframes.	✅

Part 7: Overall Styling and Design Effort

Value: 4%

Total: 4/4

Challenge: Human Friendly Creation Date

Value: 2%

Total: 2/2

Display the created_at date for clucks in a human-friendly readable way.

Feature	Mark	Notes
Display the created_at date besides the username as shown in any wireframe with clucks.	✅
Use plain language to show the date relative to the current date. (e.g. yesterday would appear as 1 day ago, 22 minutes ago, 2 hours ago, etc)	✅
Anything less than a minute ago should show as Just now	✅

Challenge: Trending Tags

Value: 3%

Total: 3/3

Add a trending tags section that only appears in sizes larger than mobile as shown below.

Feature	Mark	Notes
If the user enters a hashtag (such as #Things), then store them in another table alongside a counter with the number of times the hashtag was used.	✅
Whenever a cluck is created that contains hashtags that already exist, increment each of their counter fields.	✅
Use that data to make the "Trending Clucks" section functional.	✅
Sort them by their counter field in descending order.	✅