nsavelevjs / read-and-butter

Read-And-butter

• Overview
• MVP
  • Goals
  • Libraries and Dependencies
  • Client (Front End)
    • Wireframes
    • Component Tree
    • Component Hierarchy
    • Component Breakdown
    • Time Estimates
  • Server (Back End)
    • ERD Model
• Post-MVP
• Code Showcase
• Code Issues & Resolutions

Overview

Read&&Butter

Judgment free zone blog app where we don't place likes or comments on articles you posted. Simply put an open medium with no judgment.

MVP

• Allow users post articles
• Users of the articles are able to edit and delete their articles
• People are able to create a user account with passwords
• Authentication

Libraries and Dependencies

Use this section to list all supporting libraries and dependencies, and their role in the project. Below is an example - this needs to be replaced!

Library	Description
React	React
React Router	Route
TailWind	Front End CSS library
Axios	Database assistant
Bcrypt	Encryption
JWT	Webtokens

Client (Front End)

Wireframes

• Desktop Landing

• Mobile

• Tablet Resource

Component Hierarchy

src
|__ App.jsx    //Holds State
|__ Pages/
      |__ About.jsx  
      |__ Home.jsx
      |__SignUp.jsx     
      |__SignIn.jsx
|__ Shared/
      |__ Articles.jsx
      |__ Edit.jsx
      |__ Header.jsx
      |__PostMaker.jsx
|__ services/
      |__ auth.js
      |__ apiHelper.js
      |__ apiconfig.js
      |__articles.js

Component tree

Component Breakdown

Component	Type	state	props	Description
App	Class	y	n	Where State Exists
Articles	Class	n	n	The header will contain the navigation and logo will direct back to.
PostMasker	functional	n	n	Creates articles.
Header	Class	n	n	The header will contain the navigation and logo will direct back to.
Navigation	class	n	n	The navigation will provide a link to each of the pages.
SignIn	Functional	n	y	Allow users to log in.
SignUp	Functional	n	y	Allow users create an account
About	class	n	y	About Read&& Butter
Home	class	n	y	Home Page
Edit	class	n	y	Edits articles
Delete	class	n	y	Deletes articles

Time Estimates

Task	Priority	Estimated Time	Time Invested
Add Login Form	L	3 hrs	3hrs
Create CRUD functionality	H	6 hrs	8hrs
Create User Authentication	L	3 hrs	1hrs
Components	L	7 hrs	5hrs
Create React App	H	.5 hrs	.1hrs
CSS using tailwind	L	8 hrs	4hrs
Ruby backend scaffold	H	4 hrs	1.5hrs
Incorporate Backend => Frontend	H	3 hrs	5hrs
TOTAL		42hrs	27 hrs

Server (Back End)

ERD Model

---

Post-MVP

• Tags - When turned visible, will take you a feed with all posts that have the same tag.

---

Code Showcase

// Found in App.js

handleEdit = async (tag_id, Id, Info) => {
    const updatedArticle = await putArticle(tag_id, Id, Info);
    this.setState(prevState => ({
      articles: prevState.articles.map(article => article.id === Id ? updatedArticle : article)
    }))
    this.props.history.push('/')
  };

//Found in Edit.jsx

componentDidUpdate=(prevProps)=>{
        if(prevProps.article !== this.props.article){
            this.setFormData()
        }
    }
    handleChange = (e) => {
        const { name, value } = e.target
        this.setState({ [name]: value })
    }

Code Issues & Resolutions

Change log

Removed Navigation bar due to implementation on the header.

Articles Referenced

Tailwind card logic used

read-and-butter's Issues

Working on implementing Delete and Update

PROJECT ISSUE TICKET

Trying to implement Update and Delete Functionality.

Unexpected Behavior

Expected Behavior

edit: still on its building blocks, delete: I feel like it's almost there I just don't see why its not working.

Reproduce the Error

Delete button does not cause anything when pressed

Documentation

Tasteville

Attempted Resolution

Not too sure if I'm doing it right I would like some help.