PatrickVuscan/LBC-Frontend

The frontend of a mobile React Native application, primarily aimed towards delivering a social media experience similar to that of twitter/Facebook, as well as delivering Sanity Studio CMS content.

Welcome to the Lady Ballers Camp Frontend Repository 👋

This is a React Native mobile app for Lady Ballers Camp (https://ladyballerscamp.org/).

Git Commit Standards

Our git commits obey these coding standards: Documentation on Git Commit Standards

Viewing our Deployed React Native App

Since LBC is a non-profit, we are currently in the middle of registering LBC as a non-profit to take advantage of non-profit AWS deployment pricing. As such, there is currently no URL to our deployed React Native app for Deliverable 2. The LBC app may not be ready to deploy until about a month after the Fall 2020 semester ends, due to the lengthy non-profit AWS non-profit approval process.

Install

Make sure you have all of the right development dependencies.

npm install

Run tests

To run jest with the --coverage flag, enter:

npm test

All tests should pass.

Description

• Toyo Ajibolade founded the charity LBC in 2012 as a way to give back to the BIPOC (Black, Indigenous, and People of Color) female community after her family experienced financial hardships during her time playing competitive basketball in her youth.
• She found that sports involvement begins declining at age 7 for young girls due to poor self-esteem and social pressures, lack of support, or finanical hardship (from either their families or underfunded female sports programs), and that 13-year-old girls drop out of sports at twice the rate of 13-year-old boys (https://torontofoundation.ca/in-conversation-with-toyo-ajibolade/).

• Although LBC started out as a basketball camp for BIPOC girls ages 6 - 16, LBC expanded to include other activities that promote physical, emotional, mental health, and educational development to all members regardless of their socioeconomic status (https://supportblackcharities.org/lady-ballers-camp/). In effect, LBC aims to break the barriers surrounding sports involvement by providing BIPOC girls ages 6 - 16 free, equitable access to its programs.
• LBC wishes to provide its members a brave space where they can make friends, keep fit, learn valuable soft skills (e.g. leadership, teamwork, grit, compassion), and have fun (https://ladyballerscamp.org/ and https://supportblackcharities.org/lady-ballers-camp/), empowering girls to feel safe, strong, independent, and healthy.
• Our LBC app attempts to complement LBC's website (https://ladyballerscamp.org/) and arm vulnerable, low-income, BIPOC (Black, Indigenous, and People of Color) youth ages 6 - 16 with resources related to improving their mental health, as well as reporting and preventing violence and assault (whether it's an emergency or not).

Key Features

• Users can create accounts and log in (but cannot yet reset their password).
• Users can read posts written by all LBC users, including ones they wrote.
• Users can create posts for the timeline with a title under their username or as an anonymous user.
• Users can delete their own posts.
• Users can comment on all posts, including ones they wrote.
• Users can view a preview of a list of articles related to social justice, and then opt to read the full article.
• Users can report hate crimes that occur at work, school, in private, or in public to authorities with the given contact info (e.g. URLs, email addresses, and phone numbers), access mental health resources, read empowerment articles, and stories from other LBC users.

Instructions

• If you have an existing account, you can simply log in by entering your credentials and then tapping the Log In button. Once you've logged in, you are taken to the Timeline page.

For the purposes of deliverable 2, the credentials are:

• Username: user
• Password: user

In deliverable 2, there is no option to create a new account or reset your password.

• You can view timeline posts in the Timeline page, with the most recent post displayed first. In order to create a new post click the New Post button on the top right of the screen.

From there, you can add a title and content and click the Post button to post. If you want to remain anonymous, you can click the Anonymous button on the bottom left of the screen before you post.

• In order to comment on posts, you can click on the comment icon on the bottom left of each post to add a new comment. On the Write a New Post! page, you can leave a comment with the text box and then click the Add Comment button to post a comment.

• In order to view articles, you can click on the Article button on the bottom navigator. Initially, you'll see a list of article cards, but you can view the full article by clicking on the View the Full Article button.

• In order to view resources, you can click on the Resources button on the bottom navigator. On this page, you can view the contact info of various local officials.

If we have time in Deliverable 3 or 4, we will add buttons in the Resources page that let you select which resource you want to access -- mental health resource, ability to report emergencies and non-emergencies, whether they occur at school, work, in public, or in private.

Development requirements

Frontend

1. See Install section at the top.
2. Enter npm run start into your terminal to run the app locally.
3. See Run tests section at the top.

Backend

1. Navigate to the target directory.
2. Enter git clone https://github.com/csc301-fall-2020/team-project-13-lady-ballers-camp-backend.git into your terminal.
3. Follow the instructions written in setup.md.

Deployment and Github Workflow

Frontend and Backend Common Workflow

• Each teammate works on their assigned feature(s) on their own branch(es), named after the feature we are working on. Although we try our best to work on different files to eliminate merge conflicts, sometimes it's possible that two or more teammates may end up making conflicting changes to the same file. Regardless, working on separate branches helps mitigate merge conflicts and isolate errors and warnings on their current branch from the master branch.
• When a major feature was done, we would first merge master into their branch to ensure our work was up to date with master and address any conflicts that appear via pair programming. Next, we'd submit a pull request to merge all changes on our current branch to master. Another teammate would review this code for style, syntax, or other errors and then approve the changes before finally allowing us to merge to master.

Frontend-Specific Workflow

• Naming Convetion: camelCase (React Native/Javascript)
• We're using ESLint that checks for common linting errors. However, we don't have any branch checks or any CI set up for deliverable 2, since it doesn't make much sense to write tests for UI components; component design is subject to change.
• The pull request process is the same as in the Frontend and Backend Common Workflow section.
• We do not have a deployment process yet.
• We plan on using AWS to deploy our app, and we plan on setting up auto-deployment to trigger upon pushing to master.
• For now, we're using jest to house a set of simple unittests until we can either add more jest tests or replace the jest testing framework with better ones (e.g. selenimum for integration testing, cypress for end-to-end testing).

Backend-Specific Workflow

• Naming Convention: snake_case (Python)
• We have a pre-commit hook that checks for linting errors in the files we commit, so that we are consistent in our code writing style.
• The pull request process is the same as in the Frontend and Backend Common Workflow section, except there is a branch rule that states that at least 1 other member of the backend team must approve the pull request before we can merge to master.
• We do not have a deployment process yet either.
• We plan on using AWS to deploy our app, and we plan on setting up auto-deployment to trigger upon pushing to master.
• We will use a docker with GitHub actions to deploy to AWS as this is what is natural to us.

Licenses

LBC already has a website, so they want a mobile app instead. We chose React Native, and Facebook announced as of February 2018 that all React products are under the MIT License. (https://www.asapdevelopers.com/react-native-update-to-mit-license/#:~:text=In%20September%202017%2C%20Facebook%20announced,Native%2C%20Metro%2C%20and%20Yoga.) MIT licenses offer permissions to freely distribute and modify this software provided that we include the MIT license text at the beginning of our app. (https://www.quora.com/What-are-the-pros-and-cons-of-the-MIT-license)