Gmail WebApp with REACT.JS!

A website like Gmail which is created using ReactJS, the React-Router is implemented for the mail page, React-Redux has been used as a state management tool. The firebase is used for the authentication and firebase firestore is used as a database. React-Hook-Form is used for compose and Material-UI icons have been used.

View Demo · Documentation · Report Bug · Request Feature

📔 Table of Contents

• About the Project
  • Screenshots
  • Tech Stack
  • Firebase Config
• Getting Started
  • Prerequisites
  • Installation
  • Run Locally
  • Deployment
• Contact

🌟 About the Project

📷 Screenshots

• Application Home page & Demo

2023-03-17-23-58-50.mp4

• Mail Details Page

• Mails and Compose Page

LIVE DEMO 💥

👾 Tech Stack

Client

• React.js
• React Router
• React Redux
• Material UI

Database and Hosting

• Firebase

🧰 Getting Started

‼️ Prerequisites

• Sign up for Firebase account HERE
• Install Node JS in your computer HERE

🔑 Firebase Config

To run this project, you will need to add the following config of your project to firebase file

apiKey

authDomain

projectId

storageBucket

NEXTAUTH_URL

messagingSenderId

appId

measurementId

⚙️ Installation

Install my-project with npm

npx create-react-app my-project --template redux

cd my-project

Install dependencies

🧪 Install Firebase and Material UI

Install Firebase

Install Firebase and copy the config of your project and setup locally.

npm install firebase

Install Material UI

Install material ui icons

npm install @mui/material @emotion/react @emotion/styled

Install dependencies

🔶 Other Dependency Info

🏃 Run Locally

Clone the project

git clone https://github.com/Priyanshu88/Gmail-WebApp.git

cd Gmail-WebApp

Install dependencies This is a React.js project bootstrapped with create-react-app.

npm install

Start the server First, run the development server:

npm run start

This is a React.js project bootstrapped with create-react-app.

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/app.js. The page auto-updates as you edit the file.

Learn More

This project uses react-hook-form to compose the mails.

🚩 Deployment

To deploy this project run

Commands

firebase login

firebase init

npm run build

firebase deploy

🤝 Contact

Your Name - @twitter_handle - [email protected]

Project Link: https://github.com/Priyanshu88/Gmail-WebApp.git

---

Don't forget to leave a star ⭐️