!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.
- Install dependencies from root directory of project:
npm install - Launch Node server:
npm start - Launch Express server:
nodemon server.js
!Pocket is a full-stack, CRUD application that allows users to manage articles found on the Internet.
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.
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.
- 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.
- Scraping cards from URLs.
- Manipulating the sidebar.
- Tags.
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.
- 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent