{"id":21125618,"url":"https://github.com/khalidlam/cubemail","last_synced_at":"2025-07-08T23:31:26.741Z","repository":{"id":38985237,"uuid":"269698491","full_name":"KhalidLam/CubeMail","owner":"KhalidLam","description":"CubeMail is a webmail client built using React and Chakra UI, It runs in the browser and uses the Gmail's public Javascript API.","archived":false,"fork":false,"pushed_at":"2023-12-09T12:33:39.000Z","size":6551,"stargazers_count":41,"open_issues_count":15,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-04T12:51:21.348Z","etag":null,"topics":["api","chakra-ui","create-react-app","gmail","gmail-api","javascript","react","reactjs"],"latest_commit_sha":null,"homepage":"https://khalidlam.github.io/CubeMail/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KhalidLam.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":null,"security":null,"support":null,"governance":null}},"created_at":"2020-06-05T16:14:53.000Z","updated_at":"2025-02-08T05:23:46.000Z","dependencies_parsed_at":"2023-12-09T13:42:04.186Z","dependency_job_id":null,"html_url":"https://github.com/KhalidLam/CubeMail","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/KhalidLam/CubeMail","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KhalidLam%2FCubeMail","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KhalidLam%2FCubeMail/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KhalidLam%2FCubeMail/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KhalidLam%2FCubeMail/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KhalidLam","download_url":"https://codeload.github.com/KhalidLam/CubeMail/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KhalidLam%2FCubeMail/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264365474,"owners_count":23596841,"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":["api","chakra-ui","create-react-app","gmail","gmail-api","javascript","react","reactjs"],"created_at":"2024-11-20T04:35:52.110Z","updated_at":"2025-07-08T23:31:26.085Z","avatar_url":"https://github.com/KhalidLam.png","language":"JavaScript","readme":"# CubeMail [![Build Status](https://img.shields.io/github/license/KhalidLam/Gmail-App-React)](https://github.com/KhalidLam/Gmail-App-React/blob/master/LICENSE)\n\n![alt text](https://github.com/KhalidLam/CubeMail/blob/master/screenshot.jpg?raw=true)\n\nCubeMail is a webmail-client built using [Create-React-App](https://github.com/facebook/create-react-app) and [Chakra UI](https://github.com/chakra-ui/chakra-ui/), It runs completely in the browser and uses the [Gmail's public Javascript API](https://developers.google.com/gmail/api/).\n\n## [Check it live here](https://khalidlam.github.io/CubeMail/)\n\n## How does it work?\n\nThe account sign-in and authentication process is **totally managed by Gmail's secure protocols**. The workflow is as follows:\n\n- First-time users will see a landing page with a button to sign in to Gmail.\n- Once successfully signed-in, Gmail will display a screen asking the user for permission to use the account in the application.\n- After permission is granted, the application will load all account data and display the Inbox folder\n\n**IMPORTANT:** The application does **NOT** store or persist any account or user data in any way at all. It simply fetches data from Gmail's API and displays it in the browser.\n\n## Requirements\n\n- All Gmail API requests require an **_API Key_** and an **_OAuth 2.0 Client ID_**. You can follow [these instructions](https://developers.google.com/fit/android/get-api-key) to obtain those credentials. Then, store those two values in the **_[.env](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables)_** file located in the root folder by replacing `\u003cYOUR_API_KEY\u003e` and `\u003cYOUR_CLIENT_ID\u003e` respectively.\n\n## Getting started\n\n1. Clone this repo\n\n```sh\n$ git clone https://github.com/KhalidLam/CubeMail.git\n$ cd  CubeMail\n$ npm install\n```\n\n2. Create a `.env` from `.env.example` and add your Google API credentials - [Google Api](https://console.developers.google.com)\n\n```\n$ cp .env.example .env\n```\n\n3. enable Gmail API - [Enable Google APIs](https://support.google.com/googleapi/answer/6158841?hl=en)\n\n4. Run: `$ npm start`\n5. Open http://localhost:3000 in your browser.\n\n## Technologies used\n\n- [React](https://github.com/facebook/react) - build interfaces \u0026 data flow\n- [Chakra UI](https://github.com/chakra-ui/chakra-ui/) - components \u0026 styling\n- [React Icons](https://github.com/react-icons/react-icons) - Icons\n- [js-base64](https://github.com/dankogai/js-base64) - Base64 transcoder\n- [Gmail's public Javascript API](https://github.com/google/google-api-javascript-client) - access to Google APIs\n- [Gmail REST API](https://developers.google.com/gmail/api) - Documentation\n\n## Features\n\n- Read, Send, Reply, Forward, Trash And archive messages\n\n## Todo\n\n- [ ] Make app responsive\n- [x] Add search feature\n- [ ] Display user's Labels\n- [ ] Add animation on Buttons\n- [x] Add infinite scrolling\n- [ ] Error handling on login or connexion issues\n- [ ] Switch to Redux instead of Context API\n\n### License:\n\n[MIT License](https://opensource.org/licenses/MIT)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhalidlam%2Fcubemail","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkhalidlam%2Fcubemail","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhalidlam%2Fcubemail/lists"}