Meetify Front-end

Current version: 0.2.0
All releases

This repository contains all the code for the front-end application(s) for interacting with the online services of the Meetify project.

(For the back-end code and further details on the Meetify project, see the Meetify repository)

Technical Overview

This is a web application utilizing React at it's core for reactive and streamlined UI & data management. For ease of styling and accordance with Material design principles, this app utilizes the Material UI package.

Meetify is also multi-platform, utilizing the following deployment technologies:

Web: Directly through React
Desktop: Electron
Android/iOS (WIP): React Native

Dev Install

Install NodeJS
Open a terminal in the root project directory.
Run npm install

Dev Usage

Running Dev Environment

# Website:
npm run website:serve

# Electron (Desktop app):
npm run electron:serve

# Android/iOS:
# TBD

Builds

# Website:
npm run website:build # (just outputs HTML; needs to be uploaded to server...)

# Electron (Desktop app):
npm run electron:build

# Android/iOS:
# TBD

Design choices

This section briefly runs through some design choices that were addressed in the creation of this app, as well as their ultimate decision and reasonings.

This is intended to be documented so that, should we need to re-consider a decision, we can refer to this document and quickly see why the decision was originally made. Additionally, this design choice documentation can serve as a brief overview and educational tool for those visiting the project.

Redux (currently used)

Redux is a data manager for react programs, creating a central "state" of data for use across distantly connected UI components.

This can help ensure clean, consistent, and traceable data flow, as well as potentially increased efficiency. Although this does involve increased complexity in the short-term, it allows for our app to grow very large with still-maintainable data.

Many similar implementations of this concept exist, including basic homebrew ones, but Redux was chosen due to widely being the most popular. However, the simplest alternative we could consider would be React's own Context API.

React: Using Hooks Over Classes (currently used)

React hooks are a relatively new feature to React that allow for function components to have all the same features of a class component.

As some basic examples of the visual difference, the React docs show the following two identical visual components:

Function Component:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Class Component:

class Welcome extends React.Component {
  render () {
    return <h1>Hello, {props.name}</h1>;
  }
}

Classes used to have the advantage of an internal state that could be watched, resulting in the view being live updated upon change. However, now that functional components have hooks, they have all the same features as class components. Thus, it comes into question which should be used.

Ultimately, it was decided that hooks (functional components) are better and will be used throughout the program. Simply put, they're simpler, and practically required for Redux (due to common Redux hooks like useSelector and useDispatch). Additionally, they better encourage smaller components, allowing for a more manageable internal architecture.

Further research confirms and better explains these sentiments:

Thus, for consistency, code brevity, and compatibility, hooks / function components should be utilized everywhere in the program.

TypeScript (not used)

TypeScript is a JavaScript extension that allows for further OOP practices and the validation that comes with it.

This was ultimately not used for Meetify. Although the benefits may be useful, it also adds a layer of increased complexity. There are also notes of it resulting in incompatibilities in some cases, potentially resulting in more headache than it's worht. Perhaps most of all, it seemed unnecessary and, per Occam's Razor, was not used in Meetify.

React base documentation

(These are the docs shipped with the original boilerplate implementation, kept here for posterity. They could perhaps be removed in the future.)

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`npm test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

`npm run eject`

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Sources

These wonderful online sources deserve praise for their assistance in kickstarting this project:

Shanika Wickramasinghe's electron-react blog post

mtwn105/Meetify-UI

Meetify Front-end

Technical Overview

Dev Install

Dev Usage

Running Dev Environment

Builds

Design choices

React base documentation

Available Scripts

npm start

npm test

npm run build

npm run eject

Learn More

Code Splitting

Analyzing the Bundle Size

Making a Progressive Web App

Advanced Configuration

Deployment

npm run build fails to minify

Sources

`npm start`

`npm test`

`npm run build`

`npm run eject`

`npm run build` fails to minify