/Read-And-butter

Primary LanguageCSS

Read-And-butter


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

Landing

  • Mobile

Mobile

  • Tablet Resource

Tablet

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

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

ERD


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