- This project creates a centralized dashboard where business owners can manage the reviews across all their business locations in one place using Google MyBusiness API.
- It features a homepage allowing users to quickly reply to the latest reviews via an intuitive UI.
- Additionally, a reviews page displays more information about reviews, including modification dates.
- Reviews are color-coded to differentiate between positive, negative, or neutral feedback.
- Google Oauth implementation for seamless login.
- Frontend: React.js
- Backend: Flask
- Styling: Tailwind.css
- Deployment: Docker, Terraform and Microsoft Azure
- The main challenge in this project was setting up Oauth.
- Making sure the Oauth token is always secure by encrypting it during transport from client to server or vice versa and the means of passing it to the server using headers.
- Understanding how oauth works was key to overcoming it along with Google's Documentation, tutorials and even Stackoverflow.
- As there was no access to Google's My Business API, there was a need to create a mock API that replicates responses that the original API would send.
- To implement the actual API, we would have to have some way to test it. Even if we follow the docs, we cannot guarantee that there won't be any issues.
- Features
- Add analytics and visualisationbased on review data
- Allow more filtering options for reviews
- Enhance UI/UX (e.g., subtle animations)
- Implement caching
- Allow advanced users to run queries against the data
- Dev side:
- Secure the server with SSL
- Implement visualization using chart.js or similar modules
- Autoscaling
- Strengthen security using a proxy server to access the client for isolation
- Conduct extensive testing
- Sign in with google by clicking the icon at the bottom of the navbar.
- On successfull sign-in, one can see the latest reviews in the home page. The home page has the quick reply option which can be toggled by hovering over it.
- From there the user can post a reply or delete a previous reply.
- If a user want to see more detailed information about each review, then they can go to the reviews tab. This tab also allows filtering by available locations.
- To logout, click the very same user icon at the bottom of the navbar
- Currently anyone who logs in with a google acc can view/modify/reply to reviews as data is fetched from a json which mimics the response format of google API.
- Go to the Google Cloud Console.
- Select or create a new project where your React app will be registered.
- Navigate to "APIs & Services" > "Credentials".
- Configure OAuth consent screen if prompted. (Fill in mandatory details only)
- Click on "Create credentials" and choose "OAuth client ID" from the dropdown menu.
- Select "Web application" as the application type.
- Give it any name and create.
- If setting up for local development:
- Add
http://localhost:5173(or any port of your choice) to the Authorized JavaScript origins. - Add
http://localhost:5000/callback(or any port of your choice) to the Authorized redirect URIs. - Else, ad A2FB d URLs/IPs for the frontend deployment.
- Add
- Download the credentials JSON file and rename it to
client_secret.json. - Copy the
client_secrets.jsonfile into the API folder. - For actual API usage, enable relevant Business APIs under "Enabled APIs and services."
- Configure environment variables for the API/server:
- Create a
.envfile in the API folder. - Refer to
.env-dummy.txtand fill in required values for:- DEBUG (true for debug mode in Flask and test routes)
- CLIENT_ID (copy from
client_secrets.json) - SECRET_KEY (copy from
client_secrets.json) - FRONTEND_URL (URL of the client with port)
- BACKEND_URL (URL of the server with port)
- ALGORITHM (set to HS256 for encrypting/decrypting JWT)
- Configure environment variables for the client:
- Create a
.env.localfile in the client folder. - Set
VITE_BASEAPI_URLto the same value asFRONTEND_URLabove.
- Proceed to any of the deployment options below.
-
- Prerequisites (older versions may work but cannot guarantee)
- Python 3.11+
- Node v20 +
- Npm v8+
- Steps
-
Navigate to /client and install dependencies
cd client npm install -
If everything was successful, you can now test if the client works by running npm run dev.
-
Going to the output URL, you'll be able to access the React client. We now have to set up the Flask server to complete deployment
-
Currently, we are running a development server with support for hot reload. To build for production, we can use npm run build followed by npm run preview
-
Navigate to /API and install dependencies using
pip install -r requirements.txt
-
Use
python3 -m flask --app apprun --debug to run the server in development mode. -
Now you should have the client and server running successfully.
-
- Prerequisites (older versions may work but cannot guarantee)
-
- Methods to Run this Project
- Prerequisites
- Docker engine installed and running
- Steps
- Navigate to client folder
docker build -t "tag/name of your choice" . # Eg: docker build -t myclient .
- Run the client container
docker run -p <host port>:<client port (of container)> --env-file ./.env.local -d "chosen tag" # Eg: docker run -p 80:3000 --env-file ./.env.local myclient
- Navigate to the API folder
docker build -t "tag/name of your choice" . # Eg: docker build -t myclient .
- Run the server container
docker run -p <host port>:<client port (of container)> --env-file ./.env -d <chosen tag> # Eg: docker run -p 5000:5000 --env-file ./.env -d myserver
- The Dockerfiles are configured to deploy a production environment. To set up for deployment, we would have to modify the Dockerfiles to use the dev run commands and also mount our local files to the Docker container using -v source_path:dest_path in the run command
- Navigate to client folder
-
Prerequisites:
- Docker engine installed and running
- Steps:
- Navigate to the root folder (restaverse)
- The Docker Compose file essentially just builds and runs the individual Dockerfiles with client and API.
- Execute the following command:
docker-compose -f "docker-compose.yaml" up -d --build
-
Prerequisites:
- Valid Microsoft Azure subscription
- Az CLI installed on the local machine with auth completed
- Terraform downloaded and added to PATH
Steps:
- Follow the steps mentioned in
infra/deploy_with_docker_sample.shand configure accordingly, resulting in a file calleddeploy_with_docker.sh. This script installs Docker in the VM, clones the git repo, creates the env files, and uses Docker Compose to run the entire project. - Configure the
sample.tfvarsfile similarly. Rename the file or add to.gitignoreto avoid mistakely commiting it. Refer tovariables.tffor help/hinting. - Validate the deployment by running:
terraform plan --var-file "your var filename" - Execute the deployment by running:
terraform apply --var-file "your var filename"
- This is a very basic method of deploying to the cloud by simply running Docker on a VM.
- We can also make use of other PaaS cloud services (such as Azure ACI, AKS) and configure autoscale based on goals and budget.