Visionboard - Dashboard with Google Sheets Integration

This project is a web-based dashboard that integrates with Google Sheets to display and manage data dynamically. It supports user authentication, real-time updates, and dynamic column additions on the dashboard.

Visit Now 🚀

🖥 Tech Stack

Frontend:

       

Backend:

     

Deployed On:

📌 Screenshots:

🚀 Getting Started:

Before you begin, ensure you have the following installed on your local machine:

• Node.js (v14 or later)
• npm (v6 or later) or Yarn (v1 or later)
• Docker

Installation & Setup

Prerequisites

• Node.js & npm
• MongoDB
• Google Cloud Account (for Sheets API)

1. Clone the Repository

git clone https://github.com/zivanika/visionboard.git
cd visionboard

2. Setup Backend

cd backend
npm install

Create a .env file in the backend/ directory and add the following:

PORT=8000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_secret_key
GOOGLE_PRIVATE_KEY = your_google_private_key (for google sheet api you can get it from api and services library. search for google sheet)

Run the backend:

npm start

---

3. Setup Frontend

cd frontend
npm install or npm install --leagacy-per-deps

Create a .env.local file in the frontend/ directory:

NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
NEXT_PUBLIC_API_WS_URL = ws://localhost:8000

Run the frontend:

npm run dev

---

© 2025 Harshita Barnwal