maymc / consume-more-stuff

2Cents - A custom CMS for personal product sale

Consume More Stuff

A custom CMS for personal product sale

Introduction

Build a Content Management System using:

• Backend

  • Express as the application server
  • PostgreSQL as the database server
  • Bookshelf.js as the ORM
  • passport.js for Authentication and Authorization

• Frontend

  • React.js or AngularJS as FE framework
  • Sass for styling
  • Webpack for bundling, provided by FE generator.

• Stretch Add-ons

  Some stretch and polish goals will use additional technologies.

  • AWS S3 for storing product images
  • mailgun or sendgrid for sending email

Your team will be building a minimal CMS to allow users to list personal items for sale. The application will allow unauthorized users to browse the listed products. To post an Item for sale, a User account will be required. The backend should provide RESTful api endpoints. The frontend should be a SPA (Single Page App) that provides a smooth user experience.

You will need to work as a team to complete this project. To facilitate team communication you will be using Trello to track tasks and stay on track.

The instructors will provide a tech lead role, and will need to approve design and implementation decisions. Data modeling will need to be done by the team, but approved by the tech leads.

Business Requirements

MVP

Unauthenticated user

• Home page should list x number of random Items by Category.
• Home page should provide a way to view all Items.
• Home page should provide a view of Items by Category.
• Home page should show a subset of key details of the Items, along with one image.
• Home page should have a login button.
• Item detail page should contain:
  • description (required)
  • price
  • manufacturer or make
  • model name or number
  • condition (required)
  • category (required)
  • dimensions
  • when the Item was initially published
  • when the Item was last updated
  • notes / details

Authenticated User

• Should be able to view the same home page and details that an unauthenticated user can.
• User home page should contain:
  • A way to add new Items.
  • A way to logout.
  • display the current Users name
  • List view of published Items.
  • List view of sold Items.
• Add new Item should present the User with a form to add all Item details.
  • A newly added Item should have a status of published when created.
  • The form should provide validation and feedback if inputs in omitted or invalid.
  • Should be able to select an image and upload it for the Item.
• Item detail owned by User:
  • Should be able to modify all inputs.
  • Change the Status of the Item. published or sold
  • Should be able to replace the image associated with the Item.
• When an Item is published it should record the publish date and time.
• When an Item is modified it should record the update date and time.
• The User Settings view should provide the User a way to change their password.

Features

• The application should display a logo.
• Mobile friendly application. Styles should work from phone up to desktop.
• Clicking on an Item in any list, should display the detail view of that Item.
• Items should not be able to be deleted, but should have a status option that is equivalent.
• Should have a registration page to allow the creation of new Users.
  • Users should register using email.
  • Any information that can identify a user should not be available to any other User.

---

Stretch

Unauthenticated user

• Should be able to generate a share link to a specific item.
• Should be able to change the view between grid, list, thumb views.
• Should be able to view more than one image related to an Item.
• Home page should have at least one filter. To filter out Items from the view.

Authenticated User

• Add home view option to show featured* Items, based on how many views the Item has had.
• List of Items currently published for sale.
• List of Items pending publishing.
  • Should provide a quick way to publish the Item.
• List of Items in other state, (sold, archived)
• Should have access to a Messages view that allows anonymous communication between authenticated Users based on a published Item.
• The Item detail view should provide a way for the User to send a message to the User who published the Item.
• Should see a count of how may times the Item has been viewed and if the Item is currently featured.
• Home view should have a way for the User to hide Items they are not interested in and a way to restore all items being visible.

Admin User

• should be able to create new admin accounts
• should be able to make user inactive
• CRUD for categories
• should be able to ban a product sale
• CRUD for statuses
• CRUD for conditions
• should be able to send messages to any user
• Add Role table. Set application access based on role.

Features

• Add more states for Item. Pending, Published, Sold, Archived, Pulled.
• Add unit tests
• Messages will only be allowed by originating from an Item
• Admin User
• When Item details are viewed by anyone other than the owner, it should count the view, to track what Items are most popular.

---

Polish

Unauthenticated user

• should be able to search for keywords
• pagination
• should see a visual indicator if an item is getting a lot of views, is featured.

Authenticated User

• should verify email
• images should be stored in S3
• should be able to contact seller through
  • email
• can send email to a hashed email (eg. [email protected] ) that will forward to registered user
• should be able to see generalized area for the item (geo-location)

Admin User

• should be able to contact all or individual users
  • email
  • messages

Features

• make prettier
• integrate email service (mailgun, sendgrid)
• add supertest tests

consume-more-stuff's Issues

3.5 Refine components, styling, & function

• Research ways to make the application "pop"
• Refine components and components styling
• Convert CSS to inline scoped per component (better compatibility for mobile?)
• Create a cache (with catch) for CRUD to speed front end
• Adjust/Make sure components are mobile-browser friendly

3.8 Implement google/facebook sign up?

1.1 Outline Work Distribution

Organize who will do what

Prevent server request hanging

Add res.json('err') to catch.
'.serialize()' not neccessary

// get all the posts when any user lands on home page
app.get('/home', (req, res) => {
  Posts
    .fetchAll()
    .then(items => {
      res.json(items)
    })
    .catch(err => {
      console.log('error', err)
     res.json('err')
    })
});

sample issue!!

4.1 Create a react-native app

• Work on deploying react-native app

2.2 Basic CSS/HTML UI&UX flow

• Design basic CSS layout
• [optional] update routing into index.js with switch statements (suggested by @ba5eem/jocelyn)
• Create/refine more components (templates)
• Approve/Deny comment functions to work in tandem with transactions
• Refine HTML // Stylish & modern CSS
• Change favicon in Public/index.js to reflect 2cent logo

2.8 Auth issues!

Sorry to pull you guys into my auth issues. x)

I noticed last night, that when being redirected to auth0 for login, I'm getting an error, because it's forcing the url to localhost:3000/callback somewhere in react (i believe - not sure).

Not sure what the fix is at the moment. I would say we should just time-box this issue for now and if not, we can just try to work with a "pseudo" auth for now, as it may require more research with auth0.

If you have time, please try diving into the Auth0 tutorials

Implement Endless scrolling

Would probably just need to do a get request when scroll bar hits the bottom of the page.

Can we do get requests in chunks?

1.5 Learn and Install Git Kraken

• Group has installed and is using Git Kraken

As recommended by @lorecrafting, it may be useful and to our benefit to play around with this tool, to aid in the completion of this project.

Will close this issue when we have a connected work flow.

2.3 Test Redux

get data to dispatch to home page

3.9 Implement Dynamic Authenticated Views

• Authenticated view to show user profile pic/profile name in top right corner

(I believe that we will have to grab from either our user database or auth0's. However, I think we still need to look up how we can inject information into localstorage and maybe call upon those ids/keys)

• Research localstorage injection with Auth0 and JWT (json web tokens)

3.3 Implement search feature

• Research ideal search functions
• Decide on what to implement
• Test Implementation
• Completed Implementation

1.3 Establish project base environment

@drcox23 11/8

• Setup redux

@wyminc 11/8

Set up:

• docker
• express files
• db (migrate and seed)
• knex

@demifire || @maymc 11/8

• Finish pages and front end routing
  • Review how to create pages
  • Create pages/views folder
    • Create pages/views in pages folder with “hello world”
  • Review front end react routing
  • Get simple authenticated and unauthenticated routes working

Change Website name

remember to change tab name:

<title>React App</title>

1.4 Pre-planning

(1) Finish wireframe page/component planning

• Re-clarify MVP due on 11/14

  • Have main concept working for MVP e.g.
    • post request
    • method that selects amount offered within 'request'
    • comment to request
    • pseudo transaction => accepted comment completes transaction && now is seen from main view

• Profile dashboard

  • To include user information
    • Bio?
    • Profile picture? - stretch goal (Are we able to upload pictures to a database???)
    • Change password
    • Delete profile
    • Change email/username

• post view (poster pov) (possible modal?)

• Draw up/Create a high fidelity mockup for the website to help clarify/streamline ui/ux and new possible enhancements - Reference

• Finish/review database structure and relationships

  • Completed by @wyminc

1.5 Creating a higher-fidelity mockup

Just a question, should we consider a higher-fidelity mockup for the site, so we are aligned on the look/feel of the site?

just a thought

2.6 Readme has no getting started directions

Add quick getting started to the readme, like what i need to do - to get going. You can add a script in package.json as well - like a setup app script, for example:

"setup": "npm i && docker-compose up --build -d && npm run migrate && npm run seed"

1.2 Set up environment

@maymc

• Set up react environment
• Push environment
• Pull initial environment
• Install node modules
• Check out into feature branches
• Setup github repo and development branch properly

2.1 Implement Authentication

• Hello world for auth
• Merge to development
• Grab users from database
• Get/Create unique ids for users to see exclusive content

2.7 Incorrect location of repo on EC2 (EC2 Stuff)

• Get public id_rsa keys
• Chown
• Make superusers
• @maymc Create public/private rsa key for github repo and add it into repo settings
• Compose-down -v on current repo, delete, and reclone latest into shared directory
• Reinstall npm, node, docker, etc.. as needed. Update Dockerfile as needed
• Run server, and rebake S3 image

Will need to move the repo to a shared view location and get everyone to send their public ssh keys.

Following, I will make everyone a superuser, and that should give everyone access to the live server - where we can pull the latest repo.

@maymc, you may also need to generate a public/private rsa key pair for the github repo, so we can clone via ssh.

3.2 Implement transactions

• Research 3rd party add ons
• Decide on what to implement: via stripe/venmo api (or Baseem's credit idea), etc...
• Test Implementation
• Completed Implementation

3.1 Register a Domain Name and Point to S3

• Register a Domain Name

possible future urls available: 
twocentexchange.com 
twocentsforyou.com mytwo-cents.com 
my-two-centz.com

• Point S3 to namecheap domain name via Amazon route 53

• (Optional) SSL certificate - Secure website with https

3.10 Implementing our own DB in tandem with Auth0

Stretch Goal

It seems to me that we can use our own custom database, but I'm not entirely sure how it works with auth0.

In order to start using our own database, we must first wipe the users table currently on Auth0 from the auth0 dashboard.

I'm not sure, but it kinda looks like if we did use our own database, we can also customize the look and feel of log-in and sign up - which imo is more fitting over being redirected in plain sight to a third-party (at least in terms of the end product).

https://manage.auth0.com/?#/connections/database/con_ctODbr9TMdTd20np/plug

Move auth0 configuration variables to .env file

2.5 Deploy to S3 and EC2

• Pull repo to ec2 instance & compose up to run server
  • Create EC2 instance
  • Curl localhost crud route within container
  • Curl IP address crud route outside container

• Build front end and deploy on S3
  • Connect front-end to EC2 server
  • Rebuild S3 image and upload

• Update S3 build with new master pushes

3.6 Capital vs lowercase

Go with one style?

//Models
const Users = require('./knex/models/Users.js');
const Posts = require('./knex/models/Posts.js');
const Comments = require('./knex/models/Comments.js');
const Transactions = require('./knex/models/Transactions.js');
const Type = require('./knex/models/Type.js');
const draftPosts = require('./knex/models/draftPosts.js');
const draftComments = require('./knex/models/draftComments.js');
const archivedPosts = require('./knex/models/archivedPosts.js');
const archivedComments = require('./knex/models/archivedComments.js');

2.9 Using Auth0 to scope specific user content?

MVP

As far as MVP goes, it looks like using JSON Web Tokens changes the process a little.

In our current setup, we are kinda stuck using the Auth0 database. As far as my understanding goes right now, we can write to local storage and also grab data from JWT, I guess similar to how we would grab from local storage.

The issue is that I'm not too sure how we can scope the user to see specific content pertaining to them.

Auth0 also uses a method called scope that helps to define what a user is allowed to see, but I'm not sure it's exactly what we wanted to do initially. Will probably need extra help understanding this concept to its completion.

...Then again it might be something simple like grabbing specific data from the JWT, or creating a method specific information to a user defined location.

3.7 Implement verify user email authentication

3.4 Implement image hosting and upload in S3

• Research how to implement
• Test Implementation
• Completed Implementation

2.4 CRUD routes for server.js

Need establish basic crud routes for server.js

To include:

GET all posts
GET all comments
GET my comments
GET post by id
GET comments by post_id
POST post
POST comment
POST drafted post
PUT drafted post (?)
PUT accepted comments (?)
(additional ones TBD or will create a new issue)

1.5 Create a high-fidelity mockup

• Draw up/Create a high fidelity mockup for the website to help clarify/streamline ui/ux and new possible enhancements