NSS Evening Cohort 10 Capstone: writersResort

Description

• writersResort allows users to post poems and invite feedback on those poems. Each user has access to edit and delete their own posts or comments, via Axios calls. Each deleted post also deletes any comments associated with the post. Authentication occurs through Google and pulls user's displayURL and Google Username. Each post/comment is stamped with the time it was created and updated.

Demo Link

Check out the Project

Requirements

• React
• CRUD using Firebase
• Bootstrap
• Github Projects for planning

Technologies Used

• Axios 0.19.1
• Bootstrap 4.4.1
• CSS3
• ESLint 14.0.0
• Firebase 7.7.0
• Fontawesome-svg-core 1.2.28
• HTML5
• JavaScript
• Moment.js 2.24.0
• Prop-Types 15.7.2
• ReactDOM 16.12.0
• ReactJS 16.12.0
• React Flip Move 3.0.4
• React-fontawesome 0.1.9
• React Router DOM 5.1.2
• Reactstrap 8.4.1
• SCSS 4.13.1

Application Features

• Sign in with Google
• Users VIEW all postings upon logging in
• Each post bears its creator's Google displayURL
• Posts and comments ordered by newest first

Users can

Posts

• Create a new Post
• View all Posts regardless of creator
• Update a Post they created
• Delete any Post they created

Comments

• Create Comments on a post
• View all Cmments regardless of creator
• Update a Comment they created
• Delete any Comment they created

Screenshots

Auth Page

About Page

All Posts/Logged In Landing Page

Create Post

Create Post (alert for no text)

Edit Post

All Posts with updated Post ("Last updated" now appears on the updated Post)

Comments Page

New Comment Added

Original Comment Field doubles as the Update Field

Comments with updated Comment ("Comment updated" now appears on the updated Comment)

Comments (alert for no text)

How to Run

• Clone down this project from GitHub
• Install http-server from npm.
• In your browser, navigate to https://localhost:3000/

Contributors

Gabriel Seals

Sources:

• typewriter on all pages: unsplash

• textbook paper background: https://www.codesdope.com/blog/article/getting-notebook-paper-effect-with-css/

• original thumbtack code: https://codepen.io/selfpressed/pen/Aiqoy

• comment post it notes: original jsfiddle

• image on Auth page: unsplash

• notebook and key on About page: unsplash

• Roger's profile photo: unsplash

• scattered paper in comments: unsplash

• brown paper on make comment: unsplash