CubeMail

CubeMail is a webmail-client built using Create-React-App and Chakra UI, It runs completely in the browser and uses the Gmail's public Javascript API.

Check it live here

How does it work?

The account sign-in and authentication process is totally managed by Gmail's secure protocols. The workflow is as follows:

• First-time users will see a landing page with a button to sign in to Gmail.
• Once successfully signed-in, Gmail will display a screen asking the user for permission to use the account in the application.
• After permission is granted, the application will load all account data and display the Inbox folder

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.

Requirements

• All Gmail API requests require an API Key and an OAuth 2.0 Client ID. You can follow these instructions to obtain those credentials. Then, store those two values in the .env file located in the root folder by replacing <YOUR_API_KEY> and <YOUR_CLIENT_ID> respectively.

Getting started

1. Clone this repo

$ git clone https://github.com/KhalidLam/CubeMail.git
$ cd  CubeMail
$ npm install

2. Create a .env from .env.example and add your Google API credentials - Google Api

$ cp .env.example .env

3. enable Gmail API - Enable Google APIs

4. Run: $ npm start

5. Open http://localhost:3000 in your browser.

Technologies used

• React - build interfaces & data flow
• Chakra UI - components & styling
• React Icons - Icons
• js-base64 - Base64 transcoder
• Gmail's public Javascript API - access to Google APIs
• Gmail REST API - Documentation

Features

• Read, Send, Reply, Forward, Trash And archive messages

Todo

• [ ] Make app responsive
• [x] Add search feature
• [ ] Display user's Labels
• [ ] Add animation on Buttons
• [x] Add infinite scrolling
• [ ] Error handling on login or connexion issues
• [ ] Switch to Redux instead of Context API

License:

MIT License