This is the part of ReLearn that handles all frontend parts! It uses React as it's main technology and is a web application.
The following pages are incoporated inside the frontend:
- - [Landing Page]
- - [Login]
- - [Account Settings]
- - [Tutor Matching]
Team BLNZ (creators of the ReLearn) were motivated to create a solution to the tutoring crisis we are currently undergoing. The tutoring crisis I described is that there is a plethora of tutors and more than enough students to match, but finding a compatible tutor-student match is hard. Students might end up getting overwhelmed and not getting the help they need for their education.
The parts of the page is broken in to parts: Has a folder for implementation (index.js, styles.scss coupling)
Uses SASS for styling
Uses HOC props to change the state of the application (logged in e.g.)
A funtional component is used and hooks used for any state
New pages/pop-ups that displays forms: Follows a semantic style and similar pattern to all forms
Focuses on using flexboxes to organize content
Has smooth css for transitions and user feedback
Uses forms to do symatic handling of input-response
Built with
- - [React] - Is the framework of this repo
- - [SASS] - Used for its nesting and better look
- - [React-Notification-Component] - Used for interactive notifications, improving user experience
- - [EsLint] - Used for linting the JSX and making development easier, this is not required!
This repository is made using create-react-app in node packaging manager, the source file with the connecting html file is not included in this repository. You can use the default one incorporated in CRA.
Use CRA (create-react-app) to build the node_modules. Then install this repo (as the root directory, so the src and public folder have the same parent as node_modules).
Add each dependance (see Frameworks)
Commands:
git clone https://github.com/Knighthacks-2020-Team-BLNZ/FrontEnd.git
npm create-react-app modules
# Transfer node_modules from 'modules' to 'Resume'
# cd to 'Resume'
# Download dependancies
npm i --save sass
npm i --save react-notifications-component
npm i --save eslint
# I broke down the dependancies but here is one command to install all
npm i --save sass react-notifications-component eslint