/labseu1-db-FE

Frontend application for Discussion Board application

Primary LanguageJavaScript

Discussion Board Pinely Build Status

Welcome to our Discussion Board.

If you want to see our trello board and tickets that we made click here and if you want to see our Technical Documents, User Stories and Key Features click here.

Click here to visit the app, or click on the image below to view our video demo and tutorial:

Main Course App

Team

Elisa Martin Ivana Huckova Novian Pun Samar Vir Sean Attewell Thorben Bender
Github Github Github Github Github Github
LinkedIn LinkedIn LinkedIn LinkedIn Seans Future LinkedIn

Table of Contents

Scripts

Running

npm run start: Runs only the front-end client.

npm run test: Will run the tests for front-end

npm run build: Will create a build file for front-end

Environment Variables

URL: The url of the hosted website

Tech-Stack

Back-End Dependencies (Production)

Send Grid

Used for user confirmation Emails (Required by employer). | View Dependency

Firebase Admin

Firebase provides the tools and infrastructure you need to develop your app, grow your user base, and earn money. The Firebase Admin Node.js SDK enables access to Firebase services from privileged environments (such as servers or cloud) in Node.js. | View Dependency

Firebase Functions

Runs Code in response of Http Request or firebase Features | View Dependency

Cors

Used to configure API security. This was used to allow for secure communication between the front-end and back-end servers. | View Dependency

ExpressJS

A prebuilt NodeJS framework that makes creating server side applications simple, fast, and flexible. NodeJS is powered by Google's V8 Engine which means it's powerful and can handle a large number of requests without lapsing in dependability. Also, this means that this is a highly scalable choice when you consider the Event Loop which manages all asynchronous operations allowing the program to continue to run as expected without stops. | View Dependency

Stripe

A powerful, simple, and seamless payment commerce solution | View Dependency

Back-End Dependencies (Development)

Eslint

Eslint is the dominant linting tool for NodeJS and it makes it possible to establish a clear coding convention for a team or project, as well as aiding in catching various bugs such as variables improperly scoped. | View Dependency

Firebase-Functions-Test

The firebase-functions-test is unit testing library for Cloud Functions for Firebase. It is a companion to firebase-functions. View Dependency

Front-End Dependencies (Production)

React

React is the current industry standard that offers a lot of out of the box benefits. It is fast, efficient, and scalable. Due to the large community, finding solutions to potential problems and reference material is much easier, even for a potential dev without a lot of experience who would like to contribute to Main Course. | View Dependency

Redux

A state management tool making it possible to store the entire state of the application in a single store. This means a unidirectional data flow, and as the application scales we have predictable state updates which subsequently make things easier to test and introduce new features. Redux also has solid documentation and an active community, meaning that as new devs become introduced to the project it's likely that any problems they face would have already been encountered by someone else, thus making solutions easy to find. | View Dependency

Firebase

The full Firebase JavaScript client includes support for Firebase Authentication, the Firebase Realtime Database, Firebase Storage, and Firebase Cloud Messaging. Including code via the above snippets will pull in all of these features. View Dependency

Draft-JS

Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model. | View Dependency

dotenv

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology. | View Dependency

React-giphy-component

A simple gif picker component for React using GIPHY API | View Dependency

React-Redux-Firebase

Redux bindings for Firebase. Includes Higher Order Component (HOC) for use with React. | View Dependency

React-Stripe-Elements

This library is a thin React wrapper around Stripe.js and Stripe Elements. It allows you to add Elements to any React app, and manages the state and lifecycle of Elements for you. | View Dependency

Redux-Firestore

Redux bindings for Firestore. Provides low-level API used in other libraries such as react-redux-firebase | View Dependency

Semantic-Ui

Let's you use prebuild and styled components for your website. | View Dependency

Styled Components

Has a thriving community and offers the ability to directly style multiple components within a file. The syntax used is familiar to JavaScript and improves code cleanliness and makes it easy to get up and going for those without a lot of css experience. Styled components are also very efficient, improving load time for users. | View Dependency

Connected React Router

Allows for the ability to synchronize state with redux store through uni-directional data flow, time traveling, and dispatching of history methods. This makes for an incredibly useful tool when dealing with various stages of state and subsequent routing for a seamless and intuitive UI. | View Dependency

Front-End Dependencies (Development)

Eslint

See Above Explanation

Eslint-Config-Prettier

Turns off all rules that are unnecessary or might conflict with Prettier. This lets you use you favorite shareable config without letting its stylistic choices get in the way when using Prettier. View Dependency

React-Testing-Library

Lets you render and test your react-components. | View Dependency

API Documentation

Third-Party APIs

Send Grid 1

Used for user confirmation Emails | View API

React-Redux-Firebase 1

Used to store data and authenticate User | View API

Firebase Functions 1

Used an event listener which will run code when a new org is created | View API

Stripe 1

A powerful, simple, and seamless payment commerce solution | View API

Front End Routes

Org Routes

Add new Org

set organisations/{orgId}

{
	arrayOfAdminsEmails:  [
		'email@email.com'
	],
	arrayOfAdminsIds: [
		'adminId'
	],
	arrayOfUsersEmails: [
		'email@email.com', 'user@user.com'
	],
	arrayOfUsersIds: [
		'adminId', 'userId'
	],
	createdByUserId: 'adminId',
	isPremium: false (boolean),
	orgName: orgName
}

arrayOfAdminsEmails: will get set automatic arrayOfAdminsIds: will get set automatic arrayOfAdminsEmails: not required / contains adminsEmails arrayOfAdminsIds: not required / contains adminsIds createdByUserId: will get set automatic isPremium: will get set to false at the beginning, orgName: is required

Invite People to Org

update organisations/{orgId}

userEmails = [userEmail]

userEmail: is required

Delete Org

delete organisations/{orgId}

only orgId required

Branch Route

Add new Branch

set branches/{branchId}

{
  arrayOfUserIdsInSpace: ['userId', 'userId'],
  orgId: orgId
  spaceCreatedByUserId: userId
  spaceName: 'Product'
}

arrayOfUserIdsInSpace: creator will get set automatic, not required orgId: will get set automatic spaceCreatedByUserId: will get set automatic spaceName: is required

Invite People to Branch

update branches/{branchId}

userEmail = email@email.com

userEmail is required

Kick People from Branch

delete branches/{branchId}

userEmail = email@email.com
userId = userId

ùserEmail: is required userId: is required

Delete Branch

delete branches/{branchId}

only the branch id is required

Tweak Routes

Add new Tweak

set tweaks/{tweakId}

{
  arrayOfUserIdsWhoFollowUp: [userId],
  isFollowUp: false (boolean),
  lastCommentCreatedAt: timestamp,
  orgId: orgId,
  spaceId: spaceId,
  threadCreatedAt: timestamp,
  threadCreatedByUserId: userId,
  threadCreatedByUserName: userName,
  threadName: threadName,
  threadTopic: threadTopic
}

arrayOfUserIdsWhoFollowUp: is not required isFollowUp: false by default (boolean) lastCommentCreatedAt: will get set automatic spaceId: created automatic threadCreatedAt: timestamp threadCreatedByUserId: will get set automatic threadCreatedByUserName: will get set automatic threadName: is required threadTopic: is not required whenUserHasSeen: is not required

Delete Tweak

delete tweaks/{tweakId}

only the tweakId is required

Comment Routes

Add new Comment

set comments/{commentId}

{
  arrayOfUserIdsWhoLiked: [userId, userId],
  commentBody: 'Hello guys',
  commentCreatedAt: timestamp,
  commentCreatedByUserId: userId,
  commentCreatedByUserName: userName,
  commentUpdatedAt: timestamp,
  isCommentDecided: false (boolean),
  isCommentUpdated: false (boolean),
  orgId: orgId,
  threadId: threadId,
  threadName: threadName
}

àrrayOfUserIdsWhoLiked: is not required commentBody: is required commentCreatedAt: will get set automatic commentCreatedByUserId: will get set automatic commentCreatedByUserName: will get set automatic commentUpdatedAt: will get set automatic ìsCommentDecided: will get set automatic isCommentUpdated: will get set automatic òrgId: will get set automatic threadId: will get set automatic threadName: will get set automatic

Edit Comment

update comments/{commentId}

{
  commentBody: newComment,
  commentUpdatedAt: timestamp,
  commentUpdated: true (boolean)
}

commentBody: is required isCommentUpdatedAt: will get set automatic isCommentUpdated: will get set automatic

Like Comment

update comments/{commentId}

only userId is required

Mark Comment as Decision

updated comments/{commentId}

will set isCommentDecided to true

Delete Comment

delete comments/{commentId}

only commentId is required

User Route

Create a User

set users/{userId}

{
  arrayOfOrgsIds: [orgId, orgId],
  arrayOfOrgsNames: [orgName, orgName],
  arrayOfSpaceIds: [spaceId, spaceId],
  arrayOfSpaceNames: [spaceName, spaceName],
  fullName: fullName,
  profileUrl: url,
  userEmail: userEmail
}

arrayOfOrgsIds: is not required arrayOfOrgsNames: is not required arrayOfSpaceIds: is not required arrayOfSpaceNames: is not required fullName: is required profileUrl: will get set automatic userEmail: is required

Delete Space or Org from User

delete users/{userId}

Only the space or org id is required

Update User

update users/{userId}

only userName is required