Giter Club home page Giter Club logo

resilience-app's Introduction

MutualAid.World App

See demo here!

Please also check out CONTRIBUTING.md


Repo setup

  • Clone the repository on your machine
git clone <GIT REPOS HERE> [folder name]
cd [folder name]
  • Inside the repository, install the necessary packages
npm ci
# as opposed to npm install, which modifies package-lock.json
  • Set up your local .env folder

Copy the file pinned to the side of #resilience-app channel to .env.developmentin the git root of this repo.

  • Start the local server
npm start
  • As you work in the repository, your changes will publish and refresh your local server on the fly.
  • To stop the server, use the terminal command Ctrl. + C

Test Data

When running the app locally, you can test the phone verification sign-up flow by entering any of the phone number / verification code combinations listed below (the leading "1" should be filled in for you):

Phone Number Verification Code
7777777777 123456
2223334444 123456

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run storybook

{DONT THINK WE ARE MAINTAINING THIS CURRENTLY}

Run the storybook where we can showcase the components in the system write a story

npm run docs

Run this to generate docs in docs/ folder (made with JSDocs). For more info

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Code change process

  • See Contributing.MD but... Checkout a new branch by choosing a simple name that expresses the individual issue you're addressing
git checkout -b my-feature-28
  • Do your work in the branch
  • Check that your changes are present by checking the status
git status
  • Add your changes to the branch
git add .
  • Add a commit message that explains the work that's complete, the way you did it, and any other notes you might want to leave for code reviewers
git commit -m "My feature is now working on the front page. I noticed that there might be a typo in a public function. You'll see the code comment."
  • Push your work into the branch origin
git push -u origin my-feature-28
  • Create a pull request and assign as reviewer
  • Once all issues are addressed and you have at least two approvals, merge your changes to master and deploy.

All commands in one clipboard:

git checkout -b [branch name]
git status
git add .
git commit -m "[commit message]"
git push -u origin [branch name]

Accessibility

Using react-axe as a library to find accessibilty warnings and errors. Please check the console for warnings or errors from react-axe before committing.

Heroku Deployment

  • Login into Heroku with Email and Password:
heroku login
  • Add the Heroku branch to your local machine:
heroku git:remote -a <heroku app name>
  • Develop as per normal, branching and merging to master.
  • Once you are happy with master, push the changes into the Heroku branch:
git push heroku master
  • This also runs all of the build and deployment commands, so it may take a moment, but once it's complete, the live link should be updated.

File structure

File Description Edit?
[config/](src/master/config/) This is used to build out the webpack. In most cases, this won't need to be edited unless we decide to change our build in some way. N
[node_modules/](src/master/node_modules/) The folder for all of the modules pulled in by Node. Good folder to see what FontAwesome icons are available. N
[public/](src/master/public/) Don't edit this. Anything you put in here will get replaced as this folder is the output of the build and what is viewed by the front end. N
[scripts/](src/master/scripts/) These are the node scripts. Again, unless we are changing the way the build works, this shouldn't need to change N
[src/](src/master/src/) This is where the editing happens. Y
[src/fonts/](src/master/src/fonts/) Local fonts. Y
[src/img/](src/master/src/img/) Local image assets for things like the logo and map pins Y
[src/js/](src/master/src/js/) All JavaScript and JSX. Y
[src/js/components/](src/master/src/js/components/) JSX components that are used on different pages Y
[src/js/components/inputs/](src/master/src/js/components/inputs/) JSX components that are also used as input, select, and textarea elements so that the HTML is standardized with much less typing. Y
[src/js/pages/](src/master/src/js/pages/) This folder is for all of the JSX components that wrap full pages and are used as Routes in App.js Y
[src/js/resources/](src/master/src/js/resources/) This is general JavaScript that helps the rest of this code do what it needs to do. Y
[src/scss/](src/master/) All Sass partials Y
[src/scss/global/](src/master/src/scss/) Initial tag settings, set globally before use. Similar to standardized CSS. Y
[src/scss/layout/](src/master/src/scss/layout/) This puts the general block elements on the page where they belong and dictate the structure of pages in a general sense. Y
[src/scss/object/](src/master/src/scss/object/) This is for objects that are rendered on multiple pages in multiple contexts Y
[src/scss/pages/](src/master/src/scss/pages/) This is for the styles specific to one page on the site Y
[src/scss/presets/](src/master/src/scss/presets/) These have variables, mixins, and other presets for how the CSS is written so that it's faster to build. Y
[src/App.js](src/master/src/App.js) This is the base file that sets up the routes and holds the default state of the application. Y
[src/App.scss](src/master/src/App.scss) This imports all of the style partials from /scss Y
[src/App.test.js](src/master/src/App.test.js) This tests the current connection for registerServiceWorker.js Y
[src/index.js](src/master/src/index.js) This is the true entry point for the application, but is also used to set up Redux. Y
[src/registerServiceWorker.js](src/master/src/registerServiceWorker.js) This informs how the server needs to build the page based on context. N
[.gitignore](src/master/.gitignore) Git settings for what to ignore on commit Y
[package-lock.json](src/master/package-lock.json) JSON file for NPM settings N
[package.json](src/master/package.json) JSON file for Yarn settings N
[README.md](src/master/README.md) This file Y

resilience-app's People

Contributors

mat10tng avatar azmainamin avatar spraynard avatar thedma04 avatar thirdeyeclub avatar laredotornado avatar utunga avatar qdozaq avatar f-23 avatar eihcir0 avatar pedro-surf avatar jwu910 avatar considine avatar guillermoparral1995 avatar csumm avatar gabz75 avatar snowcoding avatar aquiburrkhan avatar dvalinotti avatar ruchijn avatar amanchauhan11 avatar kooshaba avatar sebassdc avatar shanucreations avatar guadalazzo avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.