{"id":22381949,"url":"https://github.com/googleinterns/pictophone","last_synced_at":"2025-07-31T02:33:16.205Z","repository":{"id":52518441,"uuid":"273540618","full_name":"googleinterns/Pictophone","owner":"googleinterns","description":"Visual telephone web game, by STEP 2020 Pod 119.","archived":false,"fork":false,"pushed_at":"2024-03-18T00:32:31.000Z","size":2498,"stargazers_count":3,"open_issues_count":25,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-03-18T01:37:50.651Z","etag":null,"topics":["game","webapp"],"latest_commit_sha":null,"homepage":"http://phoebeliang-step.appspot.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/googleinterns.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-06-19T16:34:01.000Z","updated_at":"2023-07-30T17:21:39.000Z","dependencies_parsed_at":"2024-03-18T01:46:30.906Z","dependency_job_id":null,"html_url":"https://github.com/googleinterns/Pictophone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googleinterns%2FPictophone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googleinterns%2FPictophone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googleinterns%2FPictophone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googleinterns%2FPictophone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/googleinterns","download_url":"https://codeload.github.com/googleinterns/Pictophone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228209948,"owners_count":17885595,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["game","webapp"],"created_at":"2024-12-05T00:11:07.788Z","updated_at":"2024-12-05T00:11:08.804Z","avatar_url":"https://github.com/googleinterns.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pictophone\n\nPictophone is a real-time multiplayer drawing game built to solve the logistical problems around playing visual telephone between friends.\n\n## Screenshots\nDashboard \u003cbr /\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/44682631/89606323-7f09ea80-d824-11ea-8194-7c9a8b57e5f1.png\" width=400\u003e\n\u003cbr /\u003e \nIn-game canvas ability \u003cbr /\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/44682631/89606480-ecb61680-d824-11ea-91fa-bea6484cee16.png\" width=400\u003e\n\n## Technologies Used\n### Frontend\n- [React](https://reactjs.org/)\n- [literallycanvas](http://literallycanvas.com/)\n- [Fabric.js](http://fabricjs.com/)\n\n### Backend\n- [Spring Boot framework](https://www.tutorialspoint.com/spring_boot/spring_boot_introduction.htm)\n- [Gmail API](https://developers.google.com/gmail/api)\n\n### Google Cloud Platform\n- Hosted on [Google App Engine](https://cloud.google.com/appengine)\n- [Google Cloud Storage](https://cloud.google.com/storage)\n- [Cloud Vision API](https://cloud.google.com/vision)\n- [Cloud functions](https://cloud.google.com/functions)\n- [Firebase platform](https://firebase.google.com/)\n    - [Firebase auth](https://firebase.google.com/docs/auth)\n    - [Cloud Firestore](https://firebase.google.com/docs/firestore)\n\n## CLI Tools\nThis project makes use of the `gcloud` SDK for project deployment to Google Cloud, the `npm` package manager for Node.js, and the `nvm` Node.js version manager. Node.js 10 is the specific version required for this project.\n\nInstall `gcloud`:\n```\necho \"deb [signed-by=/usr/share/keyrings/cloud.google.gpg] https://packages.cloud.google.com/apt cloud-sdk main\" | sudo tee -a /etc/apt/sources.list.d/google-cloud-sdk.list\nsudo apt-get install apt-transport-https ca-certificates gnupg\ncurl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key --keyring /usr/share/keyrings/cloud.google.gpg add -\nsudo apt-get update \u0026\u0026 sudo apt-get install google-cloud-sdk\n```\nThen run `gcloud init` to specify that development is being done on the correct GCP project.\n\nTo access the Google APIs used in this project, make sure you are logged in to use Application Default Credentials (ADC) for this project.\n```\ngcloud auth application-default login\n```\n\nInstall `nvm`:\n```\nwget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash\n```\n\nInstall `npm`:\n```\nnvm install node\n```\n\nUsing Node.js 10:\n```\nnvm install 10\nnvm use 10\n```\n\n## Project Structure\nThis project consists of a frontend component and a backend component.\n\n### Frontend\nThe frontend is built using React.js and makes use of Firebase. It has the following (simplified) directory tree:\n```\nclient/\n├── package.json\n├── package-lock.json\n├── public\n│   └── ...\n├── src\n│   ├── index.js\n│   ├── components\n│   │   └── ...\n│   ├── constants\n│   │   └── ...\n│   └──...\n└── ...\n```\nThe `package.json` and `package-lock.json` files contain all the dependencies for the frontend component, including React, while the `public` subdirectory contains the `index.html` file as well as other external assets that may be needed, such as images. The `src` subdirectory contains the main bulk of the React code.\n\n#### `src` Directory\n\n##### 'index.js' File\nThe index.js file contained in the src directory is the main entrypoint for the web application, as it is used to render the `root` div element in index.html. It currently uses whatever is defined by the App component.\n\n##### `components` Subdirectory\nThe components subdirectory contains all the various components and pages to be used in the web application. Each component should be placed in its own directory, with public facing parts exported in an `index.js` file. For example, if a component named \"Navbar\" was being developed, it should have at the very least `src/components/Navbar/index.js`. Any other JS files can be placed in the Navbar directory, but public facing parts should be exported in `index.js`. Another component, say \"TestComponent\", can then access Navbar via `import '../Navbar'`.\n\n###### The `App` Component\nThe most important component in the components subdirectory, which is ultimately what is fed into `src/index.js`. This component uses React Router (`import 'react-router-dom'`) to specify which pages of the web application can be visited and what component each of these pages uses.\n\n##### 'constants' Subdirectory\nContains any global constants for the projects. Currently contains a [routes.js](client/src/constants/routes.js) file that defines and exports the names for URL paths.\n\n### Backend\nThe backend runs on the Spring Boot framework and is built using Maven. It has the following (simplified) directory tree:\n```\napi/\n├── pom.xml\n├── src\n│   ├── main\n│   │   ├── java\n│   │   │   └── com\n│   │   │       └── google\n│   │   │           └── sps\n│   │   │               └── ...\n│   │   └── resources\n│   │       └── application.properties\n│   └── test\n│       └── java\n│           └── com\n│               └── google\n│                   └── sps\n|                       └── ...\n└── ...\n```\nServlets developed in the backend must be routed to the prefix `/api/` in the `@RequestMapping` annotation, e.g.:\n```\n@RequestMapping(value = \"/api/test-servlet\", method = RequestMethod.GET)\n@ResponseBody\npublic String testGet() {\n    return \"This is a test\";\n}\n```\nThe servlet can then be accessed from the frontend with a fetch request, e.g. `fetch('api/test-servlet').then( ... )`.\n\nImages are uploaded and downloaded to and from private Google Cloud Storage buckets. A [service account key](https://cloud.google.com/iam/docs/creating-managing-service-account-keys) is required to sign URLs and retrieve them.\n\nEmails are sent with the Gmail API. This must be turned on, and a [credentials file](https://developers.google.com/gmail/api/quickstart/java) must be used to authorize the email sending.\n## Styling\nThe React Bootstrap tool was imported for use in the frontend. Available components can be found [here](https://react-bootstrap.github.io/components/alerts/).\n\n## Testing\nThere is no testing currently set up, but it is something we have our eyes on.\n\n## Running Locally\n\nThe frontend and backend components must be run in two separate terminals.\n\nFrontend (from the `client` directory):\nIf you are pulling new changes or running for the first time, make sure you have all the dependencies from our `package-lock.json`.\n```\nnpm ci\n```\nNow, you just need to start the service!\n```\nnpm start\n```\n\nBackend (from the `api` directory):\n```\nmvn spring-boot:run\n```\n\nWhen testing in this environment, any changes made to the frontend code will be immediately updated and redployed locally in realtime. Maven must be stopped and rerun when any changes are made to the backend code.\n\n## Deploying\n\nThe frontend and backend components must be deployed separately:\n\nFrontend (from the `client` directory):\n```\nnpm run build\ngcloud app deploy client.yml\n```\n\nBackend (from the `api` directory):\n```\nmvn package\ngcloud app deploy api.yml\n```\n\n## License\n[Apache 2.0](https://github.com/googleinterns/Pictophone/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogleinterns%2Fpictophone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoogleinterns%2Fpictophone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogleinterns%2Fpictophone/lists"}