CubeMail
CubeMail is a webmail client built using React and Chakra UI, It runs in the browser and uses the Gmail's public Javascript API.
Overview
CubeMail is a webmail-client built using Create-React-App and Chakra UI. It runs completely in the browser and uses Gmail's public Javascript API. CubeMail allows users to sign in to their Gmail accounts and view and manage their emails directly in the application. It does not store any user data and simply fetches data from Gmail's API and displays it in the browser.
Features
- Read, Send, Reply, Forward, Trash, and Archive Messages: Users can perform basic email actions such as reading, sending, replying, forwarding, trashing, and archiving messages.
- Search Feature: CubeMail includes a search feature that allows users to search for specific emails based on various criteria.
- Display User's Labels: This feature allows users to view the labels associated with their emails, providing an organized way to manage and categorize their messages.
- Animation on Buttons: CubeMail includes animation on buttons to enhance the user experience and provide visual feedback.
- Infinite Scrolling: The application implements infinite scrolling, allowing users to easily navigate through their emails without having to manually load additional messages.
- Error Handling on Login or Connection Issues: CubeMail includes error handling to handle any login or connection issues that may occur.
- Switch to Redux instead of Context API: This feature allows for the transition from using the Context API for state management to using Redux, providing a more robust and scalable solution.
Summary
CubeMail is a webmail-client built using Create-React-App and Chakra UI. It allows users to sign in to their Gmail accounts and view and manage their emails directly in the application. CubeMail leverages Gmail's public Javascript API to fetch data from the user's Gmail account and display it in the browser. The application includes features such as basic email actions, search functionality, label display, button animations, infinite scrolling, and error handling. CubeMail is easy to install and provides a convenient and secure way to access Gmail emails directly in the browser.
- Create React App
Create React App is a popular tool for quickly setting up a new React project without the need for manual configuration or setup. It provides a preconfigured development environment with modern build tools, a live development server, and an easy-to-use command line interface.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Chakra UI
Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.
- GitHub Pages
Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.