TITLE

Full Stack Web Development

PREPARED BY
Harsh Sharma (2020BTechCSE034)

EXTERNAL SUPERVISOR
Mr. Kunal Soonderji

FACULTY SUPERVISOR
Dr. Alok Kumar

Department of Computer Science Engineering

Institute of Engineering and Technology
JK Lakshmipat University Jaipur

September 2022

i
 CERTIFICATE

This is to certify that the Practice School-I project work entitled “Full Stack Web
Development of a Venture Website” submitted by Harsh Sharma
(2020BTechCSE034) towards the partial fulfillment of the requirements for the
degree of Bachelor of Technology in Computer Science Engineering of JK
Lakshmipat University Jaipur is the record of work carried out by him under my
supervision and guidance. In my opinion, the submitted work has reached a level
required for being accepted for Practice School-I examination.

-------------------------------
Name of the faculty supervisor
Department of Computer Engineering
Institute of Engineering & Technology
JK Lakshmipat University Jaipur
-----------------------------------
Name of the Department Coordinator
Department of Computer Engineering
Institute of Engineering & Technology
JK Lakshmipat University Jaipur

Date of Submission -------------------

ii
 ACKNOWLEDGMENT

In successfully completing this project, many people have helped me. I would
like to thank all those who are related to this project.

Primarily, I would like to thank almighty God for being able to complete this
project with success. Then I will thank our faculty Dr. Alok Kumar (Associate
Professor ,Department of Computer Science and Engineering) JK Lakshmipat
University and Mr Kunal Soonderji, under whose guidance I learned a lot about
this project. His suggestions and directions have helped in the completion of this
project.
Finally, I would like to thank my parents and friends who have helped me with
their valuable suggestions and guidance and have been very helpful in various
stages of project completion.

Sincerely yours,
Harsh Sharma

iii
 ABSTRACT
India is a large country with the population of 1.4 billion people and half of its
population are working class. Many of them hires financial advisors who can help
them in investing their money in proper direction. A financial advisor is your
financial planning partner. Let's say we want to retire in 20 years or send your
child to a private university in 10 years. To accomplish your goals, you may need
a skilled professional with the right licenses to help make these plans a reality;
this is where a financial advisor comes in. But as our country growing rapidly and
as a part of digital India many of the companies are expanding their business
online .The objective is to create a web view of a Financial company so that our
working class can invest their money virtually from any part of the globe.

LIST OF FIGURES

Figure Page No.

FIG 1: BRIEFING OF PAGES 4
FIG 2:DIVISIONS OF TEAM 5
FIG 3:LOGIN PAGE 5
FIG 4:SIGN UP PAGE 6
FIG 5:POPUP WINDOW 7
FIG 6:DJANGO SUPER USER LOGIN 7
FIG 7:DJANGO DATABASE 8
FIG 8:LANDING PAGE 8
FIG 9: MENU BAR OF LANDING PAGE 9
FIG 10:CHAT BOT WHEN HIDDEN 9
FIG 11:CHAT BOT WHEN OPEN 10

iv
FIG 12:DESIGN 1 11
FIG 13:DESIGN 2 11
FIG 14:DESIGN WHICH GOT SELECTED 11

LIST OF ACRONYMS

 CSS: Cascading Style Sheets

 HTML: Hypertext Markup Language
 API: Application Programming Interface
 UI: User Interface
 CLI : Command Line Interface
 HTTP: Hyper Text Transfer Protocol
 Integrated Development Environment
 Py:Python
 Href: Hypertext reference

v
 CONTENTS
CERTIFICATE ii
ACKNOWLEDGMENT iii
ABSTRACT iv
LIST OF FIGURES iv
LIST OF ACRONYMS v

CHAPTER 1: ABOUT THE ORGANIZATION 1

1.1 ABOUT 1
1.2 EXTERNAL SUPERVISOR 1
1.3 VISION 2
1.4 MISSION 2

CHAPTER 2: INTRODUCTION 2
2.1 PROBLEM PLOT 2
2.2 PROBLEM STATEMENTS 2
2.3 OBJECTIVE 3
2.4 WHY DID I CHOOSE TO BE A PART OF THIS PROJECT? 3
2.5 TECHNOLOGY STACK 3

CHAPTER 3: WORK DESCRIPTION 4

3.1 BRIEFING OF EVERY WEB PAGE 4
3.2 LOGIN PAGE 5
3.3 SIGN UP PAGE 6
3.4 EMAIL VERIFICATION 6
3.5 WELCOME POPUP 6
3.6 DATA STORED IN DJANGO ADMIN SERVER 7
3.7 LANDING PAGE 8
3.8 CHAT BOT 9

vi
 3.9 LOGO DESIGN 10

CHAPTER 4: RESULT 12

CHAPTER 5: CONCLUSION 13

REFERENCES 14

vii
Chapter 1 : ABOUT THE ORGANIZATION

1.1 ABOUT
KS Ventures is a startup organization started in 2021 in Pune , Maharashtra. It is a
Pune based financial firm with the singular focus of Funding Private,
Government, NGO’s and all Contribution based projects and sectors.They have a
network of over a million sources of funding out of US,Europe,Middle East,
India , Africa ,and Asia. They don't have any advance costs even if a Lender
choose,they can provide cover. Some of the services offered by them are:
⦁ Capital Raise from 10 Mill USD upwards
⦁ Debt, Equity, Hybrid, Non-Debt Non-Equity, Islamic and others.
⦁ KS Ventures A Fund
⦁ KS Ventures C Fund
⦁ KS Ventures Repayment Security Advanced Service
⦁ KS Ventures No Upfront Payment Service
⦁ Bespoke Investment Vehicles
⦁ Cross Border Partnerships
⦁ Complete Support Services for Capital Raise all sectors all stages.

The aim of the organization is to provide funding to people and to be the most
respected financial services provider that reaches out to the millions of people.
They aspire to live up the expectations of their clients, people, investors, donors
and the society.

1.2 EXTERNAL SUPERVISOR

Mr Kunal Soonderji has completed his B.Tech in Audio Engineering from
Institute of Audio Research,New York,USA. He worked as a Theater sound in-
charge in Emirates International School,Dubai. United Arab Emirates.

1
1.3 VISION
To earn global recolonization and become a world class financial service
enterprise.

1.4 MISSION
The company is single minded in its determination to achieve excellence in what
they do. They are dedicated to achieve the highest standard in the area of finance.

CHAPTER 2 : INTRODUCTION

2.1 PROBLEM PLOT

India is a large country with the population of 1.4 billion people and half of its
population are working class. Many of them hires financial advisors who can help
them in investing their money in proper direction. A financial advisor is your
financial planning partner. Let's say we want to retire in 20 years or send your
child to a private university in 10 years. To accomplish your goals, you may need
a skilled professional with the right licenses to help make these plans a reality;
this is where a financial advisor comes in. But as our country growing rapidly and
as a part of digital India many of the companies are expanding their business
online .The objective is to create a web view of a Financial company so that our
working class can invest their money without wasting their time in offices for
their opportunity to consult with others. It will help the company to boost up their
revenue and attract a large amount of investors globally. People can invest and
generate funds from any part of the world.

2.2 PROBLEM STATEMENTS

The project aims at developing a website of the organization where people can
register , ask for capital raise and lender/donor if interested can provide funding
to beneficiary. They can upload their documents, can get verified from the
company, finish their process and see their performance through performance
audit page.

2
 2.3 OBJECTIVE
The main objective of this project is designing a full stack website and collecting
data from the user and store it in cloud server. These are the list of the following
pages that we have to design:
 Login/Sign up Page
 Chat-Bot
 Landing Page
 Welcome Page
 Database Management Using Django
 Floating Icons On every page
 Logo Designing

2.4 WHY DID I CHOOSE TO BE A PART OF THIS PROJECT?

I choose this project because i had prerequisite knowledge of
HTML,CSS,JavaScript as well as I had a interest in Coding Language
particularly Python and want to test it on real life project using Django . This can
help me to explore the field of Web Development and can increase my back end
development skills. I want to experience how to deal with clients in real world
and experience how can a client can come up with different ideas which may or
may not be possible to execute. Overall it increases my practical knowledge and
technical skills.

2.5 TECHNOLOGY STACK

The environment we used in this project is Microsoft’s Visual Studio Code. The
website is divided in two parts i.e. Front-end and Back-end. The structure of the
front end is implemented using HTML, for designing we have used CSS , and
for make our website responsive we used JavaScript. HTML provides the basic
structure of our web pages and CSS gives our website nice visuals to make it
interesting and lastly JavaScript used to make our website responsive and added
transitions to our web pages.

3
CHAPTER 3 : WORK DESCRIPTION

3.1 BRIEFING OF EVERY WEB PAGE

First we have divided into groups and prepared briefing of our pages i.e. what
font we have to use,what is its color,background image, background color, which
webpages need to connect, and all that stuff.

FIG 1:BRIEFING OF PAGES

4
 FIG 2:DIVISIONS OF TEAM

3.2 LOGIN PAGE

User can login from this page but he/she needs to sign up before login. It has
Email and password as input field and can also login using email, Facebook,
apple ,twitter, LinkedIn account.

FIG 3:LOGIN PAGE

5
3.3 SIGN UP PAGE
Users can register themselves from this page. It enables users to independently
register and gain access to website.
There are many input fields present such as Full Name, Email, password, select
the role(e.g., Investor, Lender, Fund manager, Donor, etc.) . They also need to
enter their LinkedIn URL.

FIG 4:SIGN UP PAGE

They can use their Google, Facebook, Apple , LinkedIn, Twitter account for
registration.
They also need to agree to the terms and conditions mentioned .

3.4 EMAIL VERIFICATION

Email verification is an important feature in modern web applications to stop
spam accounts from getting registered in the database. We have implemented the
email verification using Django in which we have created an company’s new
email account and from that we have sent email to the registered email id as
confirmation mail.

3.5 WELCOME POPUP

After Sign up is successful a pop-up box will appear on the screen of the user to
give him a warm welcome. It is created using HTML, CSS and JavaScript.

6
 FIG 5:POPUP WINDOW

3.6 DATA STORED IN DJANGO ADMIN SERVER

After getting all the details and accepting our term and conditions , we stored user
data in Django Admin server which can access only by the superuser account to
make it more secure.

FIG 6:DJANGO SUPER USER LOGIN

7
 FIG 7:DJANGO DATABASE

3.7 LANDING PAGE

After the successful registration or login , user can land to our landing page.
Landing page itself is the home to all our side links. User can access all our pages
from landing page. Its the heart of our website.
The landing page is created using HTML,CSS and JavaScript .The page is
divided into different sections like Header, Content and Footer. This page of the
website is a maneuvering as the attention span and patience of users have never
been shorter.

FIG 8:LANDING PAGE

Header contains the logo, Name of the company and side drawer.

8
Side Drawer (Menu) contains the list and link to all the pages and services
offered by the company.

FIG 9: MENU BAR OF LANDING PAGE

There is one horizontal timeline present which will navigate to the desired page
and that is also linked to the pages e.g., Dashboard, KS Ventures Lender/Donor,
etc. For example if anyone wants to see their dashboard . On clicking dashboard
he/she will be redirected to dashboard page .
It also has some floating icons on left side such as Profile icon, Team, Settings,
Contact Us and Feedback.

The footer of the page contains About KS Ventures, services offered by them,
contact information and link to social media.

3.8 CHAT BOT

It is a computer program designed to simulate conversation with human users,
especially over the internet. It can help our user to guide us to our website and
can help them to solve their simple queries. It is deigned using Pure HTML and
CSS.

FIG 10:CHAT BOT WHEN HIDDEN

9
 FIG 11:CHAT BOT WHEN OPEN

3.9 LOGO DESIGN

Its a very interesting work which were done by almost all the interns present at
the time. Software used in creating these logos were Adobe Illustrator and Canva.

10
FIG 12:DESIGN 1 FIG 13:DESIGN 2

FIG 14:DESIGN WHICH GOT SELECTED

11
 CHAPTER 4 : RESULT

 I have successfully Created the Landing Page and Sign up/Login Page with my
fellow team members.
 I was able to link all the web pages with each other using Django.
 I was able to create and setup Django Admin and was able to collect Data using
the sign up form.
 I was able to successfully executed the login query with username and password.
 I was able to sent confirmation mail to the new user who has signed up our
website for the first time.

12
 CHAPTER 5 : CONCLUSIONS

With the help of this project , I learn to:

1. Using of Bootstraps predefined Library and to modify with our own imaginations.
2. Also learned some useful internet tools and sites like Code Pen and stack
overflow to jump into vast knowledge of Web Developing.
3. I have learned how to create a Django sign up form that can data from user and
store it.
4. Able to sent emails using Back end Programming via Django.
5. How to encounter errors and to overcome it using technical skills.

13
 REFERENCES

1. Django Development-https://www.udemy.com/course/python-django-the-
practical-guide/
2. Geeksforgeeks -https://www.geeksforgeeks.org/
3. JAVAPOINT-https://www.javatpoint.com/
4. Bootstrap-https://getbootstrap.com/
5. CodePen-https://codepen.io/
6. StackOverFlow-https://stackoverflow.com/
7. Landing Page Like This-https://www.awwwards.com/sites/ museum-of-
sharaf-rashidov
8. Signup Page-mixbook.com

14