1. What is this project

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!

2. How to get started

mymizu Web

pre-requisites:

• NodeJS
• Yarn
• mymizu api key
• mymizu user token

How to get a mymizu API key

You will need to get someone from the mymizu team to generate an API key for you.

How to generate a user token

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.

Development

Running the project locally

This repo uses Yarn 1 (classic). If your global yarn is v2 or later, use npx yarn@1 in place of yarn below.

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

# Start the dev loop
yarn dev

Then open http://localhost:3000. yarn dev builds the client and server with esbuild in watch mode, restarts the server when server code changes, and reloads open browser tabs after each successful rebuild, so edits show up on save. Build errors are printed without stopping the watcher. PORT and LIVE_RELOAD_PORT (default 35729) can be overridden in the environment. Ctrl+C stops everything.

Testing a production build

# Compile both backend & client code (unminified)
yarn build

# Compile for prod. This minifies the compiled files for production
yarn build:prod

# Run the compiled server
yarn start

# Or run it with nodemon, restarting when build/server.js changes
yarn start:reload

Feature flags

Flags live in server/config.js and are read from the environment, so changing one is a variable and a restart — no code change and no rebuild.

Variable	Default	What it controls
COOLING_SHELTERS	off	The cooling-shelter layer: whether the API is asked for shelters at all, whether the category filter is shown, and whether shelters count towards cluster totals. Set to 1, true, yes or on to enable.

The server stamps each flag into the page (window.__COOLING_SHELTERS__) and passes it to <App>, so the server-rendered markup and the hydrated tree agree.

Routing / 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>`
      )
    );
  });
});

3. Pick a feature to work on

Please see CONTRIBUTING file for information about how to contribute, and report bugs or suggest new features.

4. Join our slack community

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]

5. Contributors

Hackathon Contributors

Thank you to all participants in our Summer 2022 Hackathon for their contributions

• Alexandre Plagnard
• Andy Park
• Dominic Lowes
• Quentin Siutkowski
• Juli Boucree

and many others!