gmail_clone

A fully functional Gmail Clone built using React.js, Redux Toolkit, Firebase, and Tailwind CSS. This project replicates the core functionalities of Gmail, including Google Authentication, real-time mail inbox using Firebase Firestore, and a responsive UI with smooth animations using Framer Motion. It showcases modern frontend architecture, real-time data handling, and production-grade design patterns.

Stale Pure Nim score 23/100 · last commit 2025-06-20 · 1 stars · tests present · no docs generated

Summary

Latest Version Unknown
License Unknown
CI Status Failing
Stars 1
Forks 0
Open Issues 0
Last Commit 2025-06-20
Downloads 0
Last Indexed 2026-09-06 07:35

Tags

CSS3 firebase git gitlab html javascript react react-redux redux-toolkit tailwindcss

Installation

nimble install gmail_clone
choosenim install gmail_clone
git clone https://gitlab.com/princegoswami/gmail_clone

OS Compatibility

Platform Linux macOS Windows FreeBSD OpenBSD NetBSD Android iOS WASM Embedded
gmail_clone ✓ ✓ ✓ - - - - - - -

Source

Repository https://gitlab.com/princegoswami/gmail_clone
Homepage https://gitlab.com/princegoswami/gmail_clone
Registry Source gitlab

README

👋 Hey, I’m Prince Goswami

A modern Gmail Clone built entirely with React.js, Redux Toolkit, Tailwind CSS, and Firebase.
This project replicates Gmail’s core features — real-time inbox, Google authentication, beautiful animations with Framer Motion — all in a clean, responsive UI.
Ideal for learning advanced React and Firebase integration!

📧 Gmail Clone — React + Firebase

A Gmail-like frontend app powered by Firebase services including Authentication, Firestore, and Hosting.
It demonstrates real-world production features like authentication, routing, state management, and real-time data sync.

🚀 Features

  • 🔐 Google Sign-In via Firebase Auth
  • 📥 Real-time Inbox from Firestore
  • ✨ Framer Motion for animated UI
  • 🔍 Email search (by subject, sender, or content)
  • 📨 Detailed message view with timestamp
  • 🧾 Compose & send email (saved to Firestore)
  • 🗑️ Delete Email functionality
  • 📂 Tabs: Primary, Promotions, Social
  • 💅 Responsive Tailwind UI
  • 🚀 Deployed via Firebase Hosting

🛠️ Tech Stack

Frontend

  • React.js (Vite)
  • Redux Toolkit
  • React Router v6
  • Tailwind CSS
  • Framer Motion

Backend (via Firebase)

  • Firebase Auth (Google Provider)
  • Firebase Firestore (real-time database)
  • Firebase Hosting
  • Firebase Storage (optional for attachments)

✨ Core Functionalities

🔐 Authentication

  • Google login/logout using Firebase
  • Secure token management via provider
  • Persistent user session

📧 Mail Features

  • Live inbox updates using Firestore's onSnapshot
  • Email delete (removes from Firestore)
  • View email details with time, sender, content
  • Compose & send mail

🎨 UI/UX Enhancements

  • Responsive sidebar with category tabs
  • Framer Motion animations on mail entries
  • Tailwind styling and hover states

🧭 Navigation

  • Route-based views with React Router
  • Instant search filtering

🔒 Firebase Setup

  1. Create a Firebase project at firebase.google.com
  2. Enable:
  3. Firebase Authentication (Google Sign-In)
  4. Firestore Database
  5. Firebase Hosting
  6. Add your Firebase config inside firebase.js

🔧 How to Run Locally

git clone https://gitlab.com/princegoswami/gmail-clone.git
cd gmail-clone
npm install
npm run dev

✅ Important: Replace Firebase config in firebase.js with your own credentials

🔥 Deployment

This project is hosted on Firebase Hosting.
To deploy your own version:

npm run build
firebase login
firebase init
firebase deploy

🔗 Connect With Me

GitLab    LinkedIn    Portfolio    Resume

Deploy link

https://clone-7708b.web.app

Thanks for visiting!
If you like this project, feel free to ⭐️ the repo and share it with others!