Git Product home page Git Product logo

meeting-scheduler's Introduction

Meeting Scheduler

Table of Contents

Overview

This project main goal was to make a multi-user calendar to arrange meetings with clients.

A live demo is available.

Built With

CSS3 HTML5 Typescript

React React Router

Bootstrap

Firebase

ESLint Prettier Visual Studio Code

Git GitHub

Jest

Features

  • Internationalization for easy translations to other languages, mainly portuguese.
  • Authentication with email or Google identity provider.
  • Each user can only access its own clients.
  • users and clients are stored in Firebase Firestore.
  • CI/CD pipeline to work with GitHub Pages.

Contact

You can find me in LinkedIn

Instructions to Run ๐Ÿƒ

This project was bootstrapped with Create React App. Hence, many scripts are the same.

Machine Preparation

In order to emulate Firebase Backend locally you will need: OpenJDK, Firebase Tools, Node.js.

In ubuntu to install OpenJDK do:

sudo apt update && sudo apt install openjdk-18-jdk -y

In ubuntu to install Node.js:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Then do:

nvm install node
nvm use node

In ubuntu to install Firebase Tools:

npm install -g firebase-tools

Then to configure Firebase Tools:

firebase login

Project Cloning

Clone this repository

git clone https://github.com/SeuRonao/meeting-scheduler.git

Install the dependencies

npm install

Running Local Version

With the above part done you can, from the root directory of the project use the following scripts:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

The app will automatically try to connect to the Firestore Emulator

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

GITHUB Actions already take care of building and deploying the app on every push/merge to the main branch. There is no need to use this script unless it is to test locally.

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run deploy

GITHUB Actions already take care of building and deploying the app on every push/merge to the main branch. There is no need to use this script unless it is to test remotely something.

This builds and deploy the CURRENT version of the project to gh-pages branch on GitHub.

firebase emulators:start

Start the emulators to allow the local app to connect.

If you want persistence between sessions of the emulation you can use

firebase emulators:start --import=dummy_data --export-on-exit

meeting-scheduler's People

Contributors

seuronao avatar dependabot[bot] avatar

Watchers

 avatar

meeting-scheduler's Issues

Update Security for Firebase

Do not allow unauthenticated users read/write any documents.
Do not allow authenticated users to read/documents that are not theirs.

Deploy

Deploy to Oracle Cloud using CI/CD pipeline with GitHub actions.
Use secrets to keep the server safe from malicious intent.

Loading on Every Refresh

Currently every page refresh triggers loading on useAuthState hook.
This is very annoying from the UX perspective.

Infinite Fetch Requests when Updating a Client

While update client modal is showing the component makes fetch requests to the firestore in an infinite loop.
The proper behaviour is only doing it once when the modal first shows up.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.