Skip to content

Web App for virtual mentors (mostly in US) to support rural schools in Africa

License

Notifications You must be signed in to change notification settings

BloomTech-Labs/future-hope-fe

Repository files navigation

Future-Hope-Client

Ready For Stakeholder Branch

Table of Contents

Project Overview

There are not enough qualified teachers in Ghana for the number of students that need to be taught. On the flip side, retired persons in North America report reduced quality of life because fo the feeling of a 'lack of purpose' after retirement.

To combat these problems, we are teaming up with a stakeholder to develop web and iOS applications that connect teachers and students in Ghana with retired persons in North America. We hope to build applications that will enhance teacher education that is almost unavailable locally throug joint planning between teachers and North American virtual mentors.

We'll be using in-app video conferencing and messaging apps to facilitate communication between retirees and teachers in Ghana. In order to facilitate these communications, we will design an on-boarding process that allows registered (and approved) users to schedule meetings with one another.

Install

1.  Fork the repository
2.  CD into the Future-Hope-Client directory
3.  *Yarn* to install dependencies
4.  *Yarn start* to fire up the app on your local server

Deploy

Deployed on Netlify.

Staging server
QA server
Production server

Components

The structure of this documentation is broken up by folder.

Starting with the src root folder, the flow will be as follows:
> src
> components
> component folder
> component sub-folder
> component.js files

FAQ folder


Name Purpose How To View
FAQ.js onboarding process & general FAQ head to '/faq'

Messaging folder


Name Purpose How To View
conversation.js Displays Messages between Users head to '/messaging'
Message.js Message Component for each message inside conversation head to '/messaging'
Messaging.js Primary component housing Instant Messaging head to '/messaging'
Messaging.scss Styling for messaging head to '/messaging'
SearchUsersModal.js Modal to Search for users when clicking Start a Conversation head to '/messaging'

auth folder


Name Purpose How To View
Login.js Login Form head to '/login'
Login.scss Styling for Login head to '/login'
SignUp.js Signup Form head to '/signup'
SignUp.scss Styling for Signup head to '/signup'
autoCompleteFields.js Not in Use yet head to '/signup'

calendar folder


Name Purpose How To View
Calendar.js Interactive Calendar for scheduling meetings "/dashboard"
MeetingModal.js Modal dialog showing details or new/existing meeting "/dashboard"
flatpickr.css Styling for Calendar "/dashboard"
flatpickr.min.css Styling for Calendar "/dashboard"
main.scss Styling for Calendar "/dashboard"

dashboard folder


dashboard/admin-dashboard subfolder

Name Purpose How To View
MentorTable.js Component for displaying Mentors Awaiting Admin Approval "/user-approval"
TeacherTable.js Component for displaying Mentors Awaiting Admin Approval "/user-approval"
UserApproval.js Parent component rendering MentorTable and TeacherTable "/user-approval"

root directory of components/dashboard subfolder

Name Purpose How To View
Dashboard.js Dashboard Component "/dashboard"
Dashboard.css Dashboard Styling "/dashboard"
ApprovedMentorList.js Table displaying approved Mentors "/approved-mentors"
ApprovedTeacherList.js Table displaying approved Teachers "/approved-teachers"

footer folder


Name Purpose How To View
Footer.js global footer with links "/"
styles.js styling for global footer n/a

landingpage folder


landingpage/assets subfolder

Name Purpose How To View
Ghana_school.jpg photo used in the landing page "/"
bg4.jpg photo used in the landing page "/"
chalkboard-teacher-solid.svg photo used in the landing page "/"
img-holder.png photo used in the landing page "/"

landingpage/components subfolder

Name Purpose How To View
BenefitSection.js placeholder photos "/"
CTASection.js placeholder photos "/"
FeatureSection.js placeholders "/"
LandingFooter.js placeholder photos "/"
LandingHero.js placeholder photos "/"
LandingImpact.js placeholders "/"
LandingMission.js placeholder photos "/"
Parallax.js placeholders "/"

landingpage/mui subfolder

Name Purpose How To View
Button.js placeholder photos "/"
Typography.js placeholder photos "/"
theme.js Parent component rendering MentorTable and TeacherTable "/"

root directory of components/landingpage folder

Name Purpose How To View
LandingPage.js marketing splash "/"
styles.js placeholder n/a
styles.scss placeholder n/a

mentors folder


Name Purpose How To View
MentorList.js Public display of the list of approved mentors. Available via link from the homepage "/mentors"
MentorPublicPage.js Component used to display MentorList.js "/mentors"
mentors.css styling for mentors public page n/a

navbar folder


Name Purpose How To View
Navbar.js Primary Component Rendering Top Navbar "/"
NavbarLinks.js Used to conditionally display links on the right side of Navbar "/"
NavbarUser.js Component showing Avatar post-login with clickable drop-down menu "/"
SignedInNavBar.js !Deprecated n/a
navConfig.js Configuration for Navbar functionality ex. color transition on landing page "/"
navbarStyle.js Navbar Styling "/"

shared folder


shared/components sub-folder

shared/components/Sidebar sub-folder

Name Purpose How To View
SideBar.js Side Navigation loaded post-login "/dashboard"
SideBar.scss Sidebar Styling "/dashboard"
listItems.js Links rendered inside SideBar "/dashboard"

shared/components/Card sub-folder

Name Purpose How To View
Card.js marketing splash "/"
CardBody.scss placeholder n/a
CardFooter.js placeholder n/a
CardHeader.js placeholder n/a

root directory of shared/components subfolder

Name Purpose How To View
Button.js marketing splash "/"
CustomInput.scss placeholder n/a
GridContainer.js placeholder n/a
GridItem.js placeholder n/a
InfoArea.js placeholder n/a
SearchResults.js placeholder n/a

shared/styles subfolder

Name Purpose How To View
buttonStyle.js marketing splash "/"
cardBodyStyle.js placeholder n/a
cardFooterStyle.js marketing splash "/"
cardHeaderStyle.js placeholder n/a
cardStyle.js marketing splash "/"
customInputStyle.js placeholder n/a
imagesStyles.js marketing splash "/"
infoStyle.js placeholder n/a
sharedStyle.js marketing splash "/"
tolltipsStyle.js placeholder n/a

views folder


Name Purpose How To View
AwaitingApproval.js informs user his/her application has been accepted and is awaiting approval after sign-up, "/appplicationstatus"
EditProfileView.js Update User Profile "/update_profile"
NewUserProfile.js User profile page "/view-profile" or "/profile/:uid"
Profile.scss placeholder n/a
ProfileView.js placeholder n/a
UploadPhoto.js placeholder n/a
ViewUserProfile.js !old user profile page n/a
views.css placeholder n/a

Root Directory of Components folder


Name Purpose How To View
Analytics.js implement Google Analytics to guage in-app usage n/a

Auth

Used OAuth with google firebase.

Store

Used react/redux.  Actions are split up into separate files, as are reducers.  Reducers are combined into a common rootreducer.

Usage

1.  JavaScript.  Used promises/callbacks and ES6 syntax.
2.  React.  Used functional & class components.  Used React Hooks.
3.  Redux.  Used redux for state management.

API

Firebase Authentication

Authentication for users was accomplished by using the built-in auth feature in firebase
A simple login function that includes firebase.auth().signInWithEmailAndPassword(email, password);
And a simple logout function that includes firebase.auth().signOut();
There are no endpoints to point to but a list of functions as this is a noSQL database

Documentation - https://firebase.google.com/docs

Full Calendar

Meeting availability and scheduling was accomplished by using Full Calendar.
After login, a user is directed to his/her dashboard.  There, on the left-hand side, the user
has a sidebar menu with a few routing links. To the right of the sidebar, the user's calendar
is displayed.  The user can filter by month, week, day.  The user can set up a meeting by clicking
on a date, which brings up a meeting modal.  The user can then search for another user, select the
user, and select a date/time to schedule a meeting.  The meeting will autopopulate on the calendar
of all participants selected.

Documentation - https://fullcalendar.io/docs

Firebase Cloud Messaging

In-app messaging was accomplished by using Firebase Messaging.  Using the Firestore database, real-time
messaging was implemented.  Once logged in, a user can navigate to the messaging feature from his/her
dashboard.  The user can search for other users, select a user, and start to message with that user.
Responses are real-time.  All messaging activity is stored in the Firestore database.

Documentation - https://firebase.google.com/docs/cloud-messaging

Maintainers

Alexis Panyathong Emma Zarate Diana Grams Chris Bonifacio Cesar Aponte Karen Li

Contributing

PRs accepted

License

MIT © Richard McRichface

About

Web App for virtual mentors (mostly in US) to support rural schools in Africa

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published