As a project manager, when I find a suitable linguist and want to use them for a project, I want:

1. an event to be created created so linguist is no longer considered available for other project.
2. an email sent.

Note: create n8n workflow for this or extend one created #5

Style and make sure they are fully responsive and work across all devices and in between breakpoints.

Google requires sensitive permission to list calendars which causes this security prompt to always appear at user login:

This is due to auth/calendar.readonly permission in this code in the Login page.

Normally calendarList.readonly should be sufficient but Google requires this sensitive scope to just list calendars per their API doc.

Changing the permission indeed makes the login prompt disappear, but then error 403 is returned when CodeSelector component is trying to get calendar list.

Style the header/navigation bar component. Make sure that it is fully responsive and works across all devices and in between breakpoints.

Set up an Express server for the back-end of your application:

Create a folder structure for the server side of your app.

Install any required dependencies.

Create a GitHub repo, and push this code to the repo.

Share the repo link with your team so that they are able to clone the project.

Use the CORS and express.json() Express middleware.

Add the basic routes for the API

Add the port for the server to listen on to an .env file (ie. PORT=8080)

Using .env variables will allow the rest of your team to use their local environment variables since you may be working with different values

Referring to an .env.sample file will help your team understand the variables included in the .env file since .env should be ignored from your git repository. Refer to the file in assets package for the example.

Prerequisite: Set Up Google OAuth and Calendar Selection in React
Users sign in with Google, and you retrieve their access tokens and selected calendars, using #16, and #17

1. Install n8n workflow automation tool https://www.npmjs.com/package/n8n#install-with-npm
2. Create a New Workflow in n8n
3. Create a backend endpoint in your Express app to handle requests from your React app, communicate with n8n instance set up in #5, and process Google Calendar data.
4. Configure Webhook
5. Add Google Calendar Nodes
6. Add Logic to Determine Availability
7. Return the Result

Getting error in console: client:325 Cross-Origin-Opener-Policy policy would block the window.closed call.

https://express-validator.github.io/docs
It allows you to combine them in many ways so that you can validate and sanitize your express requests, and offers tools to determine if the request is valid or not, which data was matched according to your validators, and so on.

Integrate Google Authentication into a React application using the @react-oauth/google package.

Prerequisite: you need to set up OAuth 2.0 authentication using the Google Auth Library in your React application, using OAuth 2.0 credentials (Client ID and Client Secret) set up in #15. This will allow users to sign in with their Google accounts.

As a project manager, I want to know at a glance who is available.

Currently it reads:

Create a Project in Google Cloud Console:

• Go to the Google Cloud Console.
• Create a new project.
• Enable the Google Calendar API for your project.
• Set up OAuth 2.0 credentials (Client ID and Client Secret).

Style the PM dashboard is fully responsive and works across all devices and in between breakpoints.

Display the list of available calendars to the user and allow them to select the ones they are interested in, using the access token from #17.

We are using react-intl to support localizing the app to multiple languages.
https://formatjs.io/docs/getting-started/installation/

React Intl has a set of React components that provide a declarative way to setup an i18n context and format dates, numbers, and strings for display in a web UI. The components render React elements by building on React Intl's imperative API.

Style and make sure they are fully responsive and work across all devices and in between breakpoints.

Integrating Google login with our app in #16 gives us access to the user’s profile, which includes the user’s name, email address, image, accessToken, and so on. We’ll use this information to create our user profile.

https://blog.logrocket.com/guide-adding-google-login-react-app/

As a project manager, I need to know if a linguist needs to be told to login again if refresh token has expired. Ideally in addition an email is sent to linguist to take corrective action.

Currently such user is not returned in the Dashboard and console log displays:

This is likely due to changing access scopes in Google console consent screen and user needing to login again to review and accept revised scopes:

if you are using a Database you will have to use PostgreSQL . To do this you can install the pg node_module/ and edit your knexfile.js to be something like:

require('dotenv').config();
module.exports = {
  client: "pg",
  connection: {
      host: process.env.DB_HOST,
      user: process.env.DB_USER,
      password: process.env.DB_PASSWORD,
      database: process.env.DB_DATABASE,
      port: 5432,
      ssl:true
  }
};

• Add screenshots to Readme
• Add project setup instructions

Create a descriptive readme file. With project setup instructions as well as info about the project. This may be the first thing people will see when viewing your project. At the moment you probably are still styling a lot, although at the end of the BootCamp l'd recommend adding screenshots to your readme, especially id the project isn't deployed, as it helps to get an understanding of what the project is about

The final README.md should highlight project features and implementation details rather than initial requirements for how the project will be built. The full requirements for the final README.md are outlined in the Technical Requirements of the Capstone Project Requirements.

Implement log out button per https://blog.logrocket.com/guide-adding-google-login-react-app/

Style is fully responsive and works across all devices and in between breakpoints.

Use image from https://unsplash.com/

Steps to reproduce:

1. Go to http://localhost:3000/dashboard

Notice image is missing after page loads:

As a project manager, I need to know if a linguist needs to be told to login again if they logged in but haven't selected their calendars.

Perhaps the user journey can be improved between login and account settings to reduce the chance of it happening.

https://github.com/nicmart-dev/linguistnow/wiki/App-logo

Perform end-to-end user testing of the entire project to find unexpected bugs or cosmetic issues on the front-end.

Once these issues are found, create new bug tickets and fix them.

Query the selected calendars to check for available time slots, using calendar selected in #18

As a user I want to not have to wait 50sec or more for page to load after login.

Currently as we use Render free hosting tier #26, resuming from sleep takes up to 1min.

Deploying to Docker containers on NAS like for n8n #28 should improve load times.

Create Migrations and Seeds for Users table.
Run the latest migration, then run the seeds file to introduce data into your database.

As a project manager (PM), I want to be able to search for available user against all users who signed in with Google and defined their calendars in the Settings page.

Currently, the workflow created in #5 only returns availability for selected user, and only once they save it in their profile.

We need to make sure Dashboard page only shows for PM and allows them to filter to display available users, using triggerN8nWorkflow server function.

Improve business logic in n8n workflow to more accurately determine availability
https://github.com/nicmart-dev/linguistnow/wiki/n8n-integration

• user can select working hours
• Timezone not hardcoded to PT
• Take into account size of project
• Time window not hard coded to next day + 1 week

Create a backend endpoint in your Express app to handle requests from your React app, communicate with n8n instance set up in #5, and process Google Calendar data.

Summary

• Controller: The business logic to handle availability checking is encapsulated in availabilityController.js.
• Express Server: server.js is updated to use the controller for handling requests.
• React App: The React app communicates with the Express server's endpoint to check availability.

We installed Tailwind #7 and now need to set it up to use it to style our app:

• Font: Use a clean and modern sans-serif font like Open Sans, Roboto, or Lato.

• Explore Tailwind UI: Tailwind UI offers a collection of pre-designed components and templates built with Tailwind CSS. You can use these components to speed up development and maintain a consistent design across your app.

• Responsive Design: Tailwind CSS provides responsive utility classes that allow you to create responsive layouts without writing custom media queries. Take advantage of these classes to ensure your app looks great on different screen sizes.

Once authenticated with #16, you need to request access to the user's Google Calendar data. Users should grant permission for your application to view their calendar events.

Display the list of available calendars to the user and allow them to select the ones they are interested in

As a user, whether linguist or project manager, I need to be able to stay logged in if I refresh the page or open a new tab.

Currently log in is stored in state, and not persistent. We should implement better UX by considering local storage or cookies, and doing so by implementing existing industry best practices in regards to using Google OAuth2.

If you do end up using Render.com for deployment. The setup/process is pretty similar to Heroku for Git based deployment

Reduce clicks to connect Calendar by having 2-in-1 creation of user account and not having to log in to connect calendar.

Eg. Research how sites like https://zapier.com/sign-up do it.

We are using Tailwind CSS utility-first CSS framework to reduce time styling website and allow to focus more on backend.
https://tailwindcss.com/docs/guides/create-react-app

Install all required NPM packages for React routing and set up the basic routes needed for this project. Create placeholder components to use for each route.

We need to configure Google Cloud app to production urls after deploying to production with #26 and #27

Error page

• Hyper UI 404 not found simple component: https://www.hyperui.dev/components/application-ui/error-pages#component-1

  

Filter users based on their availability, using availability set in #19

Your task is to set up the architecture for the client side of our application:

Create a React app.

Install any required dependencies.

Create a folder structure for the client side of your app.

Create a GitHub repo, and push this code to the repo.

Share the repo link with your team so that they are able to clone the project.

We need to deploy n8n so it's accessible when we deploy app backend #26

Currently n8n was installed locally in global mode with npm install n8n -g per https://docs.n8n.io/hosting/installation/npm/
and data files live on %USERPROFILE%\.n8n\config

Options that exist:

1. easier seems to be 1 click official supported Heroku https://docs.n8n.io/hosting/installation/server-setups/heroku/ but Heroko is a paid service
2. use free Render, can check https://github.com/ready4mars/n8n-render

As a linguist I need to get confirmation my calendar selection have been saved, and a clearer cta when I'm done.

As part of this work, we will:

• Set up boilerplate to connect Node.js to Airtable DB following guides such as this one

• Define Users DB schema in Airtable

• Create/update users after login and upon saving calendars

Purge CSS: In production, use the built-in Purge CSS feature of Tailwind CSS to remove unused styles and optimize your CSS file size for better performance.

Guides:

• Compress size of tailwind.css (Production ready): https://dev.to/thecoderishi/quick-start-with-tailwind-css-334n

• Trim the file size: https://flaviocopes.com/tailwind-setup/

• Create purged and minified css: https://www.tailwindtoolbox.com/setup

Create the footer component. Make sure that it is fully responsive and works across all devices and in between breakpoints.