INDUSTRY ORIENTED TRAINING

SYNOPSIS REPORT
ON

DEVCONNECT
Submitted in the partial fulfilment of the requirement for the award of degree of

Bachelor of Technology
In

COMPUTER SCIENCE AND ENGINEERING

Batch

(2017-2021)

SUBMITTED TO:- SUBMITTED BY:

Er.Vinod Sharma(H.O.D /CSE) Sumit Aggarwal (1701467)

 ACKNOWLEDGEMENT

This is a humble effort to express our sincere gratitude towards those who have guided and helped us
to complete this project

A project is major milestone during the study period of a student. As such this project was a challenge
to us and was an opportunity to prove our calibre. We are highly grateful and obliged to each and
every one making us help out of problems being faced by us.

It would not have been possible to see through the undertaken project without the guidance of
Mr. Ankush Sehgal. It was purely on the basis of their experience and knowledge that we able to clear
all the theoretical and technical hurdles during the development phases of this project work.

Last but not the least we are very thankful to our Head of Department Er.Vinod Sharma and all
Members of Computer Science Department, who gave us an opportunity to face real time problems
while fulfilling need of an organization by making projects for them.

DECLARATION

DEVCONNECT Page 2
We hereby declare that the project progress work entitled “Astrochattalk.com” is an authentic record
of our work carried out as requirements of Institutional Training project for the award of degree of
BTech (CSE), Amritsar Group of Colleges, Amritsar, under the guidance of
Mr. Ankush Sehgal and all the members of WorthyAds.

(Signature of student)
Sumit Aggarwal (1701467)

This Certified that the above statement made by the student is correct to the best of our knowledge
and belief.

DEVCONNECT Page 3
INDEX PAGE

SERIAL NUMBER TOPIC PAGE NUMBER

1 Organization Profile 5

2 Brief about Project 6

3 Introduction to Technologies used 7

4 Front End Technologies 8

5 Back End Technologies 19

6 Hardware & Software 21

Requirements
7 Tools to be Used 23

DEVCONNECT Page 4
 ORGANIZATION PROFILE

Worthyads started with the goal to provide all the IT services that are required for the growth of any
business, under one roof. With a total industry experience of 9 years, we work on improving all aspects of
your Brand and gear you up with the right lead-generating tools. Turn Ideas into Innovation and Innovation
into outstanding Revenue. Our team of Qualified Professionals and Creative Individuals will help you
make the right business moves by creating a personalized business strategy using all the data collected in
your journey. We have worked with over 250 Websites and 50+ registered companies, delivering more
than 110% Growth Rate, Increased Market Value, and providing exceptional Results to Hundreds of our
happy customers. No matter what your business is, We will make sure you Succeed. We are building a
community of Entrepreneurs Intrapreneurs, Marketeers, Sales, Social media Experts, Design,
Development, and Content professionals to collaborate and work towards a brighter future. Our services
include Business Growth Engineering, User Experience Design (UED), Web Development, Content
Marketing, Brand Consulting, Digital Marketing, Animation and Graphics, and so much more!

Learn more about our Journey and Visions for the future on worthyads.com

Connect with us info@worthynetwork.com, https://www.instagram.com/worthyads/

DEVCONNECT Page 5
 BRIEF ABOUT PROJECT

A MERN stack website built with MongoDB, Express.js, React.js and Node.js, which is mainly for
connecting developers and allowing them to share their experiences and productions.

Functions

1. Authenticate

Users can Sign up or Login by clicking buttons on the navbar or on the landing page. Only users that have
signed in can view the public Post Feed and use his/her own Dashboard. When Signing up, if users want a
profile image, they can use a Gravatar email.

2. Developers profiles
Users can view all the developer profiles with no need to login by clicking the Developers button on the navbar.
If they are interested in someone's profile, they can click View Profile button on some profile to view the
detailed information.

3. Dashboard

After Login, users can create/edit the Profile, add/delete experiences and add/delete educations on the
Dashboard.

4. Personal Profile

After Login, new users can create their own Profile including a handle, status, company, website, social
networks and etc. If users want to show their latest Github repos, they can fill in their GIthub username in the
corresponding input field, then the app will automatically retrieve 5 latest repos and listed in the personal profile
page. Users can edit their profile later. The profile will be listed in the public profiles page and can be viewed by
all users.

5. Add Experience
After Login, users can add experience by clicking Add Experience button on the dashboard.

6. Add Education

After Login, users can add education by clicking Add Education button on the dashboard.

7. Post Feed

After Login, users can click Post Feed button on the navbar to view all the posts submitted by other developers.
Users can create/delete their own posts, like/unlike other developers' posts and also comment on posts.

8. Logout

Users can also logout after Login.

DEVCONNECT Page 6
 INTRODUCTION TO TECHNOLOGIES USED
MERN STACK

The mern stack is a JavaScript stack that’s designed to make the development process
smoother.Using the mern stack enables developers to build highly efficient web applications.
 MERN is an acronym for Mongo DB, Express, React, and Node.js.
 M =Mongo DB, a popular database manager which implements a NoSQL
structure.
 E = Express.js, a framework that supports and is used to host Node.js projects.
 R =React is a JavaScript library created by Facebook.
 N = Node.js, the crowning glory. This is a runtime environment, which runs
server-side web applications, i.e. it works on the back-end, away from the user’s
eyes to fetch relevant data or perform operations on the same.

React is Frontend Development Framework whereas Node.js, Express, and MongoDB are used for
Backend development

DEVCONNECT Page 7
 FRONT END TECHNOLOGIES

HTML:-
HTML stands for Hyper Text Markup Language. It is used to design web pages using markup
language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link
between the web pages. Markup language is used to define the text document within tag which
defines the structure of web pages. This language is used to annotate (make notes for the computer)
text so that a machine can understand it and manipulate text accordingly. Most of markup (e.g.
HTML) languages are human readable. Language uses tags to define what manipulation has to be
done on the text.
HTML is a markup language which is used by the browser to manipulate text, images and other
content to display it in required format. HTML was created by Tim Berners-Lee in 1991. The first
ever version of HTML was HTML 1.0 but the first standard version was HTML 2.0 which was
published in 1999.

HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language

 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render the content of the page

A Simple HTML Document

Example:-

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

HTML Tags

HTML tags are element names surrounded by angle brackets:

<tag name>content goes here...</tag name>

 HTML tags normally come in pairs like <p> and </p>

 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward slashinserted before the tag name

DEVCONNECT Page 8
Attributes provide additional information about HTML elements.

HTML Attributes

 All HTML elements can have attributes

 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

Features of HTML:
 It is easy to learn and easy to use.
 It is platform independent.
 Images, video and audio can be added to a web page.
 Hypertext can be added to text.
 It is a markup language.

Advantages:
 HTML is used to build a websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript etc.

Disadvantages:
 HTML can create only static webpages so for dynamic web page other languages have to be
used.
 Large amount of code has to be written to create a simple web page.
 Security feature is not good.

CSS: -Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to

simplify the process of making web pages presentable. CSS allows you to apply styles to web pages.
More importantly, CSS enables you to do this independent of the HTML that makes up each web
page.
CSS is easy to learn and understood but it provides powerful control over the presentation of an
HTML document.

 CSS saves time: You can write CSS once and reuse same sheet in multiple HTML pages.
 Easy Maintenance: To make a global change simply change the style, and all elements in all
the webpages will be updated automatically.

DEVCONNECT Page 9
  Search Engines: CSS is considered as clean coding technique, which means search engines
won’t have to struggle to “read” its content.
 Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you can
give a far better look to your HTML page in comparison to HTML attributes.
 Offline Browsing: CSS can store web applications locally with the help of offline cache.
Using of this we can view offline websites.

Styling HTML with CSS

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS can be added to HTML elements in 3 ways:

 Inline - by using the style attribute in HTML elements

 Internal - by using a <style> element in the <head> section
 External- by using an external CSS file

CSS Border

 The CSS border property defines a border around an HTML element:

CSS Padding

 The CSS padding property defines a padding (space) between the text and the border:

CSS Margin

 The CSS margin property defines a margin (space) outside the border:

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)

 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)
 All CSS Simple Selectors

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

DEVCONNECT Page 10
  External CSS
 Internal CSS
 Inline CSS

External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!

Each HTML page must include a reference to the external style sheet file inside the <link> element,
inside the head section.

Example:-

<!DOCTYPE html>
<html>
<head>
<linkrel="style sheet" type="text/css"href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section.

Example:-

<! DOCTYPE html>

<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

DEVCONNECT Page 11
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any
CSS property.

Example:-

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color: red;">This is a paragraph.</p>

</body>
</html>

Features of CSS:
 CSS Animations and Transitions.
 Calculating Values With calc()
 Advanced Selectors.
 Generated Content and Counters.
 Gradients.
 Webfonts.
 Box Sizing.
 Border Images.
 Media Queries.
 Multiple Backgrounds.

Advantages:
 Time Saver.
 Web pages are easier to load
 Bandwidth saving
 Compliments well with html
 Easier positioning web page elements

DEVCONNECT Page 12
Disadvantages:
 Restricts your freedom
 Adds extra code
 Forces you to use the framework’s semantics
 You could potentially lose time

JAVASCRIPT: -JavaScript is a very powerful client-side scripting language. JavaScript is used

mainly for enhancing the interaction of a user with the webpage. In other words, you can make your
webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely
in game development and Mobile application development.

 JavaScript is a client-side scripting language developed by Brendan Eich.

 JavaScript can be run on any operating systems and almost all web browsers.
 You need a text editor to write JavaScript code and a browser to display your web page.

JavaScript is the programming language of HTML and the Web.

JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById ().

This example uses the method to "find" an HTML element (with id="demo") and changes the element
content (innerHTML) to "Hello JavaScript":

Document.GetElementById("demo").innerHTML = "Hello JavaScript";

JavaScript syntax is the set of rules, how JavaScript programs are constructed:

Var x, y, z;       // How to declare variables

x = 5; y = 6;      // How to assign values
z = x + y;         // How to compute values

JavaScript Values

The JavaScript syntax defines two types of values: Fixed values and variable values.

Fixed values are called literals. Variable values are called variables

Features of JS:

 Object-Centred Script Language.

DEVCONNECT Page 13
  Client Edge Technology.
 Validation of User’s Input.
 Else and IF Statement.
 Interpreter Centred.
 Ability to Perform In Build Function.
 Case Sensitive Format.
 Light Weight and delicate.
 Statements Looping.
 Handling Events.

Advantages:
 Speed
 Simplicity
 Popularity
 Interoperability
 Server Load
 Rich Interfaces
 Versatility
 Less Overhead

Disadvantages:
 Client Server Security
 Browser Support
 Single inheritance
 Rendering Stopped
 Lack of Debugging facility

BOOTSTRAP: -Bootstrap is a free front-end framework for faster and easier web development

 Bootstrap includes HTML and CSS based design templates for typography, forms, buttons,
tables, navigation, modals, image carousels and many other, as well as optional JavaScript
plugins
 Bootstrap also gives you the ability to easily create responsive designs

DEVCONNECT Page 14
What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust themselves to look
good on all devices, from small phones to large desktops.

Advantages of Bootstrap:

 Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
Bootstrap
 Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
 Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
 Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox,
Internet Explorer, Edge, Safari, and Opera)

There are two ways to start using Bootstrap on your own web site.

You can:

 Download Bootstrap from getbootstrap.com

 Include Bootstrap from a CDN

 Bootstrap's Default Settings

 Bootstrap's global default font-size is 14px, with a line-height of 1.428.
 This is applied to the <body> element and all paragraphs (<p>).
 In addition, all <p> elements have a bottom margin that equals half their computed line-
height (10px by default).

 Bootstrap vs. Browser Defaults

 In this chapter, we will look at some HTML elements that will be styled a little bit differently
by Bootstrap than browser defaults

EXPRESS JS: Express provides a minimal interface for us to build our applications. Providing with
absolutely necessary tools to build our app with flexibility. There are numerous modules available on
npm for express, which can be directly plugged into an express. Database integration, template
engines, and basic multiple routing can be performed. It not only helps middleware to respond to
HTTP requests but also helps to dynamically render HTML pages by passing arguments to templates.

DEVCONNECT Page 15
Architecture-Express JS:

When the user sends a request through AngularJS then that request is firstly accessed by the NodeJS.
Threading is done in the NodeJS and then it is sent to the Express JS to Create, Read, Update and
Delete the API for the request. Express JS hosts the website for the NodeJS. Both NODEJS and
Express JS are server-side languages. After CURD, the API data is retrieved from the MongoDB and
then send it to the User.

• Create (POST) - Make something

• Read (GET) - Get something

• Update (PUT) - Change something

• Update (PUT) - Change something

Features of ExpressJS:

• Faster Server side development: Express.js provides many commonly used features of Node.js in
the form of functions that can be readily used anywhere in the program. This removes the need to
code for several hours and thus saves time.

• Middleware: Middleware is a part of the program that has access to the database, client request, and
the other middle wares. It is mainly responsible for the systematic organization of different functions
of Express.js.

• Routing: ExpressJS provides a highly advanced routing mechanism which helps to preserve the
state of the webpage with the help of their URLs.

• Templating: ExpressJS provides templating engines that allow the developers to build dynamic
content on the web pages by building HTML templates on the server-side.

DEVCONNECT Page 16
REACTJS:React is a front-end library developed by Facebook. It is used for handling the view
layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently
one of the most popular JavaScript libraries and has a strong foundation and large community behind
it.
ReactJS is JavaScript library used for building reusable UI components. According to React official
documentation, following is the definition −
React is a library for building compostable user interfaces. It encourages the creation of reusable UI
components, which present data those changes over time. Lots of people use React as the V in MVC.
React abstracts away the DOM from you, offering a simpler programming model and better
performance. React can also render on the server using Node, and it can power native apps using
React Native. React implements one-way reactive data flow, which reduces the boilerplate and is
easier to reason about than traditional data binding.

React Features
 JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React
development, but it is recommended.
 Components − React is all about components. You need to think of everything as a
component. This will help you maintain the code when working on larger scale projects.
 Unidirectional data flow and Flux − React implements one-way data flow which makes it
easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.
 License − React is licensed under the Facebook Inc. Documentation is licensed under CC BY
4.0.

React Advantages
 Uses virtual DOM which is a JavaScript object. This will improve apps performance, since
JavaScript virtual DOM is faster than the regular DOM.
 Can be used on client and server side as well as with other frameworks.
 Component and data patterns improve readability, which helps to maintain larger apps.

React Limitations
 Covers only the view layer of the app, hence you still need to choose other technologies to
get a complete tooling set for development.
 Uses inline templating and JSX, which might seem awkward to some developers.

DEVCONNECT Page 17
REACTJS ARCHITECTURE:

DEVCONNECT Page 18
 BACKEND DATABASE

MongoDB
MongoDB is an open-source document database and leading NoSQL database. MongoDB is written
in C++. This tutorial will give you great understanding on MongoDB concepts needed to create and
deploy a highly scalable and performance-oriented database.
MongoDB is a cross-platform, document oriented database that provides, high performance, high
availability, and easy scalability. MongoDB works on concept of collection and document.

Main features:
 Ad-hoc queries
MongoDB supports field, range-query , and regular-expression searches. Queries can return
specific fields of documents and also include user-defined javascript functions. Queries can
also be configured to return a random sample of results of a given size.
 Indexing
Fields in a MongoDB document can be indexed with primary and secondary indices.
 Replication
MongoDB provides high availability with replica sets.[9 A replica set consists of two or more
copies of the data. Each replica-set member may act in the role of primary or secondary
replica at any time. All writes and reads are done on the primary replica by default. Secondary
replicas maintain a copy of the data of the primary using built-in replication. When a primary
replica fails, the replica set automatically conducts an election process to determine which
secondary should become the primary. Secondaries can optionally serve read operations, but
that data is only eventually consistent by default.
 Load balancing
MongoDB scales horizontally using sharing The user chooses a shard key, which determines
how the data in a collection will be distributed. The data is split into ranges (based on the
shard key) and distributed across multiple shards. (A shard is a master with one or more
replicas.). Alternatively, the shard key can be hashed to map to a shard – enabling an even
data distribution.
MongoDB can run over multiple servers, balancing the load or duplicating data to keep the
system up and running in case of hardware failure.
 File storage
MongoDB can be used as a file system, called Gridfs, with load balancing and data
replication features over multiple machines for storing files.
 Aggregation
MongoDB provides three ways to perform aggregation: the aggregation pipeline, the map-
reduce function, and single-purpose aggregation methods.
 Map-reduce
Map-Reduce can be used for batch processing of data and aggregation operations. But
according to Mongo DB’s documentation, the Aggregation Pipeline provides better
performance for most aggregation operations.
 Server-side JavaScript execution
JavaScript can be used in queries, aggregation functions (such as MapReduce), and sent
directly to the database to be executed.

DEVCONNECT Page 19
  Capped collections
MongoDB supports fixed-size collections called capped collections. This type of collection
maintains insertion order and, once the specified size has been reached, behaves like circular
queue.
 Transactions
MongoDB claims to support multi-document ACID transactions since the 4.0 release in June
2018. This claim was found to not be true as MongoDB violates snapshot isolation.

DEVCONNECT Page 20
 HARDWARE AND SOFTWARE REQUIREMENTS

HARDWARE REQUIREMENTS:

Hardware requirements include that hardware which is required for its working. It includes:

 i3 or i5 Computer
 8 GB RAM
 2 GB of available disk space minimum
 High Speed Internet Connection(DSL/Cable)

SOFTWARE REQUIREMENTS:

The technical specifications of requirements for the software are as follows:

 Any Operating System (Windows, Linux, MAC)

 Sublime Text Editor
 Visual Studio Code
 Node JS
 Mongo DB (Mongoose)

DEVCONNECT Page 21
 TOOLS TO BE USED

Visual Studio Code

Visual Studio Code is a lightweight but powerful free source-code editor made by Microsoft which
runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support
for JavaScript, Typescript and Node.js and has a rich ecosystem of extensions for other languages
(such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).

ReactJS CLI

The ReactJS CLI is a command-line interface tool that you use to initialize, develop, scaffold, and
maintain React applications directly from a command shell The React CLI is a command-line
interface tool that you use to initialize, develop, scaffold, and maintain React applications directly
from a command shell. Installing React CLI Major versions of React CLI follow the supported major
version of React, but minor versions can be released separately. Install the CLI using the npm package
manager:

DEVCONNECT Page 22
Mongo DB

MongoDB is a cross-platform document-oriented database program. Classified as a NoSQL database

program, MongoDB uses JSON-like documents with optional schemas. MongoDB is developed by
MongoDB Inc. and licensed under the Server Side Public License.

DEVCONNECT Page 23