Jumble 🔹 🔸

Description of Site

"Jumble" is a coupled full stack SERN (Sequelize, Express, React, Node) application to help project managers and/or business owners stay on track.

The motivation came from developing an app that would have a large user-base; regardless of what industry, project management is an integral part of helping businesses achieve their goals.

Summary of Technologies Used
Passport was used for user authentication and ReactJS for reusable components as well as fast rendering on the DOM.

Here we call on the checkAuth function to see if the user is logged in or not and to save this status as a state.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      isLoggedIn: false
    }
  }
  
  componentWillMount(){
    this.checkAuth();
  }

We then call to different routings based on the user's 'isLoggedIn' state.

render() {
    switch(this.state.isLoggedIn){
      case false:
        return this.guestRouting()
      case true:
        return this.userRouting()
      default:
        return this.guestRouting()
    }
}

The data used on this site is gathered from user input (ex: project budgets and tasks). The data is managed by MySQL and is brought to life by using Chart.js and visualizing the user input in a useful format.

Below is an example of how we pass in budget information using props to populate a doughnut chart.

componentDidMount() {
    this.chart1 = new Chart(this.chart1Ref.current, {
      type: 'doughnut',
      data: {
        labels: this.props.depts,
        datasets: [{
          data: [this.props.marketing, this.props.hr, this.props.design, this.props.engineering, this.props.sales, this.props.finance, this.props.security],
          backgroundColor: ['#e47676', '#ffb01d', '#b0fff4', '#6ec56e', '#9e9e9e', '#47b4b4', '#ffff89']
        }]
      }
    });
  }

Pictures of Site

Click here to visit site

Initial Login Page:
The initial login page goes to a menu page if the user is sucessfully authenticated.

Budget Chart:
The dashboard represents user data from the project that the user selected on the menu page. The switch button allows for a different representation of the budget data.

Task Chart:

Task Issue Chart:
This chart displays issues that may occur for specific tasks. The user can view/ create/ close issues.

New Project:

Improvements for the Future

Some improvements that I would like to make to this application provided more time:

1. Mobile responsiveness
2. Drag and drop functionality for dashboard components to enable users to personalize and organize his or her dashboard based on priority
3. Add components to handle project deadlines

Getting Started

These instructions will help get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Jumble is a coupled app where the client (React) and server run concurrently.

What you will need to install before running this application:

1. NODE
2. NPM

Install server dependencies:

# open a new shell and navigate to server directory
$ npm i
# this will install all the dependencies for the server portion of this application
# make sure dependencies for the client are installed as well before running the application

Install client dependencies:

# open a new shell and navigate to the client directory
$ npm i
# this will install all the dependencies for the react portion of this application
# once the dependencies are installed 
# npm start

If running locally, Sequelize does not create the initial database. Please run the lines of code below into MySQL Workbench before running the application:

DROP database if EXISTS database_name
CREATE database_name
USE database_name

Built with:

1. HTML
2. CSS3
3. Javascript
4. jQuery
5. MySQL Workbench
6. Node*

*Node Packages Used

1. Express
2. Cheerio
3. Axios
4. Path
5. Sequelize
6. MySQL2
7. Passport
8. Express-session
9. Passport-local
10. Bcrypt

Author(s):

1. Adam Lehrer
2. Jake Dudum
3. Minori Hashimoto
4. Darryl Tolentino