Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

FINAL YEAR INDUSTRIAL TRAINING

(Jan-June 2024)
Mid- Term Progress Report

This report, in the form of a template, has been specifically designed for B.E (C.S.E) students
attending Industrial Training during 8th semester at respective Organizations/Industry/R&D
Institutes.

Every student is required to do the following:

1. Complete all the sections of this template
2. Get it certified by your Industry Supervisor/HR Manager.
3. Submit 01 hardcopy to the assigned faculty member on or before the day of
evaluation:
4. Email PDF/MS Word document at link shared in group.

Note:
1. Use UK English
2. There should be NO grammatical or spelling mistakes
3. Submission after due date will not be accepted
4. For more information, contact TPC (CSE).

- Read the above carefully and attach this page at the end of your report before submission -

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh

Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

1. Project identification

1.1 Name of Student SAYAN BAKSHI

(Roll No.)

1.2 Name of CONTENTSTACK

Organization/
Industry/R&D
Institute
1.3 Project title VISUAL EDITOR

1.4 Name of
Technical 1.4.1 Supervisor:
Supervisor(s)/ Name: Nikhil Jain
Manager(s) Designation: Chief Architect
(As officially assigned
at industry) 1.4.2 Supervisor (if any):
Name:
Designation:

1.4.3 Supervisor (if any):

Name:
Designation:

1.5 CERTIFICATE

“This is to certify that the Industrial Training work until mid-year evaluation
held on ___________________, titled as stated in Sec. 1.3, executed (as till
date) by the student group mentioned in Sec. 1.1, has been found satisfactory (Signature of
and every section of this report is reflecting the same.” Supervisor &
date)

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh

Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

2. Project insights

2.1 Thematic ☐ Research ☑ S/W Development ☐ Industry Automation

area(s) ☐ Institute Automation
☐ Other (please specify):

Sub-areas (optional):
☐ Mobile Programming ☑ Web Programming ☐ HCI
☐ Data Mining ☐ Networking ☐ Image Processing
☐ Other (please specify):

2.2 Keywords
Headless Content Management System, Visual Editor,
(Max. 3 to 6. Don’t use Microfrontend, Unit and End-to-End Testing, Version Control
jargon or abbreviation) Systems

2.3 Utilization ☐ Domestic ☑ Commercial ☐ Industrial ☐ Scientific

scope ☑ Global ☐ National ☐ State ☐ District
☐ GNDEC ☐ University ☐ External ☐ Sponsor
☐ Other (please specify):

2.4 Major task(s) ☐ Modeling ☐ S/W Designing ☐ Fabrication ☑ Testing

☐ Validation ☑ Optimization ☐ Consultancy document
(At least one should be ☐ Physical tool(s) development ☑ Software development
checked) ☐ Research & Development
☐ Others (please specify):

2.5 Software ☐ MS Excel ☐ VBA ☐ C/C++/C# ☐ FORTRAN

packages, ☐ MATLAB ☐ Maple ☐ Mathematica ☐ EES
tools and ☐ AutoCAD ☐ Pro-E ☐ CATIA ☐ Adams
programming ☐ ANSYS ☐ Fluent ☐ CFX ☐ SPICE
languages ☐ TRNSYS ☐ HAP ☐ WindFarmer ☐ RETScreen
☐ MiniTab ☐ SPSS ☐ SAS ☐R/S
(Software piracy is strictly ☐ VB ☐ Java ☐ PHP
prohibited.) ☐ ASP/.NET
☐ Oracle ☐ SAP ☐ MySQL ☐ SQL
☐ Mobile phone development (please specify):

☑ Others (please specify):

☑ Javascript ☑ Vitest ☑ Jest ☑ Playwright
☑ Git ☑ Github ☑ Atlassian

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh

Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

3. Relevant study material

3.1 Undergrad.
courses Course code and title

(Must be from Information 1. CS 404 | Software Engineering

Technology/ Computer
Science Engineering or other
Applied Areas. Add more
rows if required.) 2. CS 402 | Web Technologies

3. CS 454 | Software Engineering (Practical)

4. CS 452 | Web Technologies (Practical)

5.

6.

3.2 Books and

Reference # Title, edition, publishing year and
other printed (if any) authors’ names
material
(Must be easily accessible. Software Engineering by Ian
1. [1]
Add more rows if required.) Sommerville

Web Enabled Development

2. [2]
Application by Ivan Bayross

3.

4.

5.

6.

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh

Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

3.3 Standards
Name, purpose, source and other details
and
databases MongoDB for non-relational data :
(Must be easily accessible. 1.
https://www.mongodb.com/
Add more rows if
required.)

2.

3.

4.

3.4 Online / web

URL of specific web page
resources
(Must be easily accessible. MERN Stack (MongoDB, Express.js, React, Node.js):
Search engines, 1.
social blogs, and https://www.mongodb.com/mern-stack
unauthentic resources
should not be
mentioned. Any 2. GraphQL: https://graphql.org/
reliable URL
shortening service
may be used. Add
more rows if 3. Webpack: https://webpack.js.org/
required.)

4.

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh

Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

4. Objective / Scope
Write the objective/scope that has been understood from project title and meetings with technical advisor(s) so far. Title and
scope of project must be elaborated in detail. Maximum 500 words.

Contentstack is a fully automated composable digital experience platform along with the
headless content management system. My team works on the visual experience for the
customers, and our current scope incorporates the projects such as Visual Editor, Timeline
API, Auth for Academy, etc.

I'm specifically working on Visual Editor. This tool lets you improve the live preview of a
website by using a visual editor. You can make changes easily either by filling out a quick
form or by directly editing the content in the website preview. It's like a magic window that
shows your website, and any changes you make happen right there in real-time.

Visual Editor is built with React and uses advanced web development concepts like lazy
loading, queries, and states to make it work smoothly. It's a snazzy way to make your website
look just the way you want it to!

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh

Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

5. Expected outputs
List expected outputs of the project in discrete terms. Maximum 250 words.

● Get the project live in production before the end of internship.

● Ability to independently develop full stack projects.
● Active contribution to ongoing projects, demonstrating effective problem-solving
skills.
● Timely delivery of work, meeting project milestones and deadlines.
● Effective collaboration within the development team, contributing ideas and insights.
● Proficiency in version control systems, particularly Git.
● Clear and comprehensive documentation of code, APIs, and project-related
information.
● Competence in testing and debugging processes, ensuring error-free code.

6. Utilization
Describe target beneficiaries, target market, potential customers, etc. Maximum 250 words.

This project is a helpful tool for people using Contentstack, especially those who like using
the live preview feature. It's designed to make things smoother between Contentstack's main
service (headless CMS) and the website builder.

This is useful for users because it improves how they work with Contentstack. The project is
meant for businesses and individuals who rely on Contentstack to manage their content.
People who create content, market things, and build websites can benefit from it. The tool
makes editing content easier and makes sure the headless CMS and website builder work
together seamlessly, making Contentstack more user-friendly for everyone.

The project is supposed to help retain our customers from competitors like Contenful and
Wordpress who provide the two services separately, that is headless cms and website builder,
which are both going to be available at Contentstack after the project goes live.

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh

Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

7. Literature study / Data collection

Describe the topics and type of literature studied or collected for study, to define the project path and methodology.
Citations are recommended. Maximum 500 words.

In the context of developing the Visual Editor project, the literature study focused on key
aspects of software engineering and web development. The following topics were explored to
define the project's path and methodology:

● React and Web Development: Understanding React, a JavaScript library for

building user interfaces, played a pivotal role. Insights from React's official
documentation and community forums provided guidance on building dynamic and
interactive UIs efficiently.
● State Management with Zustand: The study delved into Zustand, a state
management library for React, to comprehend effective state management practices.
Citing resources from Zustand's official documentation aided in implementing robust
state management.
● Webpack and Bundling: Exploring Webpack, a web bundler, was crucial for
optimizing and bundling project assets. Citations from Webpack's documentation
influenced the implementation of efficient bundling strategies for project resources.
● Server State Management with React Query: The project leveraged React Query
for managing server state in React applications. Insights from React Query's
documentation contributed to enhancing data-fetching capabilities, resulting in a more
responsive user interface.
● Coding Standards with Prettier and ESLint: Adopting best coding practices was
facilitated by incorporating Prettier for code formatting and ESLint for static code
analysis. Citing resources from Prettier's and ESLint's official documentation guided
the setup and configuration of these tools to maintain consistent and clean code.
● Package.json Dependencies: The specified dependencies in the package.json file
were carefully selected to meet various development needs, including styling, testing,
and workflow. The literature study ensured that these dependencies align with
industry standards and best practices in software development.

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh

 Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

8. Methodology
Concisely list down the principle milestones and associated deliverables that must be achieved to accomplish the Training/project objectives. Add more rows if required.

Expected number
Percent
S. No. List of Training/Project milestones Deliverable(s) of days to
Completed
complete
1. EB-983: Visual Editor Bug Fixes ● Do unit and end to end testing, fixing bugs 120 70%
on the way.
● Get 100% coverage on the files that are
being gone through.
2. EB-987: Fix Over Fields ● Fix each field component rendering logic. 15 100%
● Make use of schema form components for
latest version.
3. ● Entry truncated values on rendering. 15 100%
EB-985: Truncate Entry

4. EB-940: Patch Event Data Load Repeat ● Patch event request from iframe for data 30 100%
load repeat.
5. EB-917: Core Editor ● Live preview sdk 150 20%
● Unit and E2E testing
● Graphql setup
● Rest setup
● Starter app integration (react, next, gatsby)

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh 7

Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

9. Executed work
Describe in detail the works along with the obtained results and deliverables that have been completed until now and how.
Note that very general information about topics is NOT required so try to be specific. The sequence, as already described in
Methodology (Sec. 8), should be followed as possible. Maximum 3 pages including equations, figures and tables etc.

EB-983: Visual Editor Bug Fixes

Conducted comprehensive unit and end-to-end testing for the Visual Editor, addressing bugs
identified during the testing process.

Executed bug fixes in the source code, with a goal to achieve 100% test coverage for the
modified files, as specified in the project's testing scripts.

Monitored and improved test coverage metrics using tools like Jest, as specified in the
"coverage" script in the package.json.

Progress: 70% completion.

EB-987: Fix Over Fields

Focused on fixing rendering logic issues associated with each field component within the
Visual Editor.

Incorporated the latest version of schema form components, as outlined in the project
dependencies ("dependencies" section in package.json), to ensure compatibility and leverage
the newest features.

Successfully completed the task with a 100% success rate.

EB-985: Truncate Entry

Implemented a solution to truncate entry values during rendering in the Visual Editor, as
indicated in the task description.

Ensured that the implementation adheres to the project's dependencies, such as React ("react"
and "react-dom") and other related libraries specified in the package.json.

Achieved 100% completion for the task.

EB-940: Patch Event Data Load Repeat

Addressed the issue of repeated data loading by patching event requests from the iframe, as
per the task description.

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh 8

Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

Focused on improving the efficiency of data loading processes by making adjustments to the
event handling logic.

Achieved 100% completion for the task.

EB-917: Core Editor

Developed the Core Editor functionality within the Visual Editor, addressing the
requirements outlined in EB-917.

Integrated a Live Preview Software Development Kit (SDK) to enhance the live preview
experience for users.

Conducted both unit and end-to-end (E2E) testing to ensure the reliability and functionality
of the Core Editor.

Implemented GraphQL setup for efficient data querying and manipulation, as specified in the
project's dependencies ("graphql").

Set up a REST API, utilizing technologies outlined in the package.json ("axios") for seamless
communication between the Visual Editor and server.

Integrated the Core Editor with starter applications built using React, Next.js, and Gatsby,
aligning with the project's commitment to flexibility and compatibility.

Progress: 20% completion, indicating work in progress toward achieving the defined
milestones.

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh 9

Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

10. Remaining work

Describe in detail the plans to execute remaining works. The sequence, as already described in Methodology (Sec. 8), should
be followed as possible. Maximum 500 words.

EB-983: Visual Editor Bug Fixes

Currently addressing bugs through unit and end-to-end testing to achieve 100% coverage for
the modified files. Progress stands at 70%, with remaining work consisting of the rest of the
files that need to be tested.

EB-940: Patch Event Data Load Repeat

Actively working on patching event requests from the iframe to prevent data load repeats.
Progress is at 40%, and most of the work here is taken in spike tickets as research is a
significant part of this.

EB-917: Core Editor

Currently developing the Core Editor, integrating a Live Preview SDK, conducting unit and
end-to-end testing, setting up GraphQL and REST, and integrating with starter apps (React,
Next.js, Gatsby). Progress stands at 20%, with only Live Preview SDK having being
completed.

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh 10

Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

11.References
Style “IEEE - Reference Order” should be followed for giving references of books, research papers, reviews, online
resources, databases, software manuals, figures and anything else cited in this report.

[1] https://engineering.futureuniversity.com/BOOKS%20FOR%20IT/Software-
Engineering-9th-Edition-by-Ian-Sommerville.pdf

[2] https://www.amazon.in/Commercial-Application-Development-JavaScript-In
cluded/dp/8183330088

12. Gantt chart

A detailed and neat Gantt chart should be attached separately after this page. Attached page
may be landscape but it should not have any page number, header and footer. Gantt chart
should be listing all the major and minor activities, indicating executed and remaining tasks,
along with the time spans. Make sure that the Gantt chart is reflecting all the Training
milestones as described in Sec 8-10.

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh 11

Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh 12

 Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

Evaluation by Faculty Member(s)

Please ✓ if work is satisfactory or 🗴 if work is not satisfactory and therefore requires a revision.

Remarks by Remarks by Faculty Remarks by Faculty

Section
Faculty Member Member(s) (if any) Member(s) (if any)
1. Technical Knowledge/
Project Assigned

2. Project insights

3. Relevant study
material

4. Objective/Scope

5. Expected outputs

6. Utilization

7. Literature study/Data
collection

8. Methodology

9. Executed work

10. Remaining work

11. References

12. Gantt chart

Overall performance

Signature and date

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh 13

Industrial Training 8th Semester – Mid-Term Evaluation – Progress Report

- This page intentionally left blank -

Department of Computer Sc. & Engg. – UIET, Panjab University, Chandigarh 14