Data Sync - Collaborative Data Visualization Platform

Data Sync is a powerful platform designed to revolutionize the way teams collaborate and visualize data. With seamless integration with Tableau, real-time collaboration features, and advanced data visualization tools, Data Sync empowers teams to unlock deeper insights, streamline communication, and drive better decision-making.

Features

Live Tableau Collaboration

Experience seamless collaboration with Data Sync's live Tableau integration. Instantly communicate, effortlessly share ideas, and collaboratively visualize insights with ease. With features like group chat and live cursor, you can interact in real-time with your team members, fostering a dynamic and engaging collaborative environment.

Real-Time Chats

Engage in real-time conversations with your team members using Data Sync's chat feature. Foster seamless communication and instant collaboration, whether you're brainstorming ideas, discussing insights, or coordinating tasks. Stay connected and productive with real-time messaging that keeps everyone on the same page.

Embedded Tableau Dashboard

Access and interact with dynamic data visualizations directly within Data Sync using our embedded Tableau Dashboard feature. Seamlessly integrate Tableau dashboards into your workflow, allowing you to analyze data, gain insights, and make informed decisions without ever leaving the platform. With Data Sync, you have all the tools you need to drive collaboration and innovation in one centralized location.

Getting Started

Client

1. Clone the Repository: Clone the client repository to your local machine:

git clone https://github.com/Gautam25Raj/data-sync

2. Install Dependencies: Navigate to the client directory and install dependencies using npm or yarn:

cd client
npm install

3. Start the Client: Start the client server by running the following command:

npm start

Note: The client will run at http://localhost:3000.

Server

1. Clone the Repository: Clone the server repository to your local machine:

git clone https://github.com/Gautam25Raj/data-sync

2. Install Dependencies: Navigate to the server directory and install dependencies using npm or yarn:

cd server
npm install

3. Configure Environment Variables: Set up environment variables required for the server. Refer to the Environment Variables below file for details.

4. Start the Server: Start the server by running the following command:

npm start

Note: The server will run at either http://localhost:5000 or http://localhost:8080, as specified in the .env file.

Now you have both the client and server components of Data Sync up and running. You can start collaborating and visualizing data seamlessly!

Project Folder Structure

Client: frontend

• app: Contains Next.js folder routes for the frontend.
• components: Houses frontend components used in the application.
• hooks: Stores custom React hooks utilized throughout the frontend.
• providers: Holds custom provider components such as AuthProvider, ReduxProvider, etc.
• public/assets: Contains images and other static assets used in the frontend.
• redux: Houses Redux store configuration and slices for state management.
• utils: Contains utility functions used in the frontend code.
• tailwind.config.js: Configuration file for Tailwind CSS.

Server: backend

• config: Contains database configuration files.
• controllers: Houses backend route controllers for handling requests.
• middleware: Stores backend middleware functions.
• models: Contains MongoDB models for data schema definition.
• routes: Houses all backend route definitions.
• utils: Contains utility functions used in the backend code.
• server.js: Entry point for the backend server.
• test.js: Contains tests for backend functionality.

Usage Examples

Onboarding to DataSync

User Sign Up

To sign up for Data Sync and access its collaborative data visualization features, follow these steps:

• Navigate to the Data Sync website.
• Fill out the registration form with your desired username, email address, and password.
• Click on the "Sign Up" button to proceed.
• An OTP (One-Time Password) will be sent to the email address you provided.

Verify Email with OTP

To verify your email address and complete the sign-up process, follow these steps:

• Check your email inbox for the OTP sent by Data Sync.
• Copy the OTP from the email.
• Return to the Data Sync website.
• Paste the OTP into the provided field on the verification page.

Accessing the Dashboard

Once your email address is verified, you can access the Data Sync dashboard to start collaborating on data visualization projects:

• Upon successful login/sign up, you'll be redirected to the dashboard.
• From the dashboard, you can initiate live collaboration channels, embed Tableau dashboards, and engage in real-time chats with your team members and contacts.

Live Tableau Collaboration

To initiate a live collaboration session with Tableau integration, follow these steps:

1. Click on Create Channel Button in the lefthand side.
2. Fill details to create channel. Your channel Name, Tableau public url and Add you contacts to channel.
3. Click on Create Channel to create ac channel.
4. Click on your new channel. It will open your tableau public and your channel group chat.
5. Click on start collab Button to start collaboration.
6. As team members join the session, you'll see their cursors and chat messages in real-time.
7. Use the live cursor feature to point out insights and discuss visualizations collaboratively.
8. You can also Share the collaboration link with your team members. It can be shown in the channel three dot menu.

Adding Tableau Dashboard

To integrate a Tableau dashboard into your Data Sync project, follow these steps:

1. Navigate to Dashboard: From the sidebar menu, click on the "Dashboard" option to access the dashboard section of your Data Sync account.

2. Click on "Connect to Tableau": Look for the "Add Tableau Dashboard" button and click on it to initiate the process.

3. Fill in the Form: A multi-step form will appear where you need to provide the following details:

   • Name: Enter a name for the site in Data Sync.
   • Tableau Username: Your Tableau username.
   • Tableau Client ID: Tableau connected app client ID.
   • Tableau Secret ID: Tableau connected app secret ID.
   • Tableau Secret Value: Tableau connected app secret value.
   • Tableau PAT (Personal Access Token) Name: Name of the Personal Access Token.
   • Tableau PAT Secret: Personal Access Token Secret.
   • Tableau API Base URL: Base URL of the Tableau dashboard.
   • Tableau Site Name: Tableau site name.

4. Create Site: After filling in the form, click on the "Create Site" button.

5. View Created Sites: Once the site is created, you will see a list of all created sites associated with your account. You can add more sites by clicking on the "Add Site" button.

6. Click on your site: Click on your site to connect with Tableau. Data Sync will establish a connection with Tableau and retrieve all existing projects.

7. Load Project: From the list of projects, click on any project to load it in Data Sync.

8. Edit Project: If needed, you can edit the project directly from within Data Sync by clicking on the "Edit" option.

By following these steps, you can seamlessly integrate Tableau dashboards into your Data Sync project, allowing for enhanced collaboration and data visualization capabilities.

Environment-Variables

Frontend (Client)

• NEXT_PUBLIC_BACKEND_URL: The URL of the backend server used by the frontend. Ensure it points to the correct route on the backend.

Backend (Server)

• PORT: The port on which the backend server runs.
• MONGO_SECRET: The MongoDB URI used by the backend to connect to the database.
• ABLY_API_KEY: The API key for Ably, a real-time messaging platform.
• ABLY_CIPHER_KEY: The cipher key for Ably, used for encryption and decryption of messages.
• JWT_SECRET: The secret key used for JWT (JSON Web Token) authentication and authorization.

License

This project is licensed under the MIT License - see the LICENSE file for details.