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.
- 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.
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.
- 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.
- First clone the repository --
- Cloning Frontend and Backend --
- cd frontend-calendar/
- Run the command in terminal npm run dev