School in the Cloud

You can find the deployed project at School in the Cloud.

Contributors

Abdul Ahmad	Brandon Vilaychith	Josefia Magagnoli	Stephanie Patton	Adam McKenney

Project Overview

Trello Board

Product Canvas

School in the Cloud is a platform that trains senior volunteers to teach students in a group or individual setting. This helps kids in communities with high student to teacher ratios. It also provides retired volunteers a sense of purpose and meaning in their day to day life when they find themselves with more free time. The platform also connects volunteers with the students. The aim is to help close the achievement gap by connecting students with available, qualified volunteer mentors.

Key Features

• Onboarding for two user types: Admin and Volunteer. Each user type will have their own view.
• ADMIN FEATURES
• Ability for an admin to create and edit a training schedule for volunteers to complete. (See the previous labs project training bot. This project can build off training bot. It should create an online view for the volunteer to see each training module and complete it online.)
• Ability to create an account on behalf of a new volunteer, and send an email link to volunteer’s email to complete the sign up.
• Ability to create an account on behalf of a new classroom, and send an email link to volunteer’s email to complete the sign up.
• Admin can visit an approval Page to view volunteers training progress and approve pending volunteer accounts based on completion of training
• Volunteers can log in with a magic link to see their training lists
• Volunteer can view their training they need to complete, can mark training as complete, and completion is reported to the admin.

Tech Stack

• React
• Redux
• Node/Express
• Auth0
• Stripe
• Material-UI

Front end deployed to Netlify

When you do it your way you can go anywhere you choose. Let your heart take you to wherever you want to be. If I paint something, I don't want to have to explain what it is. A tree needs to be your friend if you're going to paint him. That's a son of a gun of a cloud. Even the worst thing we can do here is good.

Licenses

MIT © 2019 School in the Cloud

Installation Instructions

npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.

Contributing

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.

Please note we have a code of conduct. Please follow it in all your interactions with the project.

Issue/Bug Request

If you are having an issue with the existing project code, please submit a bug report under the following guidelines:

• Check first to see if your issue has already been reported.
• Check to see if the issue has recently been fixed by attempting to reproduce the issue using the latest master branch in the repository.
• Create a live example of the problem.
• Submit a detailed bug report including your environment & browser, steps to reproduce the issue, actual and expected outcomes, where you believe the issue is originating from, and any potential solutions you have considered.

Feature Requests

We would love to hear from you about new features which would improve this app and further the aims of our project. Please provide as much detail and information as possible to show us why you think your new feature should be implemented.

Pull Requests

If you have developed a patch, bug fix, or new feature that would improve this app, please submit a pull request. It is best to communicate your ideas with the developers first before investing a great deal of time into a pull request to ensure that it will mesh smoothly with the project.

Remember that this project is licensed under the MIT license, and by submitting a pull request, you agree that your work will be, too.

Pull Request Guidelines

• Ensure any install or build dependencies are removed before the end of the layer when doing a build.
• Update the README.md with details of changes to the interface, including new plist variables, exposed ports, useful file locations and container parameters.
• Ensure that your code conforms to our existing code conventions and test coverage.
• Include the relevant issue number, if applicable.
• You may merge the Pull Request in once you have the sign-off of two other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you.

Attribution

These contribution guidelines have been adapted from this good-Contributing.md-template.

Web Application Organization

Components

note that the structure of this documentation is broken up by folder. Headings will represent top level folders, and blockquotes will represent nested folders

Misc

---

authenticate

Name	Purpose	How To View
authenticate.js	a HOC that checks for authenticated user and routes accordingly	head to "/home" unauthenticated
index.js	import/export authenticate.js for easier loading	n/a
styles.js	styles for authenticate.js	n/a

Callback

Name	Purpose	How To View
Callback.js	--	--
index.js		n/a
styles.js		n/a
SlackCallback.js

Stripe

Name	Purpose	How To View
CheckoutForm.js
StripeCard.js
StripeView.js
UnsubscribeModal.js

Navigation

---

AppBar

Name	Purpose	How To View
AppBar.js	loads the top bar depending on current view	any view loads one of the two variations of the app bar
index.js	loads and exports AppBar.js	n/a
styles.js	styles for AppBar.js	n/a

ReturnToPreviousPage

Name	Purpose	How To View
index.js	loads and exports ReturnToPreviousPage.js	n/a
ReturnToPreviousPage.js	A components loaded on nested routes to return to last page	/home/...

Pages

---

Dashboard

Dashboard

Name	Purpose	How To View
index.js	loads and renders Dashboard.js	n/a
Dashboard.js	Loads the navigation bars and conditional renders tabs depending on what nav link you click	"/home"
styles.js	styles for Dashboard.js	n/a

helpers

Name	Purpose	How To View
TabNavigation.js	Navigation bar visible below the @media breakpoint for desktop view	"/home" under 650px
DesktopNavigation.js	Navigation bar visible above the @media breakpoint for desktop view	"/home" above 650px

Loader

Name	Purpose	How To View
index.js	loads and renders Loader.js	n/a
Loader.js	tells users dashboard how/what to load and when. loads routes, and tells tour to open if a user is logging in for the first time	"/home"
styles.js	styles for Loader.js	n/a

Routes

Name	Purpose	How To View
index.js	loads and renders Routes.js	n/a
Routes.js	includes all routes which require authentication via authenticate.js.	n/a

LandingPage

LandingPage

Name	Purpose	How To View
index.js	load and render landing page	n/a
LandingPage.js	landing page for application	"/"
styles.js	styles for landing page	n/a

Pricing

Name	Purpose	How To View
index.js	loads and renders pricing page	n/a
Pricing.js	Pricing page thats accessible via the landing page	"/pricing"
styles.js	styles for pricing page	n/a

Team

Name	Purpose	How To View
index.js	loads and renders team page	n/a
Team.js	Team page that's accessible via the landing page	"/team"
styles.js	styles for team page	n/a

Notifications

Card

Name	Purpose	How To View
index.js	loads and renders Card.js	n/a
Card.js	Parent "card" container for Notification display	"/home" on overview tab.
styles.js	styles for Card and NotificationsTab	n/a
NotificationsTab.js	Essentially same component as Card.js. separated because we planned on adding functionality to this component	"/home" on notifications tab
filter.js	A function for applying pagination	n/a

Overview

Name	Purpose	How To View
index.js	loads and renders Overview.js	n/a
Overview.js	loads cards inside of pending notifications	"/home"
styles.js	styles for Overview.js	n/a

TeamMember

Name	Purpose	How To View
index.js	loads and renders TeamMember.js	n/a
TeamMember.js	loads cards inside of pending notifications	"/home"
styles.js	styles for TeamMember	n/a

Responses

Name	Purpose	How To View
index.js	loads and renders Responses.js	n/a
Responses.js	this component is the tab used to view responses on the dashboard	"/home" navigate to responses tab
styles.js	styles for Responses.js	n/a

Profile

Name	Purpose	How To View
index.js	loads and renders Profile.js	n/a
Profile.js	component for the profile/settings page	"/home/profile"
styles.js	styles for Profile.js	n/a

TeamMembers

Add

Name	Purpose	How To View
index.js	loads and renders Add.js	n/a
Add.js	This component display conditionally the add/edit team member pages	"/home/create-team-member" or "/home/team-member/:id"
styles.js	styles for Add.js	n/a

helpers

Name	Purpose	How To View
AddButtons.js	Buttons for adding team member. checks if routing and shows animation	add a team member
EditButtons.js	Edit buttons for team members. Add.js renders this or AddButtons.js conditionally dependent on if you're adding or editing	edit a team member
MemberInfoForm.js	Form rendered when adding or editing a team member	add/edit a team member
Relationships.js	Renders "Select" drop downs for mentor/manager assignments when adding/editing a team member	add/edit a team member
SelectSlackID.js	Conditionally renders slack drop down or a prompt to set up your slack.	add/edit a team member
testPhoneNumber.js	a RegEx function which checks to see if the input phone number is actually a phone number.	add/edit a team member
updateNotifications.js	If the user updates a relationship (manager/mentor), this will update their notifications.	add/edit a team member

reducer

Name	Purpose	How To View
index.js	Reducer for the react "useReducer" hook. stores all team member info for filling out form. essentially the "state" of Add.js and its child components	n/a

Assign

Name	Purpose	How To View
Assign.js	Component for the piece of a training series page where you see the list of your currently assigned team members, as well as the button to assign them	"/home/training-series/:id"
index.js	loads and renders Assigns.js	n/a
styles.js	styles for Assign.js	n/a

Edit

Name	Purpose	How To View
Edit.js	Displays the entire edit team members page	/home/team-member/:id"
index.js	loads and renders Edit.js	n/a
styles.js	styles for Edit.js	n/a

List

Assign

Name	Purpose	How To View
Assign.js	Shows list of assigned team members to a training series, as well as their start date	"/home/training-series/29"
index.js	Loads and renders Assign.js	n/a
styles.js	styles for Assign.js	n/a

Overview

Name	Purpose	How To View
Overview.js	List of team members seen on the overview tab	"/home"
index.js	loads and renders Overview.js	n/a
styles.js	styles for Overview.js	n/a

Tab

Name	Purpose	How To View
TeamMembersTab.js	Team members tab wrapper component	"/home" navigate to team member page
index.js	loads and renders TeamMembersTab.js	n/a
styles.js	styles for TeamMembersTab.js	n/a
TeamMembersTabSingle.js	Since member component loaded inside of TeamMembersTab.js	"/home" navigate to team member page

TrainingSeries

Add

Name	Purpose	How To View
AddMemberToTrainingSeries.js	Component for adding a team member to a training series	"/home/assign-members/:id"
CreateMessage.js	Component fro creating a new message for a training series	"/home/create-message"
CreateMessageStyles.js	Styles for CreateMessage.js	n/a
CreateTrainingSeries.js	Component for creating a training series (form where you fill out a title)	"/home/create-training-series"
CreateTrainingSeriesStyles.js	Styles for CreateTrainingSeries	n/a
MessagePage.js	Component for Editing a message in a training series	"/home/message/:id"
MessagePageStyles.js	Styles for MessagePage.js	n/a
singleMemberCheck.js	Component for each team member when assigning members to a series	"/home/assign-members/:id"
styles.js	styles for singleMemberCheck.js	n/a

Edit

Name	Purpose	How To View
Edit.js	Wrapper component for a training series page	"/home/training-series/:id"
index.js	loads and renders Edit.js	n/a
styles.js	styles for Edit.js	n/a

helpers

Name	Purpose	How To View
Title.js	Title component for a training series. allows editing of title of training series	"/home/training-series/:id"

List

Messages

Name	Purpose	How To View
index.js	loads and renders Messages.js	n/a
Messages.js	list of messages on a training series page	"/home/training-series/:id"
styles.js	styles for Messages.js	n/a

Overview

Name	Purpose	How To View
index.js	loads and renders Overview.js	n/a
Overview.js	List of training series on overview tab of dashboard	"/home"
styles.js	styles for Overview.js	n/a

Tab

Name	Purpose	How To View
index.js	loads and renders Tab.js	n/a
TrainingSeriesTab.js	Training series wrapper component for tab on dashboard	"/home" navigate to training series tab
styles.js	styles for Tab.js	n/a

Messages

Name	Purpose	How To View
index.js	loads and renders Messages.js	n/a
filter.js	a function for filtering search results	n/a
styles.js	styles for Messages.js	n/a
Messages.js	inner component starting with "Messages" on a training series page	"/home/training-series/:id"

### UI

---

ContactModal

Name	Purpose	How To View
ContactModal.js	Component for contact form	Go through tour and click "contact us"

HelpModal

Name	Purpose	How To View
HelpModal.js	Component for help panel	Click help icon at top left of page

InfoPopup

Name	Purpose	How To View
InfoPopup.js	Reusable component for creating help popups in app	for instance, click on a training series and hover over "i" icon

Modals

Name	Purpose	How To View
deleteModal.js	reusable delete modal	click trash icon on overview team members

Progress

Name	Purpose	How To View
loading.css	styles for progress circle animation	n/a
ProgressCircle.js	a loading progress circle	on login

SearchCard

Name	Purpose	How To View
filter.js	filter function for searching	n/a
index.js	loads and renders SearchCard.js	n/a
SearchCard.js	Parent "card" container for any TeamMembers displays	"/home" team members on overview tab
styles.js	styles for SearchCard	n/a

CardHeader

Name	Purpose	How To View
CardHeader.js	Header for Team Members search card on overview	"/home" Team Members on overview
index.js	loads and renders CardHeader.js	n/a
styles.js	styles for CardHeader.js	n/a

Snackbar

Name	Purpose	How To View
Snackbar.js	renders snackbar popups throughout app
index.js	import and render Snackbar.js	n/a
SnackBarTeamMember.js	small popup modal for successfully creating a Team Member	add a team member

---

---

---