All Projects → sivadass → react-meeting-room

sivadass / react-meeting-room

Licence: MIT license
A simple web app to book meeting rooms inside an office, built using React and Google Calendar API

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to react-meeting-room

vue-element-admin
Vuejs实例-Vuejs2.0全家桶结合ELementUI制作后台管理系统http://www.cnblogs.com/weiqinl/p/6873761.html
Stars: ✭ 97 (-3.96%)
Mutual labels:  axios
vue2-multi-uploader
Drag and drop multiple file uploader with Vue.js v2 and Axios
Stars: ✭ 46 (-54.46%)
Mutual labels:  axios
ONE-ReactNative
As a practicing project, ONE - ReactNative contains many of the features we often use, such as Axios,Fetch, Redux, Charts, etc. It is also worth learning that the project contains a complete mall module.
Stars: ✭ 71 (-29.7%)
Mutual labels:  axios
react-tools-for-better-angular-apps
Use React ecosystem for unified and top notch DX for angular developement
Stars: ✭ 30 (-70.3%)
Mutual labels:  axios
vue-methods-promise
Let Vue methods support return Promise
Stars: ✭ 35 (-65.35%)
Mutual labels:  axios
vue-crud-ui
Single file Vue.js script that adds a UI to the PHP-CRUD-API project
Stars: ✭ 47 (-53.47%)
Mutual labels:  axios
Vue2.0-music
vue2.0全家桶撸的在线音乐播放器1.0
Stars: ✭ 35 (-65.35%)
Mutual labels:  axios
Covid19-Stats-IN
This app helps in tracking COVID-19 cases in India using covid19India apis
Stars: ✭ 13 (-87.13%)
Mutual labels:  axios
noteworx-react-mongodb
A basic note application that uses React frontend to capture and manage notes, an api written in ExpressJS, and mongodb to store notes
Stars: ✭ 70 (-30.69%)
Mutual labels:  axios
energy-use-case-trading-client
Energy Use Case Web UI for Lition Trading Platform
Stars: ✭ 23 (-77.23%)
Mutual labels:  axios
there-are-lots-of-people-in-Baiyun-airport
挑战杯 - 广州白云机场人流量时空分布预测系统 - 前端
Stars: ✭ 14 (-86.14%)
Mutual labels:  axios
vue-iview-admin-template
Vue 2.0 admin template based on View UI
Stars: ✭ 43 (-57.43%)
Mutual labels:  axios
vue-element-admin-ts
vue-element-admin 的 typescript 版本
Stars: ✭ 101 (+0%)
Mutual labels:  axios
github-admin
vue和element-ui搭建一個後台管理系統,使用github提供的api搞事情。輸入您的github賬號名自動幫你生成基本的github信息哦😯
Stars: ✭ 15 (-85.15%)
Mutual labels:  axios
boss
React+express+sock.io+mongodb build a boss
Stars: ✭ 25 (-75.25%)
Mutual labels:  axios
api
Simple data loading for React
Stars: ✭ 35 (-65.35%)
Mutual labels:  axios
boot-admin-ui
基于SpringBoot 2.6.2的前后端分离的后台管理系统
Stars: ✭ 16 (-84.16%)
Mutual labels:  axios
music
🎵vue 像素级还原mac客户端网易云音乐
Stars: ✭ 34 (-66.34%)
Mutual labels:  axios
Notion-and-Google-Calendar-2-Way-Sync
2 Way Sync Between Notion Database and Google Calendar
Stars: ✭ 205 (+102.97%)
Mutual labels:  google-calendar-api
axios
Axios module for Nest framework (node.js) 🗂
Stars: ✭ 95 (-5.94%)
Mutual labels:  axios

React Meeting Room

A simple web app to book meeting room inside an office.

React Meeting Room

What this web-app can do for you?

  1. This web-app will help you to allocate meeting room to all departments inside a company.
  2. It uses google calendar API as backend, so the events can be created anywhere using Google Calendar APP or through Web.
  3. Created events can be viewed from anywhere via desktop, tablet or mobile-phone.
  4. The app will show you meeting room availability status instantly.
  5. You can view the list of all meetings scheduled for the day in a easily graspable view.

Live Demo

https://sivadass.github.io/react-meeting-room/

Setup

Google API Key

  1. Goto Google Cloud Platform Console and create a new project.

  2. Get inside APIs section and click Library Tab.

  3. Under the Library, search for Google Calendar API and click ENABLE.

  4. Under Credentials Tab, click Create Credentials button and select API Key on dropdown list.

  5. A popup will open, which will give you the API Key (GOOGLE_API_KEY).

  6. Now Create your web client with following settings. (Give your own desired port number and urls for your app).

    Setup authorized javascript origins

Google Calendar Configuartion

  1. Goto Google Calendar and create a new calendar.

  2. Under Access Permissions section, just enable the Make available to public checkbox. And in the right side dropdown, make sure See all event details option is selected.

    Step 1

  3. Grab the Calendar ID (CALENDAR_ID) from Integrate Calendar section.

    Step 2

  4. And also add few events to our newly created calendar, so that you will have some data to see while developing.

Local Setup

  1. Clone the repository using git clone https://github.com/sivadass/react-meeting-room.git.
  2. Enter into the project folder and install all dependencies using npm install
  3. Now open the file config.js inside src folder and update the GOOGLE_API_KEY and CALENDAR_ID which you have got from above steps.
  4. Now start the app by npm start, the project will load in the browser at http://localhost:8016/

Production

Just run the code below, all your build files will be generated inside docs folder.

npm run build
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].