https://github.com/rahulkrsharma2004/google-calendar
This project demonstrates the integration of Google Calendar with a web application, allowing users to authenticate using their Google account, access their calendar in real-time, and create events directly from the application and also show on UI.
https://github.com/rahulkrsharma2004/google-calendar
backend environment-variables express frontend google-authentication google-calendar-api google-cloud-console mern-stack mongodb nodejs reactjs
Last synced: about 2 months ago
JSON representation
This project demonstrates the integration of Google Calendar with a web application, allowing users to authenticate using their Google account, access their calendar in real-time, and create events directly from the application and also show on UI.
- Host: GitHub
- URL: https://github.com/rahulkrsharma2004/google-calendar
- Owner: Rahulkrsharma2004
- Created: 2024-11-15T12:34:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-21T19:35:18.000Z (over 1 year ago)
- Last Synced: 2025-03-06T18:48:00.426Z (about 1 year ago)
- Topics: backend, environment-variables, express, frontend, google-authentication, google-calendar-api, google-cloud-console, mern-stack, mongodb, nodejs, reactjs
- Language: JavaScript
- Homepage: https://google-calendar-rks.netlify.app
- Size: 14.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **Google Calendar**
This project demonstrates the integration of Google Calendar with a web application MERN stack full Frontend and Backend, allowing users to authenticate using their Google account, access their calendar in real-time, and create events directly from the application and also show on UI.
## **Features**
- Google OAuth 2.0 login functionality.
- Fetch and display events from the user's Google Calendar in a user-friendly table format.
- Create new calendar events.
- Responsive design for seamless use across devices.
---
## **Image**
## Authentication Flow
**Login**:
- Users log in using Google OAuth 2.0.
- After granting permissions, users are redirected back with an authorization code.
**Token Exchange**:
- The server exchanges the authorization code for access and refresh tokens.
- Tokens are used to authenticate API requests.
**User Information**:
- The server verifies the ID token and retrieves user info.
- User info is stored in the database for session management.
## Technologies Used
- **React.js**: Frontend library for building user interfaces.
- **Node.js**: Backend runtime environment for executing JavaScript code.
- **Express.js**: Web framework for Node.js to build backend APIs.
- **Vanilla CSS**: For styling the application.
- **React Router**: For navigation and routing within the React application.
---
## **Getting Started**
- First clone the repository --
- Cloning Frontend and Backend --
- cd frontend-calendar/
- Run the command in terminal **npm run dev**