FullStack React Blog

About this repository
General
Requirements
Lessons Learned
Still Todo

About this repository

Main goals of this repository:
- To create API and Database routes that will then be used for the front end.
- Using react, display the posts and comments for the site.

General

The front end of our Full Stack React Blog was created using the following technologies/frameworks/libraries:

The backend was created using the following technologies/frameworks/libraries:

Sequelize

Requirements

The Requirements for this exercise were as follows:

Using our API routes on the backend, to create a blogging application that allows users to comment on posts as well as create new articles.

Lessons Learned

REST API basics
Implementation of Sequelize to handle SQL queries
Refamiliarized with CRUD API operations and the respective Sequelize methods to handle those operations in the Database.
How to use the CORS middleware package to enable different cors options.

const cors = require('cors');
app.use(cors({
    origin: 'http://localhost:3001'
}));

How to pass state variables/change functions to child components as props.
- The Comments/setComments are pieces of state

{comments.map(comment => <CommentCard key={comment.id} commentData={comment} comments={comments} setComments={setComments}></CommentCard>)}

Then inside the CommentCard component, the following is used to access these variables/function

const {comments, setComments} = props;

Created an estimated reading time function that is then called for the article details.

//! A function that returns the time it will take for an average person to read the content
//? For non-technical material, the average reading time (in words per minute) is 200 to 250.
const ReadTimeCalculator = (string) => {
    //? first we split the string on spaces, whitespace, periods, and commas
    //? Then we filter out any empty matches
    // * const words = string.split(/[\s.,]/g).filter(Boolean).length;
    // ? Alternatively, returns an array of words from the string
    const words = string.match(/\w+/g).length
    const divideToString = (words/225).toString().split('.');
    const [min, seconds] = [parseInt(divideToString[0], 10), Math.ceil(("0." + divideToString[1]) * 60)];
    
    if (min > 1){
        if (seconds > 1){
            return `${min} minutes and ${seconds} seconds`
        }else {
            return `${min} minutes and ${seconds} second`
        }
    }else{
        if(seconds > 1){
            return `${min} minute and ${seconds} seconds`
        }else {
            return `${min} minute and ${seconds} second`
        }
    }
}

export default ReadTimeCalculator;

Still Todo