Allows student leaders to log in, view, and download school-specific data (sponsorships, tree requests, volunteers).
The webpage following the login page is conditionally rendered based on the flags in the 'scheduler' table in the database for that particular school. This means multiple schools may be in different stages at any given time.
Stage 1:
Stage 2:
Stage 3:
This project is deployed with Heroku at this link.
There are 2 separate repositories: this one and the other on Heroku.
- Follow normal procedure for pushing to Tree-Plenish repo.
- To push to Heroku repo, use
git push heroku master
View documentation on deploying create-react-app to Heroku here.
The Heroku Buildpack for Create React App only works on Heroku-20 stack or earlier.
If the build fails, downgrade to Heroku-20 with this Heroku CLI command: heroku stack:set heroku-20
Heroku Custom Domain Documentation Log in to Google Domains account under tech@tree-plenish.org, click on domain name, then DNS to add CNAME record pointing to Heroku DNS URL.
The frontend is a React app, which makes requests to an API created with Flask located at link.
access-portal-frontend/static.json
- includes API_URL variable which represents the entire URL of access-portal-backend
- when you type
/api, it will act as the entire base URL of access-portal-backend
Inside Heroku environment for access-portal-frontend:
- Settings -> Config Vars -> API_URL
- This will be the full URL of access-portal-backend.
The index.html file in the build folder contains the Google Analytics site tag within the <head></head> tags.
Tracking ID located in index.js.
All located in the src folder.
Do not delete! create-react-app boilerplate code needed for app to function properly.
Displays text announcements (will be the same text for every school that logs in).
Displays total requests received, progress to tree goal, tree requests by species (bar and pie charts).
Inputs: goalPercent, specNames, specValues
Sample call from a different component:
<Chart treeGoalPercent = {goalPercent}, specNames = {speciesNames} specValues = {speciesVals} />
Inside Chart.js, access the prop values with the notation
props.treeGoalPercent
Displays volunteers, tree requests, sponsors (Stage 3 of event process).
Contains functionality for Download as Excel Sheet Button so users can download volunteer information as a .csv file.
Contains functionality for Download as Excel Sheet Button so users can download tree request information as a .csv file.
Defines the app's routes and which React components will be served at the appropriate route. The 'treeplenishportal.com' route, aka '/' directs to the Landing page, while the 'treeplenishportal.com/dashboard' route maps to Skeleton.js to determine which stage a school is in.
Displays Login component upon initial website load.
Displays the top 5 schools with the most tree orders within a 2 week time period as well as the current school's tree orders.
Serves a login page; users must supply correct username (event.id) and password to proceed to next page.
Displays the appropriate stage according to the school's flags in the scheduler table.
Displays sponsors and 2022 impact picture.
Displays tree requests and sponsors.
Displays To-Do List; different bullet points will appear depending on the school's flags in the scheduler table.
Inputs: flags
Sample call from a different component:
<ToDo flags={flagList} />
Inside ToDo.js, access the prop value with the notation:
props.flags
If Download as Excel Sheet Button outputs a .csv file with strange symbols, check logic in ExportDataButton.js for volunteer data issues or ExportTreeRequestsButton.js for tree request data issues. (Most likely an issue with column order).
Nearly all styling is contained inside App.css.
In order to apply styling from App.css, use:
Code inside App.css:
.myCSSClass {
text-align: center;
}
Code inside React component:
<div className = "myCSSClass">
Sample Text
</div>
The site title, which is shown in the browser tab, is located in public/index.html.
The site icon (tree-plenish png image) is located in the public folder.