Get Inspired

🌐Website | Facebook | Instagram | Youtube

Get Inspired promotes ocean restoration awareness and education among youths through engaging the community in environmental stewardship. They host programs that educate students on marine life and provide volunteer opportunities to restore and preserve marine ecosystems.

🔎 About the Project

Nancy, the director of Get Inspired, has been maintaining Pismo clam data using spreadsheets. However, as the volume of data grows, efficiently collecting and displaying the information has become increasingly challenging.

🆙 We built a web application and database to store and display a variety of information about Pismo clams, including their color, location, date and time of survey, and other key characteristics. Our interface allows Nancy to easily input, view, and query the data as necessary. The dashboard shows each survey's automatically calculated statistics, which will be used to identify ways to restore the clam population.

Tech Stack

🔼 Frontend: React (UI Kit: AntDesign) + Firebase (Authentication)

🔽 Backend: NodeJS + MySQL

---

💻 Development

This subsection contains further details on the more technical aspects of the project, including information for developers.

Project branching structure

Due to complications with some of the GitHub Actions this project uses, the git branch structure is non-standard: dev is the main branch of the project. All PRs should be merged into this branch, as if it were the "main" branch.

🔨 Setting up the Development Environment

To start working on with this project, follow these steps:

1. Install Node.js and Yarn, if you haven't already.
2. Clone the repository and navigate to the project folder:

   git clone https://github.com/ctc-uci/get-inspired-frontend.git
   cd get-inspired-frontend
   

3. Place the .env file in the project's root directory.
   • If you are currently maintaining this project, ask your organziation or contact CTC for the most up-to-date .env file.
   • If you are making the .env file youself, it should follow this structure:

     NODE_ENV = development # or production
     ESLINT_NO_DEV_ERRORS = true
     
     # firebase info (for auth)
     REACT_APP_FIREBASE_APIKEY = 
     REACT_APP_FIREBASE_AUTHDOMAIN =
     REACT_APP_FIREBASE_PROJECTID =
     REACT_APP_FIREBASE_STORAGEBUCKET =
     REACT_APP_FIREBASE_MESSAGINGSENDERID =
     REACT_APP_FIREBASE_APPID =
     
     # react info
     REACT_APP_BASE_URL =
     REACT_APP_BACKEND_HOST = 'http://localhost:3001'
     REACT_APP_BACKEND_HOST_PROD = 

4. Install the EditorConfig plugin for your IDE.
5. Run yarn to install the required packages.
6. (Optionally) Run yarn start to run the project locally!

Available Scripts

Run (Development): yarn start

To run the project locally in development mode, use yarn start, then open http://localhost:3000 to view it in the browser. The console will show any lint errors, and the apge will reload after you make local edits to the code.

Format: yarn format

Run yarn format to format all .js, .jsx, .css files with Prettier (see ESLint and Prettier below).

Build: yarn build

Builds the app for production to the build folder.

ESLint and Prettier

This project uses ESLint and Prettier to enforce the Airbnb JavaScript Style Guide.

ESLint Plugins

Currently, the following ESLint plugins are installed:

• eslint-plugin-react
• eslint-plugin-prettier

Visit the links to learn more about each plugin.

Configuration

The configuration for ESLint is inside the .eslintrc.json file, located in the root of the project. Learn more about ESLint here.

The configuration for Prettier is inside the .prettierrc file, located in the root of the project. Learn more about Prettier here.

Husky and lint-staged

This project uses lint-staged and husky to run ESLint checks before all commits.

Skipping pre-commit checks

Use the --no-verify option to skip pre-commit checks, but please note that this is strongly discouraged.

Configuration

The configuration for lint-staged is inside the lint-staged object inside of package.json. Learn more about lint-staged here.

The configuration for husky is in the .husky directory, located in the root of the project. Learn more about husky here.