Whaler is a crowdsourcing platform for collecting data about bins around the world. Our website allows members to submit records about bins that they know--location, types of bins, together with a photo of the bin as a supporting evidence--and let other members help verify the data with a voting system. We also reward contributors with points which could be redeemed for real-world prizes in form of gift cards. The implementation is done using React.js in JavaScript ES6 and SCSS, supplied by firebase backend. Whaler is primarily designed to be used with smartphones, but it could also work on latest version of PC browsers (Safari, Chrome) smoothly.
Codebase : 
Live Demo : https://whaler.netlify.com (mirror)
as of 2019/06/18, this repository (including its mirror) will no longer be updated.
-
This project is implemented with ReactJS framework with SASS/SCSS stylesheet. All the JavaScript file can be found in
/src/folder, and assets such as fonts and third-party js/css are put in/public/. The base directory from here on will refer to/src/ -
Each page component can be found in the directory. This include
index.jswhich calls render,Map.jsfor rendering map page,Redeem.jsfor rendering redeem page, and so on. -
Each page is reduced into several subcomponents that can be found in folder
/components -
The backend/database controls are kept in
/firebase -
/helper.jsis used to keep the file for helper functions used in several place across the application -
/constantsis for declaring constants. -
Other subfolders are used to keep the file implemented in the use of third-party libraries, such as react-redux or font-awesome
Please read the instruction on this file before working on the project.
Here, we are using ReactJS and CSS/SCSS stylesheet.
-
To start working, first clone the repository, then go to the project folder (where package.json is) and then run
npm ciandnpm start. note that we are usingnpm ciinstead ofnpm installbecause it will install package according to the package-lock file and will not rewrite it.
After the first pull, you can run project with onlynpm start. -
We are using sass/scss, so you also have to install sass package for scss reference. I've already added the package, but sometimes it doesn't work--in that case just run the command the npm prompt you when trying to run the project (sth abour node-sass)
-
The directory we'll be working on is
srcandpublic. React and JavaScript files are kept in/src, and stylesheets are kept in/src/assets/scss. Downloaded Fonts and assets should be kept inpublic. Creating a new folder in the dir is fine if you need it. Just try to be as organized as possible. -
Before pulling and start working for the day, please review any pull request that is still pending and merge them if you think there is no problem. This is just to make sure that we will be as much as possible on the same version on each branch and have to solve less conflict.
-
During working, if you found a part that someone else should be working on, please mark it with
TODO:and add it to TODO section (refer to Guide section below for more information) -
If you want to use any library that is not yet included in the work, please install it using
npm installand add the name of the library to React Library Section. Including css file and stuffs using linking are fine, but please see if there exists a react plugin to be installed (just because it is easier)<b -
Please create your own branch and use git PULL REQUEST instead of pushing to master. You can decide to merge it yourself if you have already test the code or are confident, but please keep buggy/unfinished to pull request until they are reviewed.
you can also find the list in package.json file
- firebase
- formik
- google-map-react
- node-sass
- react
- react-bootstrap
- react-fontawesome
- react-router
reduxunused at the moment- react-animations
- react-tagsinput
- react-toastify
- styled-component
- yup
- @react-firebase/database