Abstract

The "Website for Architecture" project endeavors to establish a robust online platform tailored for
architects and clients alike, aiming to streamline the process of architectural service exploration,
engagement, and collaboration. This project integrates cutting-edge technologies such as ReactJS
for the frontend and [Link] for the backend to create a dynamic and interactive user experience.

Key features include a user-friendly interface with essential sections like Home, About Us,
Services, Portfolio, Appointment Scheduling, Testimonials, and Contact Us. The platform
facilitates easy navigation and access to detailed architectural services, project portfolios, and
client testimonials, enhancing transparency and credibility.

Administrative functionalities empower architects to manage and showcase their projects

effectively, while clients can explore architectural solutions, schedule appointments, and interact
seamlessly through secure communication channels. Responsive design principles ensure optimal
performance across various devices, ensuring accessibility and user satisfaction.

Ultimately, the "Website for Architecture" project aims to foster collaboration and innovation
within the architecture community, providing a centralized hub where architects can showcase
their expertise and clients can discover and engage with high-quality architectural services
efficiently.
 INDEX

S. No. Table of Contents Pg. No.

1. INTRODUCTION 7
1.1 Overview of the project 8
2. AIM AND SCOPE OF THE PROJECT 9-11
2.1 Aim of the Project 9
2.2 Scope and Objective 9
2.3 System Requirements 11
2.3.1 Hardware Requirements 11
2.3.2 Software Requirements 11
3. INTERNET INFORMATION SERVICES 12-13
3.1 Feature 12
3.2 Application Pool 12
3.3 Security 13
4. HTML 14-17
5. CSS 18-21
6. JavaScript 22-24
7 [Link] 25-27
7.1 Introduction to [Link] 25
7.2 Key Features of [Link] 25
7.3 Installation of [Link] 26
8. React 28-31
8.1 Introduction to React 28
8.2 Key Features of React 28
8.3 Installation 29
8.4 Understanding React Components 30
8.5 Lifecycle Methods 30
9. Redux 32-37
9.1 Introduction to Redux 32
9.2 Why Use Redux? 32
9.3 Installation 33
9.4 Advanced Redux Concepts 35
9.5 Best Practices 36
10. SYSTEM AND DEVELOPMENT TOOLS 38-40
10.1 Operating System 38
10.2 Visual Studio Code 38
10.3 Webpack and Babel 39
10.4 Design Tools 39
11. Screenshots 41-49
12. Conclusion 50
13. References 51
14. Bibliography 52
 INTRODUCTION

In today's digital era, creating dynamic and responsive web applications has become a cornerstone
for any business aiming to thrive online. This project focuses on developing a sophisticated front-
end for a web application utilizing the powerful and versatile framework, React. React is renowned
for its efficiency and flexibility in building user interfaces, especially for single-page applications
where a seamless user experience is paramount.

Our front-end development project integrates fundamental web technologies such as HTML, CSS,
and JavaScript alongside NodeJS, establishing a robust environment for developing and managing
application states and logic. HTML serves as the backbone of our web content, CSS ensures a
visually appealing and responsive design, while JavaScript brings interactivity and dynamic
content to our application. NodeJS, with its non-blocking, event-driven architecture, supports our
backend operations, enabling smooth data handling and API integrations.

React, the centerpiece of our project, leverages its component-based architecture to promote
reusable UI components, making development more efficient and maintainable. By using React's
virtual DOM, our application ensures high performance and a smooth user experience even with
extensive updates and user interactions.

This project aims to demonstrate the synergy between these technologies to build a modern,
interactive, and responsive web application. It will highlight the processes and best practices in
front-end development, from initial setup and component creation to state management and final
deployment. Through this project, we aim to showcase the potential of React in building scalable
and high-performance web applications.

1.1 Overview of the Project

The "Web App for Architecture" project aims to develop a comprehensive platform tailored for
showcasing architectural services, catering to clients globally. Utilizing HTML, CSS, JavaScript,

7
[Link], and React, this platform will facilitate the seamless presentation of architectural offerings,
enabling the creation of detailed service pages with information, portfolios, and contact options.
This platform aims to streamline the process for both architects and clients, making it easier to
discover and engage with architectural services.

The primary objective of this project is to create a system that centralizes architectural service
offerings and simplifies the client engagement process. Currently, clients face challenges in
finding reliable architectural services and managing interactions across multiple channels.

By consolidating architectural service offerings and simplifying access, this project aims to
enhance the accessibility and enjoyment of discovering architectural services. The platform will
feature multiple pages, including Home, About Us, Features, Our Projects, Appointment,
Testimonials, Contact Us, and a Login page to enrich the user experience further.

Through this project's implementation, we aim to address existing inefficiencies in the

architectural services market, ultimately providing users with a user-friendly and comprehensive
platform for accessing a variety of architectural services.

8
 AIM AND SCOPE OF THE PROJECT

2.1 Aim of the Project

The aim of the "Website for Architecture" project is to establish a centralized platform that
showcases a diverse array of architectural projects and services of architecture firms. This platform
will function as a comprehensive hub for potential clients worldwide, offering convenient access
to detailed information about architectural designs and services through a single dynamic website.

Admin functionalities will facilitate the effortless addition and management of project portfolios
and service offerings, enabling us to showcase architectural expertise efficiently. Through the
creation of an intuitive and user-friendly interface, the project seeks to streamline the process of
discovering, exploring, and booking architectural services.

Ultimately, the objective is to enhance accessibility and engagement with architectural services,
providing clients with a unified platform where they can explore projects, access detailed
information, and book appointments tailored to their needs and preferences. By implementing this
project, we aim to contribute to the enrichment of the architectural community by providing a
platform that fosters connectivity, discovery, and appreciation of innovative architectural designs
and services.

2.2 Scope and Objective

The "Website for Architecture" project aims to enhance the architectural service experience by
providing a comprehensive platform that caters to clients seeking diverse architectural solutions
and showcases the expertise of architecture firms.

SCOPE: The scope of the "Website for Architecture" project encompasses the development of an
intuitive and user-friendly website interface designed to feature a wide array of architectural
services and projects. Administrative functionalities will facilitate content management, including
the addition, modification, and removal of project details, team information, and service

9
descriptions.

User accounts with features such as appointment scheduling, project tracking, and personalized
consultations will be implemented. Interactive elements will be incorporated to enhance user
engagement and provide an immersive experience for potential clients.

Advanced search and filtering options will enable seamless discovery of architectural projects and
services based on style, scale, and client preferences. Secure communication channels will be
integrated to facilitate smooth consultations and appointment bookings. Responsive design
principles will ensure optimal website performance across various devices, enhancing accessibility
and user satisfaction.

The website will include a Home page, About Us page, Features page, our project portfolio,
appointment scheduling system, testimonial section, contact form, and login page to provide a
complete architectural service experience.

OBJECTIVE: The primary objective of this project is to establish a centralized platform for
offering a diverse range of architectural services and showcasing exemplary projects, ensuring
accessibility and convenience for clients globally.

It aims to streamline the process of discovering, engaging, and collaborating with architectural
firms, enhancing the overall client experience. This project seeks to empower architects and
designers to effectively present their work, fostering collaboration and innovation within the
architecture community.

It aims to promote high-quality architectural practices by providing a conducive environment for

clients to explore and engage with architectural services. Leveraging technology to enhance the
quality and accessibility of architectural solutions, the project contributes to the enrichment of the
architecture industry by providing equal access to outstanding architectural services and projects
for clients from diverse backgrounds.

10
Additionally, it aims to cultivate a vibrant online community, where clients can share their
experiences, provide testimonials, and connect with architects to enhance their journey and foster
trust in architectural services.

2.3 System Requirements

2.3.1 Hardware Requirements
The most common set of requirements defined by any operating system or software application is
the physical computer resources, also known as hardware. The minimal hardware requirements
are as follows:

Edition: Windows 10 Pro

Version: 21H2

Processor: Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz 2.50 GHz

Installed RAM: 8.00 GB (7.68 GB usable)

System type: 64-bit operating system, x64-based processor

Pen and touch: No pen or touch input is available for this display.

2.3.2 Software Requirements

Software requirements deal with defining resource requirements and prerequisites that need to be
installed on a computer to provide the functioning of an application. The minimal software
requirements are as follows:

Editor: VS Code Editor

Operating System: Windows
FRONT END - HTML, CSS, JAVASCRIPT, [Link], React

11
 INTERNET INFORMATION SERVICES 7.5 (IIS 7.5)

Microsoft IIS was used as the web server in this project, even though there were many other web
servers, it is the most used web server after Apache and it does not need any complicated
configurations before being used [2]. Furthermore, after IIS 6.0 was released, Microsoft’s security
was greatly improved and especially it cooperated with the .net environment, the cooperation made
the security almost perfect.

3.1 Features

The difficulty of the tool directly affects the number of users, especially the web publishing tool.
After all, many companies want to have their websites but do not want to hire a high-paid network
administrator to maintain them. Therefore, the companies must use tools that are relatively easy to
build the website with.

It is easier to use IIS as the web server, make it work, and publish the website and its configuration
is graphical.

The language of establishing a website or forum is varied, such as ASP, PHP, JSP, and other
languages. It is quite stable to run ASP on IIS, especially in the .net environment. However, PHP
is supported on Windows 7 only after a complex configuration.
The FTP Server, Web Management Tools, and World Wide Web Services were turned on before
the IIS configuration. To support PHP, Module Mapping was added in IIS, and the executable
option was associated with the location of [Link] after installing PHP in the local server.

3.2 Application pool

An application pool was proposed after IIS6.0 was released to support high-performance web
application design. It associates one or several applications with one or several groups of
processes. Those groups can avoid the overflow effectively when the website consumes too large
memory.

12
The website was assigned a separate application pool in this project, an independent process called
[Link] was created in the system once the site started, therefore, even if the site hangs up for
some reason, it will not influence other sites that ran on the same web server.

If each site used a separate application pool, there would be a problem that the server would be
overloaded. Meanwhile, the server would need to allocate more memory and CPU usage.
However, for high-performance servers located in a company, using a separate application pool is
the best choice to provide the users with the server’s strong performance regardless of system
resources.

3.3 Security

Timely installation of patches for the IIS web server is especially important since the security
patches relate to system security. The Microsoft official website often publishes the latest security
patches. For this reason, the server used in this project was ensured to be updated once a week.
And the FTP root directory was assigned to the logical drive to prevent hackers’ attacks. In
addition, the FTP default port was modified to other than 21 and the log was enabled in case of
server exception.

13
 HTML

Basics
Welcome to HTML Basics. This course leads you through the basics of Hyper Text Markup
Language (HTML). HTML is the building block for web pages. You will learn to use HTML to
create an HTML page to display in a web browser.

Objectives:
By the end of this course, you will be able to:
• Use a text editor to author an HTML document.
• Be able to use basic tags to denote paragraphs, emphasis, or special type.
• Create hyperlinks to other documents.
• Create an email link.
• Add images to your document.
• Use a table for layout.
• Apply colors to your HTML document.

Prerequisites:

You will need a text editor, such as Notepad, and an Internet browser, such as Internet Explorer or
Netscape.
Q: What is Notepad and where do I get it?
A: Notepad is the default Windows text editor. On most Windows systems, click your Start
button and choose Programs then Accessories. It is a little blue notebook.

Mac Users: SimpleText is the default text editor on the Mac. In OSX use TextEdit and
change the following preferences: Select (in the preferences window) Plain text instead of
Rich text and then select Ignore rich text commands in HTML files. This is very important
because if you don't do this HTML code probably won't work.

14
One thing you should avoid using is a word processor (like Microsoft Word) for authoring your
HTML documents.

What is an HTML File?

HTML is a format that tells a computer how to display a web page. The documents themselves are
plain text files with special "tags" or codes that a web browser uses to interpret and display
information on your computer screen.
• HTML stands for Hyper Text Markup Language
• An HTML file is a text file containing small markup tags
• The markup tags tell the Web browser how to display the page
• An HTML file must have an htm or html file extension

Try It?
Open your text editor and type the following text:
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
Save the file as [Link]. Start your Internet browser. Select Open (or Open Page) in the File
menu of your browser. A dialog box will appear. Select Browse (or Choose File) and locate the
html file you just created - [Link] - select it and click Open. Now you should see an address
in the dialog box, for example, C:\MyDocuments\[Link]. Click OK, and the browser will
display the page. To view how the page should look, visit this web page:
[Link]

Example Explained

15
What you just made is a skeleton HTML document. This is the minimum required information for
a web document and all web documents should contain these basic components. The first tag in
your html document is <html>. This tag tells your browser that this is the start of an HTML
document. The last tag in your document is </html>. This tag tells your browser that this is the end
of the HTML document.
The text between the <head> tag and the </head> tag is header information. Header information
is not displayed in the browser window.

The text between the <title> tags is the title of your document. The <title> tag is used to uniquely
identify each document and is also displayed in the title bar of the browser window.

The text between the <body> tags is the text that will be displayed in your browser.
The text between the <b> and </b> tags will be displayed in a bold font.

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. The .htm
extension comes from the past when some of the commonly used software only allowed three-
letter extensions. It is perfectly safe to use either .html or .htm, but be consistent. [Link] and
[Link] are treated as different files by the browser.

How to View HTML Source

A good way to learn HTML is to look at how other people have coded their HTML pages. To find
out, simply click on the View option in the toolbar of your browser and select Source or Page
Source. This will open a window that shows you the actual HTML of the page. Go ahead and view
the source HTML for this page.

HTML Tags

What are HTML tags?

• HTML tags are used to markup HTML elements

16
• HTML tags are surrounded by the two characters < and >
• The surrounding characters are called angle brackets
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end tag
• The text between the start and end tags is the element content
• HTML tags are not case sensitive, <b> means the same as <B>

17
 CSS

A CSS comprises style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts:

Selector: A selector is an HTML tag to which a style will be applied. This could be any tag like
<h1> or <table> etc.

Property: A property is a type of attribute of an HTML tag. Put simply, all the HTML attributes
are converted into CSS properties. They could be color, border, etc.

Value: Values are assigned to properties. For example, color property can have the value either
red or #F1F1F1, etc.
You can put CSS Style Rule Syntax as follows:
selector { property: value }

Example: You can define a table border as follows:

table { border :1px solid #C00; }

Here table is a selector and border is a property and the given value 1px solid #C00 is the value of
that property. You can define selectors in various simple ways based on your comfort. Let me put
these selectors one by one.

The Type Selectors

This is the same selector we have seen above. Again, one more example of giving a color to all
level 1 headings:
h1 {
color: #36CFFF;
}

18
The Universal Selectors
Rather than selecting elements of a specific type, the universal selector quite simply
matches the name of any element type:
*{
color: #000000;
}
This rule renders the content of every element in our document in black.

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies inside a particular
element. As given in the following example, the style rule will apply to <em> element only when
it lies inside the <ul> tag.
ul em {
color: #000000;
}

The Class Selectors

You can define style rules based on the class attribute of the elements. All the elements
having that class will be formatted according to the defined rule.
.black {
color: #000000;
}
This rule renders the content in black for every element with class attribute set
to black in our document. You can make it a bit more particular. For example:
[Link] {
color: #000000;
}
This rule renders the content in black for only <h1> elements with the class attribute set to black.
You can apply more than one class selector to a given element. Consider the following example:
<p class="center bold">
This para will be styled by the class's center and bold.

19
</p>

The ID Selectors

You can define style rules based on the id attribute of the elements. All the elements
having that id will be formatted according to the defined rule.
#black {
color: #000000;
}
CSS
5
This rule renders the content in black for every element with id attribute set to black in our
document. You can make it a bit more particular.
For example:
h1#black {
color: #000000;
}
This rule renders the content in black for only <h1> elements with id attribute set
to black.
The true power of id selectors is when they are used as the foundation for descendant
selectors.
For example:
#black h2 {
color: #000000;
}
In this example, all level 2 headings will be displayed in black color when those headings will lie
within tags having id attribute set to black.

The Child Selectors

You have seen the descendant selectors. There is one more type of selector, which is very similar
to descendants but have different functionality. Consider the following example:

20
body > p {
color: #000000;
}
This rule will render all the paragraphs in black if they are a direct child of the <body>element.
Other paragraphs put inside other elements like <div> or <td> would not have any effect on this
rule.

The Attribute Selectors

You can also apply styles to HTML elements with particular attributes. The style rule below will
match all the input elements having a type of attribute with a value of text:
input[type="text"]
{
color: #000000;
}
The advantage of this method is that the <input type="submit" /> element is unaffected, and the
color is applied only to the desired text fields.

21
 JavaScript
Overview
JavaScript is a rich and expressive language in its own right. This section covers the basic concepts
of JavaScript, as well as some frequent pitfalls for people who have not used JavaScript before.
While it will be of particular value to people with no programming experience, even people who
have used other programming languages may benefit from learning about some of the peculiarities
of JavaScript.
If you’re interested in learning more about the JavaScript language, I highly recommend
JavaScript: The Good Parts by Douglas Crockford.

Syntax Basics
Understanding statements, variable naming, whitespace, and other basic JavaScript syntax.

A simple variable declaration

var foo = ’ h e l l o world ’;

Whitespace has no meaning outside of quotation marks

var foo = ’ h e l l o world ’;

Parentheses indicate precedence

2 * 3 + 5; // r e t u r n s 11; m u l t i p l i c a t i o n h a p p e n s f i r s t
2 * (3 + 5); // r e t u r n s 16; a d d i t i o n h a p p e n s f i r s t

Tabs enhance readability, but have no special meaning

var foo = f u n c t i o n () {
c o n s o l e . log ( ’ hello ’);
};

Operators

Basic Operators
Basic operators allow you to manipulate values.
Concatenation

22
var foo = ’ hello ’;
var bar = ’ world ’;
c o n s o l e . log ( foo + ’ ’ + bar ); // ’ h e l l o world ’

Multiplication and division

2 * 3;
2 / 3;

Incrementing and decrementing

var i = 1;
var j = ++ i ; // pre - i n c r e m e n t : j e q u a l s 2; i e q u a l s 2
var k = i ++; // post - i n c r e m e n t : k e q u a l s 2; i e q u a l s 3

Operations on Numbers & Strings

In JavaScript, numbers and strings will occasionally behave in ways you might not expect.

Addition vs. concatenation

var foo = 1;
var bar = ’2 ’;
c o n s o l e . log ( foo + bar ); // 12. uh oh

Forcing a string to act as a number

var foo = 1;
var bar = ’2 ’;
// c o e r c e the s t r i n g to a n u m b e r
c o n s o l e . log ( foo + N u m b e r ( bar ));
The Number constructor, when called as a function (like above) will have the effect of casting its
argument
into a number. You could also use the unary plus operator, which does the same thing:

Forcing a string to act as a number (using the unary-plus operator)

c o n s o l e . log ( foo + + bar );

Logical Operators
Logical operators allow you to evaluate a series of operands using AND and OR operations.
Logical AND and OR operators

23
var foo = 1;
var bar = 0;
var baz = 2;
foo || bar ; // r e t u r n s 1 , w h i c h is true
bar || foo ; // r e t u r n s 1 , w h i c h is true
foo && bar ; // r e t u r n s 0 , w h i c h is f a l s e
foo && baz ; // r e t u r n s 2 , w h i c h is true
baz && foo ; // r e t u r n s 1 , w h i c h is true
Though it may not be clear from the example, the || operator returns the value of the first truthy
operand, or, in cases where neither operand is truthy, it’ll return the last of both operands. The
&& operator returns the value of the first false operand, or the value of the last operand if both
operands are truthy.
Be sure to consult the section called “Truthy and Falsy Things” for more details on which values
evaluate to true and which evaluate to false.

24
 [Link]

7.1 Introduction to [Link]

[Link] is an open-source, cross-platform runtime environment that allows developers to run
JavaScript code outside of a web browser. Built on Chrome's V8 JavaScript engine, [Link]
enables the creation of highly scalable and efficient network applications. It is particularly well-
suited for building server-side and networking applications due to its event-driven, non-blocking
I/O model.

7.2 Key Features of [Link]

1. Event-Driven and Non-Blocking I/O
One of the core features of [Link] is its event-driven architecture. In a traditional server model, a
request to a server blocks the thread until a response is returned. In contrast, [Link] uses an event
loop that handles requests asynchronously, allowing the server to handle multiple requests
concurrently without waiting for I/O operations to complete.

2. Single Programming Language

[Link] allows developers to use JavaScript for both client-side and server-side code, unifying the
development environment. This reduces the need to switch between different languages,
streamlining the development process and enhancing productivity.

3. Package Management
[Link] comes with a powerful package manager called npm (Node Package Manager). npm hosts
thousands of libraries and modules that developers can use to add functionality to their
applications. This ecosystem accelerates development by providing pre-built solutions for
common tasks.

4. Scalability
[Link] is designed for scalability. Its non-blocking architecture and event-driven nature make it
ideal for applications that require high concurrency, such as real-time chat applications, online
gaming, and live streaming services.

25
5. Performance
By leveraging the V8 engine, [Link] executes JavaScript code with high efficiency. V8 compiles
JavaScript directly to machine code, resulting in faster execution times compared to interpreted
languages.

7.3 Installation of [Link]

To start using [Link], you need to install it on your machine. [Link] can be downloaded from
the official website [Link]. The installer includes npm, so you don't need to install it separately.

Verifying Installation
After installation, you can verify that [Link] and npm are installed correctly by running the
following commands in your terminal:

node -v
npm -v
These commands should print the installed versions of [Link] and npm, respectively.

[Link] provides you with the necessary packages and tools to build, bundle, and run your React
application.

Here are the typical uses of [Link] in a frontend-only React project:

1. Package Management
npm (Node Package Manager) or yarn is used to manage the dependencies and libraries that your
React application needs.
You install [Link] packages using npm or yarn, which include React itself, as well as other
libraries and tools.

2. Development Server
Create React App (CRA): A popular boilerplate tool for quickly setting up a new React application.
It sets up a local development server, provides hot-reloading, and configures Webpack and Babel

26
under the hood.

npx create-react-app my-app

cd my-app
npm start

3. Build Tools
Webpack: A module bundler that takes your code and assets and bundles them into a single file or
a set of files that can be served to the browser.
Babel: A JavaScript compiler that converts modern JavaScript code into a backward-compatible
version for older browsers.

4. Scripts and Commands

npm scripts: Used to automate tasks such as starting the development server, running tests, and
creating production builds.

27
 React

8.1 Introduction to React

React is a popular open-source JavaScript library used for building user interfaces, particularly
single-page applications where dynamic content and interactive elements are prevalent. Developed
and maintained by Facebook, React allows developers to create large web applications that can
update and render efficiently in response to data changes. The core principle of React is
component-based architecture, which promotes reusability and maintainability.

8.2 Key Features of React

1. Component-Based Architecture
React's component-based architecture allows developers to build encapsulated components that
manage their own state. These components can be composed to form complex user interfaces. This
modular approach makes it easier to manage and scale applications.

2. Virtual DOM
React introduces the concept of a Virtual DOM, which is a lightweight representation of the actual
DOM. When the state of a component changes, React updates the Virtual DOM first. It then
calculates the most efficient way to update the real DOM, minimizing the number of direct
manipulations and improving performance.

3. JSX
JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write HTML
directly within JavaScript code. JSX makes the code more readable and expressive by allowing
HTML-like syntax in React components.

4. One-Way Data Binding

React implements one-way data binding, where data flows in a single direction from parent to
child components. This unidirectional data flow makes it easier to understand and debug
applications.

28
5. Declarative Programming
React's declarative nature allows developers to describe what the UI should look like based on the
application's state. React takes care of updating the UI to match the state, providing a clear and
predictable way to manage the user interface.

8.3 Installation
Setting Up a React Environment

To start using React, you need to set up a development environment. The easiest way to create a
new React project is by using Create React App, a command-line tool that sets up a new React
project with a sensible default configuration.

Steps to Create a React App:

1. Install [Link] and npm: Make sure you have [Link] and npm installed on your machine.
You can download them from [Link].

2. Install Create React App:

npm install -g create-react-app

3. Create a New React Project:

create-react-app my-app

4. Navigate to the Project Directory:

cd my-app

5. Start the Development Server:

npm start

This will start the development server, and you can view your React application by navigating to
‘[Link] in your browser.

29
8.4 Understanding React Components
Function Components
Function components are the simplest way to write a component in React. They are JavaScript
functions that return JSX.

Class Components
Class components are ES6 classes that extend from React. Component. They have additional
features, such as state and lifecycle methods.

Component Composition
Components can be composed together to build complex UIs. A parent component can pass data
to its child components via props.

State and Props

Props
Props (short for properties) are read-only attributes that are passed from parent to child
components. They allow data to flow between components.

State
State is a built-in object that allows components to create and manage their own data. Unlike props,
state is mutable and can be updated using the ‘setState’ method in class components or the
‘useState’ hook in function components.

8.5 Lifecycle Methods

Lifecycle methods are special methods in class components that allow you to run code at specific
points in a component's lifecycle, such as when it is mounted, updated, or unmounted.

Common Lifecycle Methods:

‘componentDidMount()’: Called once the component is mounted.
‘componentDidUpdate(prevProps, prevState)’: Called after the component updates.
‘componentWillUnmount()’: Called just before the component unmounts.

30
React Hooks
React Hooks are functions that let you use state and other React features in function components.
Introduced in React 16.8, hooks provide a more direct way to use React features without writing
class components.

Common Hooks:
‘useState’: Allows you to add state to function components.
‘useEffect’: Lets you perform side effects in function components (similar to lifecycle methods in
class components).
‘useContext’: Provides a way to access context values.
‘useRef’: Gives access to a mutable ref object.
‘useReducer’: Manages complex state logic.

React is a powerful and flexible JavaScript library that revolutionizes the way developers build
user interfaces. By adopting a component-based architecture, React promotes the creation of
reusable, maintainable, and efficient code, which is crucial for developing scalable web
applications. Its key features, such as the Virtual DOM, JSX, one-way data binding, and hooks,
enhance the development experience and enable the creation of dynamic and interactive user
interfaces.

React's declarative nature simplifies the process of designing UIs, allowing developers to focus on
what the interface should look like rather than how to implement it. This approach leads to more
predictable and easier-to-debug code. Additionally, React's ecosystem, including tools like Create
React App, React Router, and state management libraries like Redux and MobX, further extends
its capabilities, making it a comprehensive solution for front-end development.

31
 Redux

Redux is a state management library for JavaScript applications, most commonly used with React.
It provides a predictable state container that helps consistently manage the application state.
Redux's principles of a single source of truth, state immutability, and unidirectional data flow make
it an essential tool for building scalable and maintainable applications.

9.1 Introduction to Redux

Redux is designed to manage the state of an application. It centralizes the application's state in a
single store, making it easier to track and manage state changes over time. Redux can be used with
any JavaScript framework, but it is most commonly used with React due to its complementary
architectures.

Key Concepts of Redux:

Store: The single source of truth that holds the entire state of the application.
Actions: Plain JavaScript objects that describe an intention to change the state.
Reducers: Functions that take the current state and an action as arguments and return a new state.
Dispatch: A method to send actions to the Redux store.
Selectors: Functions to select specific parts of the state.

9.2 Why Use Redux?

Redux provides several advantages for state management:

Predictable State: By centralizing the state and enforcing strict rules for state changes, Redux
makes the state predictable.
Easier Debugging: Redux DevTools allows developers to inspect every state change, making
debugging easier.
Simplified State Management: Redux abstracts the state management logic into a centralized
store, simplifying the process of state updates.
Consistency: With Redux, the state updates follow a strict flow, ensuring consistency across the

32
application.

9.3 Installation
Setting Up Redux
To set up Redux in a React application, follow these steps:

1. Install Redux and React-Redux:

npm install react-redux

2. Create the Redux Store:

Create a store to hold the application's state.
// [Link]
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

3. Define Actions:
Actions are payloads of information that send data from the application to the Redux store.
// [Link]
export const increment = () => ({
type: 'INCREMENT'
});

export const decrement = () => ({

type: 'DECREMENT'
});

4. Create Reducers:

33
 Reducers specify how the application's state changes in response to actions.
// [Link]
const initialState = {count: 0 };

const counterReducer = (state = initialState, action) => {

switch ([Link]) {
case 'INCREMENT':
return {count: [Link] + 1 };
case 'DECREMENT':
return {count: [Link] - 1 };
default:
return state;
}
};

export default counterReducer;

5. Connect Redux to React:

Use the ‘Provider’ component to make the Redux store available to the entire application.

// [Link]
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

[Link](
<Provider store={store}>
<App />
</Provider>,

34
 [Link]('root')
);

6. Use Redux State in Components:

Connect components to the Redux store using ‘useSelector’ and ‘useDispatch’ hooks.

// [Link]
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = () => {

const count = useSelector(state => [Link]);
const dispatch = useDispatch();

return (
<div>
<h1>{count}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
};

export default Counter;

9.4 Advanced Redux Concepts

Middleware
Middleware in Redux provides a way to extend the capabilities of Redux by adding custom
functionality to the dispatch process. Common middleware includes redux-thunk and redux-saga,
which help manage asynchronous actions.

35
npm install redux-thunk

// [Link]
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

Redux Toolkit
Redux Toolkit is an official, opinionated, batteries-included toolset for efficient Redux
development. It simplifies many common tasks, such as setting up the store, creating reducers and
actions, and managing complex state logic.

npm install @reduxjs/toolkit

// [Link]
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({

reducer: {
counter: counterReducer
}
});

export default store;

9.5 Best Practices

36
Keep Actions Simple: Actions should be as simple and descriptive as possible.
Normalize State: Store data in a normalized format to avoid nested state objects and arrays.
Use Selectors: Create selectors to encapsulate the logic for extracting data from the state.
Use Redux DevTools: Utilize Redux DevTools for debugging and monitoring state changes.

Redux is a powerful state management tool that, when combined with React, provides a robust
architecture for managing complex application states. Its predictable state container, middleware
support, and advanced development tools like Redux Toolkit make it an indispensable part of
modern web development. By adhering to best practices and leveraging Redux's features,
developers can create scalable, maintainable, and high-performance applications.

37
 SYSTEM AND DEVELOPMENT TOOLS

The key components that are necessary for the development of the React-based website will be
discussed in this section. The computer required the appropriate operating system to support
modern development tools and server environments. The development process was facilitated by
a code editor tailored for React and JavaScript development. Finally, the design and distribution
of the website were managed using web development applications.

10.1 Operating System

The programming work was carried out on computers running both Windows 10 and macOS.
These operating systems were chosen because they offer robust support for the development tools
required for React applications. Windows 10 supports a wide range of development environments
and tools, while macOS is favored for its compatibility with Unix-based systems, making it ideal
for software development.

In the final implementation, the React website was tested on multiple operating systems, including
Windows 10, macOS, and various distributions of Linux, ensuring compatibility across different
environments. Browsers used for testing included Google Chrome, Mozilla Firefox, Microsoft
Edge, and Safari.

10.2 Visual Studio Code

The main code for the React website was written using Visual Studio Code (VS Code). VS Code
is a powerful source code editor developed by Microsoft that supports JavaScript and React, among
many other languages. It was chosen for its extensive features and strong support for React
development.

Key features of VS Code include:

• Fast startup time.

38
 • Syntax highlighting and IntelliSense for JavaScript and JSX.
• Integrated terminal for running build and development scripts.
• Extensive plugin ecosystem, including ESLint, Prettier, and React-specific tools.
• Git integration for version control.

10.3 Webpack and Babel

Webpack was used as the module bundler for the React application. It processes and bundles
JavaScript files, along with other assets such as images and stylesheets, into a single file or a set
of files.

Babel was employed as the JavaScript compiler to transform ES6+ syntax into compatible
JavaScript that can be run in current and older browsers.

10.4 Design Tools

Figma was used for designing the layout and user interface of the React website. Figma is a web-
based graphics editing and user interface design app. It offers powerful features for designing,
prototyping, and collaborating on web projects.

Key features of Figma include:

• Real-time collaboration for team-based projects.

• Prototyping tools for creating interactive mockups.
• Vector networks for complex design creation.
• Integrated design systems for consistent UI elements.

Requirements
The minimum requirements for running the development environment and tools for the React
project were as follows:

39
Operating System: Windows 10, macOS, or a Linux distribution.
Processor: Intel® Core™ i5 or equivalent.
Memory: 8GB of RAM.
Storage: 20GB of available hard disk space.
Display: 1920x1080 resolution with 24-bit color.

By utilizing these tools and systems, the development process of the React website was
streamlined, leading to an efficient and productive workflow. This ensured that the application was
developed, tested, and deployed in a consistent and high-quality manner.

40
Screenshots of Coding

Figure 1

Figure 2

41
Figure 3

Figure 4

42
Figure 5

Figure 6

43
Figure 7

Figure 8

44
Figure 9

Figure 10

45
Screenshots of Project

Figure 11

Figure 12

Figure 13

46
Figure 14

Figure 15

Figure 16

47
Figure 17

Figure 18

Figure 19

48
Figure 20

Figure 21

49
 Conclusion

In conclusion, the development of a website for architectural services requires the acquisition
of appropriate tools and resources. Standardization plays a crucial role in ensuring that the
platform meets the expectations of users across different devices and browsers. By employing
standardized resources and tools, we guarantee that clients can access and enjoy a seamless
browsing experience, regardless of their preferred browser or device.

Moreover, utilizing the right resources enables us to create a contemporary platform that
integrates seamlessly with current technologies and software, enhancing the overall user
experience for clients seeking architectural services. The incorporation of standard tools
ensures that navigation, menus, and layout adhere to familiar practices, facilitating ease of use
for clients.

Ultimately, investing in the right tools and resources not only enhances the functionality and
performance of the architectural services website but also contributes to its growth and
popularity within the architectural community. The features such as Home, About Us, Features,
Our Projects, Appointment, Testimonials, Contact Us, and Login are designed to provide a
comprehensive and user-friendly journey, ensuring client satisfaction and fostering a loyal
client base.

50
 References

1. C. S. Miller, J. Zheng, R. Connolly and A. Olagunju, "Keeping up with web

development trends", Proceedings of the 14th Annual ACM SIGITE Conference on
Information Technology Education, 2013, [online] Available:
[Link]
2. Web Survey Report 2018. (n.d.). [Link], October 2021, [online] Available:
[Link]
3. D. P. Singh, P. Kaushik, M. Jain, V. Tiwari and S. Rajpoot, "Data Storage Security
Issues in Cloud Computing", 2021 International Conference on Innovative Practices in
Technology and Management (ICIPTM), pp. 216-220, 2021.

51
 Bibliography

• [Link]
• [Link]
• From Wikipedia, “HTML”, [Link]
• [Link]
• [Link]

52