Arscalendar is a React application which uses Google Calendar API and OAuth2.0, connects the application with your personal primary Google Calendar. By using the application, you are able to view the list of the events, plus create the new ones, and delete them from the calendar.
Follow the next steps to set up your Google Calendar project, which is necessary to run the application:
-
Go to Google Cloud Platform, and from the dropdown menu click on New project, name your project and click Create. Once the new project is created, select the new project from the dropdown menu (if the project is not already selected)
-
Click on the burger menu and choose APIs & Services -> choose OAuth consent screen -> choose External -> click Create
-
Follow the next steps:
- App information -> App name
The name of the app
-> User support emailYour Gmail address
- Developer contact information -> Email addresses
Your Gmail address
- click SAVE AND CONTINUE
- click ADD OR REMOVE SCOPES -> choose .../auth/userinfo.email, .../auth/userinfo.profile, openid, .../auth/calendar.events -> click UPDATE
- click SAVE AND CONTINUE
- click ADD USERS -> add
Your Gmail address
(You can add other users as well) -> click ADD - click SAVE AND CONTINUE
- Go to Credentials:
- click CREATE CREDENTIALS -> choose API key (Once the key is created, use it in your application)
- click CREATE CREDENTIALS -> choose OAuth client ID -> Application type Web application -> Name
The name of the app
-> Authorized Javascript originshttp://localhost:3000
-> click CREATE (Once the Client ID is created, use it in your application)
- when signing in for the first time, choose your Gmail address on the pop-up window
- click Continue -> click on the check-box related to your Google calendar -> click Continue
Follow the installation process to run the application:
- Clone the repo:
git clone https://github.com/urisk333/arscalendar
- Add the credentials:
- Create .env file in the app's root folder, and add the credentials, created in the previous steps, to the file:
REACT_APP_GOOGLE_CLIENT_ID=
REACT_APP_GOOGLE_API_KEY=
- Run the application:
cd arscalendar/calendar
npm i
npm start