https://github.com/theshobhitsingh/zapmail
ZapMail is a modern email management application that allows users to efficiently view, search, and organize their emails in real-time.
https://github.com/theshobhitsingh/zapmail
css3 firebase firebase-auth firebase-database firebase-hosting firebase-realtime-database framer-motion reacticons reactjs redux redux-toolkit tailwindcss
Last synced: 3 months ago
JSON representation
ZapMail is a modern email management application that allows users to efficiently view, search, and organize their emails in real-time.
- Host: GitHub
- URL: https://github.com/theshobhitsingh/zapmail
- Owner: theshobhitsingh
- Created: 2024-10-21T13:24:01.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-12T05:12:10.000Z (over 1 year ago)
- Last Synced: 2025-06-11T07:14:17.009Z (about 1 year ago)
- Topics: css3, firebase, firebase-auth, firebase-database, firebase-hosting, firebase-realtime-database, framer-motion, reacticons, reactjs, redux, redux-toolkit, tailwindcss
- Language: JavaScript
- Homepage: https://zapmail-f50b1.web.app/
- Size: 126 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ๐ง ๐๐๐ฅ๐ ๐ฎ๐ถ๐น : ***Your Email Service***
## Overview
ZapMail is a modern web application that mimics an email client. It allows users to manage their emails effectively. The application features a clean user interface, real-time updates, and robust functionalities that enhance user experience.
## ๐ชถTable of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Installation](#installation)
- [Usage](#usage)
- [User Experience](#user-experience)
- [Contributing](#contributing)
- [License](#license)
-
## ๐Features
### User Authentication
- **Login Screen** ๐: Users can log in using their credentials.
- **User Profiles** ๐ค: Each user has a personalized profile with their information.
### Email Management
- **View Emails** ๐ฌ: Users can view emails sorted by categories such as Primary, Promotions, and Social.
- **Search Functionality** ๐: Use the search bar at the top to quickly find specific emails by subject, sender, or content.
- **Compose New Email** โ๏ธ: Users can easily compose new emails by clicking on the "Compose" button. The email editor allows adding recipients, subject lines, and email body content.
### Email Actions
- **Delete Emails** ๐๏ธ: Users can select emails and delete them permanently.
- **Mark as Read/Unread** ๐: Users can mark emails as read or unread for better organization.
- **Reply and Forward** ๐ฌ: Users can reply to or forward emails directly from the email view.
### Real-Time Updates
- **Real-Time Email Updates** โก: The application updates the inbox in real-time, so users can see new emails without refreshing the page.
### Dynamic Search
- **Dynamic Search** ๐: Instant search functionality to find emails by subject, sender, or content.
### User Profile Management
- **User Profile Management** ๐ค: Users can manage their profiles and log out easily.
## โ๏ธTechnologies Used
- **Frontend**:
- React: For building the user interface.
- Redux: For state management.
- Framer Motion: For animations and transitions.
- React Icons: For iconography.
- **Backend**:
- Firebase: For authentication and Firestore as the database.
- **Styling**:
- CSS-in-JS (styled-components or similar): For component styling.
- Tailwind CSS (if used): For utility-first styling approach.
## Installation
1. **Clone the repository** ๐:
```bash
git clone https://github.com/yourusername/zapmail.git
cd zapmail
2. **Install dependencies** ๐ง:
```bash
npm install
3. **Set up Firebase** ๐ฅ:
- Create a Firebase project in the Firebase console.
- Enable Authentication and Firestore.
- Replace the Firebase configuration in the `firebase.js` file with your project credentials.
4. **Run the application** ๐:
```bash
npm run dev
## Usage
After starting the application, you will be greeted with a login screen. Once logged in, you can navigate through the various email categories using the sidebar. Use the search bar at the top to quickly find specific emails. Click on an email to view its details.
## User Experience
The application is designed with user experience in mind. Key aspects include:
- **Intuitive Navigation** ๐งญ: The layout is simple and clean, allowing users to find their way around easily.
- **Responsive Design** ๐ฑ: The application adapts to different screen sizes, providing a seamless experience on both desktop and mobile devices.
- **Real-Time Interaction** โก: Users can see their emails updating in real-time, enhancing the overall experience.
- **Visual Feedback** ๐: Hover effects and animations provide feedback for user interactions, making the application feel more interactive.
## ๐คContributing
I welcome contributions! If you'd like to contribute to this project, please fork the repository and submit a pull request with your changes.
1. Fork the repository. ๐ด
2. Create a new branch for your feature:
```bash
git checkout -b feature/YourFeature
3. Commit your changes: ๐ป
```bash
git commit -m 'Add some feature'
4. Push to the branch: ๐
```bash
git push origin feature/YourFeature
5. Open a pull request. ๐
## Programmer
This project is coded by *Shobhit Singh*