0% found this document useful (0 votes)
34 views24 pages

Aayush Report

This document describes a project to build an online web meeting platform using React.js and Node.js. The platform will offer features like screen recording, an online integrated development environment, and collaborative document editing similar to Google Docs.

Uploaded by

mkz01041
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
34 views24 pages

Aayush Report

This document describes a project to build an online web meeting platform using React.js and Node.js. The platform will offer features like screen recording, an online integrated development environment, and collaborative document editing similar to Google Docs.

Uploaded by

mkz01041
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

"SecureTrade: Blockchain Solutions for GST and Letter of Credit

Transactions with Escrow"

A report submitted in the fulfilment for the award of the degree

of Bachelor of Technology

in

Computer Science and Engineering

By

Aayush Kumar(2020BCS-002)

And

Anuj Pingua(2020BCS-012)

Under the Supervision of


Dr. Amrendra Singh Yadav

Atal Bihari Vajpayee


Indian Institute of Information Technology
and Management, Gwalior-474015
Certificate
We hereby declare that the B.Tech Project(BTP) report entitled "SecureTrade: Blockchain
Solutions for GST and Letter of Credit Transactions with Escrow" at ’ABV-IIITM’ in
fulfillment of the requirement for the award of the degree Bachelor of Technology in Com-
puter Science and Engineering and submitted to the institution is a result of our own
work and has been carried out during our B.Tech Project(BTP) , from January 2024 to
March 2024 under the supervision of Dr. Amrendra Singh Yadav. We affirm that all the
information presented in this report is true and accurate to the best of my knowledge.
Any external sources of information used in this report have been properly cited and
referen.

Date: Signature of Candidate

This is to certify that the above statement made by the candidates is correct to the best
of my knowledge.

Date: Signature of Mentor


Acknowledgement

We would like to express our sincere gratitude to Dr. Amrendra Singh Yadav for his in-
valuable guidance, support, and supervision throughout the development of our project,
"SecureTrade: Blockchain Solutions for GST and Letter of Credit Transactions with Es-
crow." His expertise and insights have been instrumental in shaping our understanding of
blockchain technology and its application in financial services.

We would also like to thank his PHD Scholars for their assistance and cooperation during
the course of this project. Their feedback and suggestions have been immensely valuable
in refining our ideas and improving the quality of our work.
Lastly, we would like to express our appreciation to the institution for providing us with
the opportunity to undertake this project and for their support throughout the B.Tech
Project period.
Abstract

This report introduces a smart online meeting platform made with React.js and Node.js.
It’s a toolbox for modern interaction, offering screen recording, a coding space, and a
clever search tool like Google. It fits both during and after COVID-19 times.
In COVID-19 days, it became a lifeline for staying connected. React.js made it easy to
use, while Node.js kept things happening in real-time. Post-COVID, it’s still a global
meeting hub.

**Additional Features **
1. Screen Recording: Keep sessions for later.
2. Online Coding: Code together in meetings.
3. Google-Style Search: Find things while talking.

COVID or not, it’s about making things better. This project shows what React.js and
Node.js can do. The report explains how it works and why it matters, like a peek into
the future of online gatherings.
Contents

Certificate ii

Acknowledgement iii

Abstract iv

1 Introduction 1
1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 Literature Review 4
2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3 Solution Approach (Method and Materials) 7

4 Results and Inferences 11

5 Conclusion And Future Work 17


5.1 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
5.2 Future Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

6 Reference 19

v
1
Introduction

1.1 Introduction

Welcome to the world of digital connectivity where virtual interactions have become an
essential part of our lives. In this exciting project, we’re embarking on a journey to create
an exceptional online web meeting platform that goes beyond the basics. Using the power
of React.js and Node.js, we’re crafting an intuitive space for productive conversations and
creative collaborations.
With a focus on simplicity and attractiveness, our project introduces a host of additional
functionalities, including screen recording, an online integrated development environment
(IDE), and a Google Docs collaborative clone.
With a focus on simplicity and attractiveness, our project introduces a host of additional
functionalities, including screen recording, an online integrated development environment
(IDE), and a Google Docs collaborative clone.

1
1.2 Objective

1.2 Objective

Empower Your Experience: Our goal is to make your virtual meetings a breeze, providing
a platform that’s easy to navigate and engage with.
Seamless Sharing: Say goodbye to clunky interfaces. With React.js, we’re designing an
interface that adapts to your needs and ensures a smooth user experience.
Connect Face-to-Face: Through the magic of real-time audio and video streaming, we’re
enabling you to connect face-to-face with colleagues, friends, and family, no matter where
you are.
Chat Your Way: Whether you want to share an idea or just have a quick chat, our real-
time chat feature lets you communicate effortlessly.
Capture Moments: With the added ability to record your meetings, you won’t miss a
thing. Capture important discussions and revisit them whenever you need.

Code Together: Ever wished you could code together, even when miles apart? Our online
integrated development environment (IDE) makes collaborative coding a reality.
Collaborate Like a Pro: Get ready for a Google-like experience where you can collaborate
on documents and ideas in real-time, just like you’re sitting around a table.

From COVID-19 to the Future:


The pandemic brought about a new way of living, emphasizing the importance of virtual
connections. Our platform answers that call:
During COVID-19 (Incovid-19): Our project caters to the immediate need for effective
online communication when physical meetings aren’t possible.
After COVID-19: Even as things return to normal, our platform continues to be your
reliable companion. It’s not just about necessity; it’s about enhancing interactions for the
long haul.

2
1.2 Objective

This project isn’t just about meetings. It’s about making those meetings count, trans-
forming them into vibrant discussions and productive collaborations. With React.js and
Node.js, we’re creating an inviting digital space that’s ready to empower your interactions,
whether in the midst of a pandemic or beyond. Get ready to meet differently!

Figure 1.1: Create Meeting

3
Literature Review
2
As of my last knowledge update in September 2021, I can provide you with a literature
review template for your described topic. However, please note that there might be new
developments or research beyond that date. You can use this template as a starting point
and incorporate more recent sources and findings if available.

2.1 Introduction

Online web meeting platforms have gained significant popularity, especially with the
rapid growth of remote work and virtual communication. This literature review aims to
explore the utilization of React.js and Node.js in developing an online web meeting plat-
form with extended features such as screen recording, an online Integrated Development
Environment (IDE) using Compilex, and a Google Docs-like collaborative document
editing.

4
2.1 Introduction

1. Online Web Meeting Platform:

React.js and Node.js have emerged as powerful tools in web development due to their effi-
ciency and flexibility. React.js is a JavaScript library for building user interfaces, providing
a component-based architecture that allows developers to create reusable UI components.
Node.js, on the other hand, is a runtime environment that enables server-side JavaScript
execution. The combination of React.js for front-end development and Node.js for back-
end development offers a seamless, full-stack development experience.
Online Meeting Platform Features
1. Real-time Communication: Web meeting platforms facilitate real-time audio and video
communication, enabling participants to interact as if they were in the same physical
space.
2. Chat and File Sharing: Many platforms include text-based chat functionality along
with the ability to share files, enhancing collaboration during meetings.
3. Screen Sharing: Screen sharing allows participants to showcase their screens to others,
enabling presentations, demonstrations, and collaboration on shared content.
Additional Functionality:
Screen Recording Using RecordRTC:
RecordRTC is a JavaScript library that provides APIs for recording audio and video
streams from a user’s device. It can be used to implement screen recording functionality
within the online meeting platform.
Key Features of Screen Recording:
Capture the user’s screen activity during the web meeting.
Record audio and video simultaneously or separately.
Offer options for selecting specific application windows or the entire screen.
Allow users to start, pause, resume, and stop recording.

5
2.1 Introduction

Online IDE using Compilex


1. Code Collaboration: An online IDE powered by Compilex can allow multiple users to
collaboratively write, edit, and run code in real-time, making it suitable for programming
workshops, coding interviews, and team coding sessions.
2. Instant Feedback: The IDE can offer immediate feedback on code compilation and
execution, aiding developers in identifying errors and debugging more efficiently.
Google Docs-like Collaborative Document Editing
1. Real-time Editing: Just as in Google Docs, real-time collaborative document editing
can enhance the meeting platform’s utility by enabling multiple participants to work on
the same document simultaneously.
2. Version Control: Implementing version control features ensures that changes are
tracked and can be rolled back if needed, maintaining the integrity of the collabora-
tive editing process.
Conclusion
The integration of React.js and Node.js into an online web meeting platform can yield a
feature-rich solution for remote communication and collaboration. The addition of func-
tionalities such as screen recording using RecordRTC, an online IDE powered by Compilex,
and collaborative document editing enhances the platform’s versatility and utility.
As technology continues to advance, the capabilities of online meeting platforms are likely
to expand even further, providing more seamless and immersive virtual collaboration ex-
periences.

6
Solution Approach (Method and
3
Materials)

Creating an online web meeting platform with features like screen recording using
RecordRTC, an online IDE using Compilex, and a Google Docs clone involves several
components and technologies. Here’s a high-level solution approach for building this plat-
form using React.js and Node.js:
1. Project Setup:
- Set up a Node.js environment for the backend.
- Create a React.js application for the frontend.
- Use npm or yarn for package management.
2. Frontend Development:
2.1 Web Meeting Interface:
- Use React.js to create a user-friendly web meeting interface.
- Implement components for video conferencing using WebRTC libraries like ‘simple-peer‘
or ‘twilio-video‘.
- Incorporate features like video/audio calling, screen sharing, and chat functionality.

7
2.2 Screen Recording:
- Integrate the RecordRTC library for capturing screen recordings and audio.
- Create a component for screen recording controls (start, stop, pause, resume).
- Save recorded videos on the server or cloud storage (e.g., AWS S3).
2.3 Online IDE (Compilex):
- Develop a code editor component using a library like ‘react-ace‘ or ‘monaco-editor‘.
- Implement the Compilex library for compiling and executing code snippets.
- Support multiple programming languages with syntax highlighting.
- Display the output of compiled code in a separate panel.

2.4 Google Docs Clone:*


- Create a collaborative text editor using libraries like ‘quill‘ or ‘slate‘.
- Implement real-time synchronization of text changes among participants using Web-
Sockets (Socket.io).
- Add features like text formatting, sharing, and collaborative editing.

3. Backend Development:

3.1 WebRTC Signaling:


- Set up a Node.js server for WebRTC signaling using libraries like ‘socket.io‘ or ‘simple-
peer‘.
- Handle peer connections, negotiation, and media streams.
3.2 Screen Recording Backend:
- Create endpoints for starting, stopping, and managing screen recordings.
- Use middleware for authentication and authorization.
- Save recorded videos to the server or integrate cloud storage services.

8
3.3 Compilex Backend:
- Implement API endpoints to receive code snippets and compile/execute them using the
Compilex library.
- Manage different programming languages and their execution environments.
3.4 Real-time Collaboration Backend:
- Set up WebSocket communication using ‘socket.io‘ for real-time collaboration in the
code editor and text editor.
- Handle synchronization of text changes and user interactions.
4. Data Storage:
- Use a database (e.g., MongoDB, local storage) to store user profiles, meeting details,
recorded videos, and collaborative documents.
5. Additional Functionalities:
- Implement user authentication and authorization (JWT, OAuth, etc.).
- Allow users to schedule and manage meetings.
- Provide a dashboard for users to access their recorded videos and collaborative docu-
ments.
- Enable user profiles and settings management.
6. Deployment:
- Deploy the backend on a cloud platform (e.g., AWS, Heroku).
- Host the frontend on a static file server or a service like Netlify or Vercel.
7. Testing and Optimization:
- Conduct unit testing and integration testing for both frontend and backend components.
- Optimize the application for performance and responsiveness.
8. Security Considerations:
- Implement secure communication (HTTPS) for both frontend and backend.
- Sanitize user inputs to prevent XSS and other security vulnerabilities.
- Follow best practices for user authentication, authorization, and data protection.

9
9. Continuous Development:
- Implement a CI/CD pipeline for automated testing and deployment.
- Regularly update and maintain dependencies to ensure security and compatibility.

Figure 3.1: Block Diagram

10
Results and Inferences
4
It sounds like you’re interested in discussing the results and inferences of an online web
meeting application developed using React.js and Node.js. Additionally, you’ve men-
tioned some additional functionalities like screen recording using RecordRTC, an online
integrated development environment (IDE) using Compilex, and a Google Docs clone.
Let’s break down each component and its potential implications:
1. Online Web Meeting Application using React.js and Node.js:
Developing an online meeting application using React.js for the frontend and Node.js for
the backend is a common choice due to their efficiency and flexibility. The choice of these
technologies enables real-time updates, seamless user interactions, and scalability. The
application would likely involve features like video conferencing, text chat, and possibly
file sharing.

Results and Inferences:


- Positive user experience due to real-time interactions and dynamic UI updates.
- Scalability could be achieved through the use of Node.js, handling a large number of
concurrent users.

11
- Smooth and responsive UI contributes to enhanced user engagement.
- Potential challenges could include browser compatibility, security concerns, and the need
for efficient data synchronization.

Figure 4.1: Meet Join

2. Screen Recording using RecordRTC:


Integrating RecordRTC for screen recording within the web meeting application is a valu-
able addition. Users could record their meetings for future reference or sharing with others.

Results and Inferences: - Enhanced collaboration as users can record and revisit
important discussions.
- Useful for educational purposes, creating tutorials, or documentation. - Resource-
intensive process; careful management is required to ensure smooth recording without
affecting overall performance.
- Potential challenges include supporting various platforms and devices, as well as man-
aging storage and data privacy concerns.

12
Figure 4.2: Screen Recording

3. Online IDE using Compilex:


Including an online IDE (Integrated Development Environment) like Compilex allows par-
ticipants to collaborate on code in real-time during web meetings. This is particularly
useful for technical discussions and coding sessions.

Results and Inferences: - Streamlined collaborative coding and debugging during


meetings.
- Facilitates immediate feedback and learning.
- May require robust security measures to protect sensitive code and data.
- Integration challenges could involve synchronizing code changes across participants and
handling different programming languages.

13
Figure 4.3: Online code in Web Meet

4. Google Docs Clone:


Creating a collaborative document editing feature similar to Google Docs within the
application adds a layer of versatility, enabling participants to work on shared documents
simultaneously.
Results and Inferences: - Seamless real-time collaboration on documents during
meetings.
- Improved productivity by allowing participants to take notes, brainstorm, and collabo-
rate effectively.
- Security measures are crucial to protect document content and prevent unauthorized
access.
- Proper synchronization mechanisms are essential to avoid conflicts in document editing.

14
Figure 4.4: Google Clone in Web Meet

Inferences based on the above functionalities: - Overall, the application aims


to enhance collaboration and engagement during online meetings.
- The success of the application heavily relies on a smooth user experience, responsive UI,
and robust real-time synchronization.
- Challenges include ensuring security, privacy, and proper management of resource-
intensive functionalities like screen recording.
- User feedback and testing would be vital in refining the application and addressing any
usability or performance issues.

15
Figure 4.5: Whiteboard in Web Meet

16
Conclusion And Future Work
5
5.1 Conclusion

Presenting an advanced online web meeting solution powered by React.js and Node.js,
enriched with compelling functionalities. This platform revolutionizes virtual collabora-
tion, merging technology for optimal results.
Harnessing RecordRTC, it offers seamless screen recording during online meetings, en-
hancing information sharing and idea exchange. Concurrently, Compilex’s online IDE
facilitates collaborative coding, enabling real-time code creation, debugging, and learn-
ing.
Mirroring Google Docs, the platform enables multiple users to collaboratively edit docu-
ments, fostering cohesive teamwork. Security, speed, and user experience remain priorities
for future development, ensuring a robust and user-friendly environment.
In a virtual landscape, this platform reshapes remote collaboration. Through React.js and
Node.js, coupled with screen recording, collaborative coding, and shared document edit-
ing, it bridges geographical gaps and sets new standards for seamless, productive online
interactions.

17
5.2 Future Work

5.2 Future Work

In the coming journey of our online web meeting platform, powered by React.js and
Node.js, we have exciting horizons to explore.
1. Enhanced Experience: Our focus remains on refining user interactions, ensuring smooth
navigation, and an intuitive interface for seamless communication.
2. Mobile Accessibility: We’re committed to expanding device compatibility, making the
platform equally accessible and efficient on smartphones and tablets.
3. Fortified Security: Strengthening security measures tops our list, with end-to-end en-
cryption for all activities, ensuring data privacy.
4. Speed and Performance: We’re dedicated to optimizing loading times and overall re-
sponsiveness, providing a swift and engaging user experience.
5. Innovative Flair: Expect novel features such as augmented reality integration for im-
mersive collaboration and voice-controlled commands for hands-free utility.

6. Global Reach: Multilingual support is on the horizon, enabling users worldwide to


engage in their preferred language effortlessly.
7. AI-Powered Assistance: AI-driven language translation and content suggestions will
enhance real-time communication and productivity.
8. Personalized Touch: We’re considering customizable themes, layouts, and notifications
to cater to diverse user preferences.
9. Community Connection: User forums will foster a vibrant community, encouraging
knowledge exchange and mutual support.

In essence, the road ahead promises innovation, simplicity, and captivating appeal.
With React.js, Node.js, screen recording, online coding, and document sharing, our plat-
form is poised to reshape how individuals connect, collaborate, and thrive in the digital
realm.

18
6
Reference

1. Video SDK
AndroidFlutteriOSLinuxmacOSReact NativeWebWindows
Meeting SDK
2. AndroidiOSmacOSWeb (Component View)Web (Client View)WindowsElectron Zoom
Apps JS SDK Contact Center AndroidiOS
3. Screen Recording with RecordRTC:
- The [RecordRTC website](https://recordrtc.org/)
4. Online IDE with Compilex:
- Compilex might not be a widely recognized tool, so you may want to explore more
common online code editors or IDEs with collaboration features. Tools like [CodeSand-
box](https://codesandbox.io/) or [Repl.it](https://replit.com/) might have resources and
documentation on collaborative coding features.
5. [ShareDB](https://github.com/share/sharedb) (a real-time database backend) and
[Quill](https://quilljs.com/) (a rich text editor with collaboration features).

19

You might also like