Skip to content

About

A content-aggregation and discovery platform that lets users manage collections of saved online articles.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Latest commit

 

History

294 Commits

Folders and files

Repository files navigation

!Pocket (Not Pocket)

!Pocket was first conceived by Simon Tsegay, Yaakov David, Darrell DeCosta and Eryl Murphy in the summer of 2018 amidst a week-long code sprint, when they sought a more aesthetically accessible version of Google Bookmarks, while also being inspired by Pinterest and especially Pocket in particular.

Getting Started

Installation Instructions

  1. Install dependencies from root directory of project: npm install
  2. Launch Node server: npm start
  3. Launch Express server: nodemon server.js

In a Nut-Shell

!Pocket is a full-stack, CRUD application that allows users to manage articles found on the Internet.

Features

A registered user enters a URL for an article, then the article is scraped and formatted to display as a card.

An unregistered user can view cards on the !Pocket homepage. To create their own stash of cards, they must register. Once registered/logged in, they are permitted to create cards by submitting a URL into a form.

Registered users are then given the option of storing a card privately, or publicly. If they chose public, the card will be displayed both on their personal page and on the !Pocket homepage. Cards stored privately are only displayed on the user's personal page.

Cards can also be deleted, but only on the user's personal page.

Screenshots

Home

Imgur Image

Add

Imgur Image


Design Process

User Stories

As an avid consumer of web content, I want to easily access and manage articles I have selected to read in my own time.

As a curious individual, I want to see trending articles.

As a member of the online community, I want to share articles that will be of interest to others.

Wireframes

Home

Home

Home with sidebar

Home with sidebar

Add a card (personal page)

Add a card

Personal page

Personal page


Implementation

Tech Stack

  • Built with React.js.
  • CRUD functionality.
  • Posgres and Express API.
  • Unit tests written in Jest.
  • NPM package breakdown:
    • Bcrypt for user authorization.
    • Express-Session.
    • Open-Graph - when given a URL open-graph provides the open graph meta properties scraped from that URL.
    • Helmet - sets HTTP headers, preventing unintended elements from being included in our page, e.g. frames, images, tracking scripts, etc.

Challenges

  • Scraping cards from URLs.
  • Manipulating the sidebar.
  • Tags.

Project Workflow

Trello Board

Trello Board


Back-End Design

ERDs

The database features the tables users, stash, tags, and stash_tags.

Stash refers to the individual cards that host a URL. Not all tables were used. Tags were not realized upon project delivery, but the team intends to revisit this.

Sample schema

Imgur Image

Two models: Users + Stash.

Users

Imgur Image

Tags

Imgur Image

Tag groups

Imgur Image

Stash

Imgur Image


Backlog

Future Endeavors

  • Implement tags.
  • Embed videos.
  • Resolve why certain links cannot be scraped.
  • Implement a friends feature, so a user can give permission to another user to view their personal page.

About

A content-aggregation and discovery platform that lets users manage collections of saved online articles.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages