I Built a Gmail-Like Email Client with React and the Gmail API

I recently developed MailBox, an email client that functions like Gmail, using the React framework and the Gmail API. The aim of this project was to gain an understanding of how a React app can interact with a real Google API and authenticate users through Google OAuth. Upon completion, the application was linked to the reporter's actual Gmail account, allowing them to send and receive real emails.

The current version of MailBox offers several key features. Users can authenticate via Google OAuth, read their Gmail inbox, send emails through Gmail, and mark emails as read. They can also star, move emails to the Trash, and even switch between starred and unstarred emails. The application features a Gmail-style interface, a responsive layout for different screen sizes, and is hosted on GitHub Pages.

The application's connection to the Gmail API is established through Google OAuth, which allows users to link their Gmail accounts. After this authentication process, the application receives an access token that it uses to perform various operations with the Gmail API. These operations include fetching inbox messages, retrieving email metadata, opening individual messages, marking messages as read, adding or removing stars, and sending emails. It also allows for moving emails to the Trash.

The OAuth Client Secret is never included in the frontend code or on the GitHub repository to ensure the security of the user's Gmail account. The Gmail API allows the application to communicate directly with Gmail, enabling functionalities such as fetching inbox messages, getting email metadata, opening individual messages, marking messages as read, adding or removing stars, sending emails, and moving messages to the Trash.

The user interface was designed to resemble a modern email application. It includes a sidebar for navigation, showcases both the inbox and starred emails, and provides access to sent emails, drafts, the Trash folder, a search function, the compose function, account information, and a responsive layout that adapts to different screen sizes.

Through this project, the reporter gained valuable experience in building a React application with Vite, working with REST APIs, integrating Google OAuth, using the Gmail API, handling access tokens, sending emails through the Gmail API, managing asynchronous API requests, deploying a React application using GitHub Pages, and understanding the differences between a frontend-only demo and a real API-integrated application.

Looking towards the future, the reporter plans to add more Gmail functionalities to MailBox. Among these improvements are advanced search capabilities, the ability to reply and forward emails, the option to attach emails, labels for organizing emails, better handling of unread notifications, improved synchronization of Sent and Trash folders, an enhanced dark mode, and further mobile improvements.

The reporter is actively working on improving the project and welcomes feedback from other developers. They are particularly interested in hearing about any additional features that developers would like to see in the future, as well as any potential improvements in the UI or functionality. The project can be viewed and tried at https://thavuth772-alt.github.io/gmail-like-react-app/, and the source code is available on GitHub at https://github.com/thavuth772-alt/gmail-like-react-app.