Home

Documentation

This page gives more detailed documentation on react components and routes (pages).

Route (.js)	Related Pages	Details
`Dashboard`	`CommunityBoard`, `Challenges`, `Achievement`, `SavedResources`	The first page user sees after login in.
`CommunityBoard`	`Cards`, `VideoDisplay`	A larger space for displaying all cards and videos. Note: is also being used as a component by on the `Dashboard` route.
`Login`		Implemented Firebase Authentication for logging in with a Google account and FirebaseUI for the pre-built log in button. Users are redirected to dashboard on successful login.
`Resources`		Resource articles are displayed from database.

Component (.js)	Related Components	Details
`Achievement`	`Dashboard`, `Badge`	Displays the badges users achieved by completing challenged
`SavedResources`	`Dashboard`, `ResourceEntryCard`	Displays the resources that users saved in the Resources route
`CommunityBoard`	`Dashboard`, `Cards`, `VideoDisplay`	Displays the cards and videos from all users, sorting cards by time and tags
`ChallengeEntry`	`Dashboard`	Displays the completed challenge information
`ChallengeGameModal`	`Dashboard`, `ChallengeModalStep1`, `ChallengeModalStep2`	The modal that appears when clicking “Start Challenge button”. The user must select a tag and can either skip or accept the randomly generated challenge.
`ChallengeCurrent`	`Dashboard`	Displays the active challenge information.
`ChallengeModalStep1`	`ChallengeModal`	Displays three category buttons where if user presses will callback selectCategoryButton passed as prop from ChallengeModal.
`ChallengeModalStep2`	`ChallengeModal`, `ChallengeActive`	getRandomChallenge() grabs a random challenge based on the category selected that has been completed and currently active.
`ChallengeActive`	`ChallengeStep2`	Challenge entry that appears in the ChallengeModal where the user can skip the challenge and a new one will be grabbed or can be accepted where it will appear on the dashboard.
`ChallengeNoEntry`	`Dashboard`	This appears only when there are no active challenges in the Dashboard.

Component (.js)	Related Components	Details
`MyCard`	`CardModal`, `Cards`, `AddComment`, `Profile`,	This component is responsible for the visual representation of a card. Each card has a background image and text users selected and the number of comments
`Cards`	`CommunityBoard`, `MyCard`	A layout that displays cards from all users. The sorting functionality takes place in this component.
`AddComment`	`Cards`, `Comment`, `ReportModal`, `TextLengthModal`, `EmptyTextModal`, `LoginModal`	A modal that appears when a user clicks on a card. Handles the comment and report feature.
`VideoDisplay`	`CommunityBoard`	All videos are hosted on Cloudinary. This is a display container for Cloudinary Video components. Currently, the VideoDisplay component performs a GET request to Cloudinary for videos with the ‘project’ tag, and uses the ‘public_id’ attribute it receives to map onto Video components. This list is dynamic, and videos deleted on Cloudinary will be automatically removed from VideoDisplay.
`VideoBadgeModal`	`CommunityBoard`	A modal that shows when a user with a ‘basic’ badge attempts to upload a video.
`LoginModal`	`CommunityBoard`	A modal that shows when a logged out user attempts to post a video.

Component (.js)	Related Components	Details
`ResourceEntryCard`	`Resources`, `Dashboard`	Displays each resource information. If called by dashboard, need to send in a prop, ‘from=”dashboard”’ which removes the save button
`AdminUploadResource`	(🔑 Admin)	A GUI to upload a resource within the app. The following resource information is needed: title, link, image url, category. This component can be used for the admin panel in the future.

Component (.js)	Related Components	Details
`CreateCardModal`	`FloatingButton`, `TextLengthModal`	A modal where users can create a card. To create a card, users can select an image, enter a text, and select a tag. The text has to be less than 75 characters for design purposes. When a user creates a card, the modal will close.
`TextLengthModal`	`CreateCardModal`	This modal is displayed when the text is longer than 75 characters.
`Comment`	`AddComment`	The visual representation of a comment box in AddComment.js that displays the name of the commenter and the text.
`ReportModal`	`AddComment`	This modal shows up when the report button in AddComment.js is clicked. Prompts users if they want to report this card. If yes, the card owner information, card ID, and the time reported are saved in Firebase.
`EmptyTextModal`	`AddComment`	This modal is triggered when a comment is empty.

Dashboard: there is a small lag between the landing page and dashboard when logging in, and any time user lands on dashboard while contents are loading.
please check here for more bugs/areas for improvements that were found during some testing

Some things we wanted to do, but didn't have time for in this project:

Dashboard: user can delete a resource from their saved resources tab
CommunityBoard: display videos and cards on in one page instead of splitting into two
Resources: be able to sort resources by category (similar to sorting cards)
Resources: implement some way to have user know which resources they already saved (e.g. change + button, permanently hide the + button)
make a GUI Admin-panel so non-technical users can upload resources, delete flagged posts/videos without having to touch the database
refactor the current various modal components for comment and login/warnings to use one, but with different text (e.g. TextLengthModal, VideoBadgeModal, LoginModal) -- probably makes styling easier as well
improve general UI so it looks more like Michael's Figma (esp. comment modal, button states)