An appointment booking client application made using Node JS, Firebase for Login, React framework and Bootstrap for Styling. This application makes use of the Google Calendar API to create appointment timeslots on Google Calender through the server.

• Node ✔️
• Server App ✔️

• apibooking.js - A folder containing an instance of axios to make XMLHttpRequests from the browser.

• Form.js - Our main form for data input, it renders the timeslot.js depending on the date selected from the react-calendar. Uses apibooking.js post method "/book" to post the appointment to the server, after which it refreshes the date upon submit. On each date change the data is updated through the react useState hook. Users logged in Email address is sent through the api call as well as an additional message available to be put through the input field. On a successful message from the server a success message is displayed for a few seconds on the FE. Styled with Bootstrap.
• Header.js Styled header with logout button to signout from Firebase
• TimeSlot.js - Provides functionality, checking the date passed to it and making a call through the apibooking.js get method "/timeslots" to check available times from the servers, renders the returned data with a function to adjust the timezone since server serves UTC data
• styles.css - Contains .react-calendar__navigation background color

• App.js - Contains the placement for the router and all routes using react-router-dom wrapped with AuthProvider to have global user state managment
• Auth.js - Provides a global state hook for user managment with onAuthStateChanged and react useState
• configfb.json - config.json file used with firebase. Generated for a firebase web project
• Home.js - Main page of our App containing conditional rendering for either serving the login and signup links or the actual main page of the App
• index.js - Root of the application, instances the App
• Login.js - Login page. Using firebases signInWithEmailAndPassword has redirecting to the main page in case currentUser gets logged in. Styled with Bootstrap.
• SignUp.js - Sign in page. Using firebases createUserWithEmailAndPassword has redirecting to the main page in case currentUser gets logged in. Styled with Bootstrap.
• styles.css - Sets margins to 0 for unwanted spacing

1. setup the Server following the server Readme.md
2. npm install
3. npm start

1. Register or login using your email
2. Select a date, select one of the available time slots. click the book button.
3. Check your server Calendar API google account to see the appointment