mymizu Open-Source Web App
For the past 3 years, mymizu has been harnessing the power of technology and community to tackle single-use plastic waste and encourage people to think and act on the environment in their everyday lives. Now we would like to open up the building of the mymizu platform to the global tech community to see what magic that brings.
We are launching an open-source web app for mymizu that is enabling anyone to search our global, 200,000-strong refill spot network from their browser, but also - we hope - to develop and test out new ideas and features (e.g. filtering refill spots, live community stats, etc).
And we need YOUR HELP to build it.
Each line of code you write has the potential to drastically reduce plastic in Japan. For more information see details below!
pre-requisites:
You will need to get someone from the mymizu team to generate an API key for you.
Simply run:
curl -l 'https://api.mymizu.co/api/start?api_key=$INSERT_API_KEY&platform=ios&client_version=1.0.0&client_build=12345&uuid=UNIQUEUSERID'
# Your response should look like this:
{"new_token":$YOUR_USER_TOKEN} # Use the `new_token` value for user token.Running the project locally
All commands should be run in the project root directory.
# Create an .env file & insert the appropriate values. Be sure to include your api key and user token from the previous steps.
cp .env.sample .env
# Install dependencies
yarn
# Compile both backend & client code
# Make sure to re-run this if you want to see your changes built
yarn build
# Compile for prod. This minifies the compiled files for production
yarn build:prod
# Run server with watch. This command will restart the server when a change has been detected
yarn start:reload
# Run server without watch
yarn startRouting / Adding Pages
You can add routes to server/server.jsx, and be sure to import the component in which you'd like to inject into the html page, like so:
import { YourCustomComponent } from "path/to/your/component"
//...
app.get("/a-new-page", (req, res) => {
fs.readFile(path.resolve("./public/path/to/your/html/file.html"), "utf8", (err, data) => {
if (err) {
console.error(err);
return res.status(500).send("An error occurred");
}
return res.send(
data.replace(
'<div id="root"></div>',
`<div id="root">${ReactDOMServer.renderToString(<YourCustomComponent />)}</div>`
)
);
});
});Please see CONTRIBUTING file for information about how to contribute, and report bugs or suggest new features.
Please feel free to join our Slack community You can introduce yourself and share any questions. If you have any ideas for features and / or issues you can also reach out to us here! Or reach out to us directly if you have any questions [email protected]
Thank you to all participants in our Summer 2022 Hackathon for their contributions
and many others!