Name – Shubham Kumar

Roll - 52
Section - K23RZ
Subject – CSE(326)

Topic – : Freelancer Marketplace and Project Management Tool

 INDEX
Topic: Freelancer Marketplace and Project
Management Tool (CSE326)
1. Introduction
2. About project
3. Project Overview
5. Screenshots of Webpage
6. Description
7. Webpage Code
8. Reference
 INTRODUCTION
Project Name: Freelancer Marketplace and Project
Management Tool
# Introduction:

FreelancerHub is a comprehensive online platform designed to bridge the gap between clients
seeking skilled professionals for their projects and freelancers eager to showcase their
expertise. The project stems from a vision to create a virtual marketplace that not only
facilitates project connections but also streamlines the entire project lifecycle through robust
project management tools.

# Objectives:

The primary objectives of FreelancerHub are to provide a user-friendly and secure space where
clients can find the perfect match for their projects, freelancers can explore diverse
opportunities, and both parties can collaboratively bring projects to successful fruition. The
platform strives to create an environment that encourages creativity, efficiency, and
meaningful collaboration.

# Key Features:

FreelancerHub boasts a rich feature set, encompassing project posting, bidding, real-time
communication tools, task management, and secure payment processing. Clients can
effortlessly post projects, receive competitive bids, and collaborate with freelancers using built-
in communication channels. Freelancers, on the other hand, gain access to a diverse pool of
projects, with tools to manage tasks, milestones, and project deliverables efficiently.

# User Roles and Experience:

The platform caters to two primary user roles: clients and freelancers. Clients experience a
seamless project creation process, allowing them to articulate project requirements, set
budgets, and receive bids from qualified freelancers. Freelancers navigate a user-friendly
interface to discover projects aligned with their skills, submit compelling bids, and showcase
their portfolios.
# Technology Stack:

Built on a robust technological foundation, FreelancerHub utilizes HTML, CSS, and

JavaScript for the frontend, providing a responsive and engaging user interface. The backend
leverages [programming language] along with [framework] for efficient server-side
operations. The database management system ensures secure storage of user data and project
information.

# Security Measures:

Security is a paramount concern at FreelancerHub. The platform implements industry-

standard encryption protocols to safeguard user information and financial transactions.
User authentication is fortified through secure login procedures, and a vigilant monitoring
system ensures the integrity of the platform.

# Conclusion:

FreelancerHub represents more than just a platform; it symbolizes a shift towards

collaborative, efficient, and empowering online workspaces. As we embark on this journey, we
envision FreelancerHub becoming a hub of innovation and success, connecting individuals
and businesses with the talent they need and fostering a community built on mutual
growth and achievement. Join us on this exciting venture where projects thrive, and
collaborations flourish. FreelancerHub awaits, ready to redefine your freelance and project
management experience.
 About project
FreelancerHub: Empowering Seamless Collaboration and Project
Excellence

FreelancerHub stands as a transformative project at the intersection

of Freelancer Marketplaces and Project Management Tools, offering
an integrated platform that redefines online collaboration. Designed
to meet the diverse needs of both clients and freelancers,
FreelancerHub creates a dynamic ecosystem that enhances the entire
project lifecycle.
At its core, FreelancerHub serves as a catalyst for efficient project
initiation, execution, and completion. For clients, the platform
provides a streamlined project creation process where project
specifications, budgets, and deadlines can be communicated
seamlessly. The bidding system allows freelancers to showcase their
skills, enabling clients to select the perfect match for their projects.
The project management aspect of FreelancerHub introduces a suite of
tools that transforms collaboration into a smooth, organized
experience. From real-time communication channels to task
management and secure payment processing, FreelancerHub is
engineered to simplify complexities and enhance productivity.
Freelancers can efficiently manage tasks, while clients gain a
comprehensive view of project progress and milestones.
 Project Overview
A Freelancer Marketplace and Project Management Tool seamlessly
integrate project collaboration. Clients post projects, and freelancers
bid on them, fostering efficient connections. Real-time
communication, task management, and secure payment processing
enhance project workflow. The platform, driven by innovative features,
accommodates diverse projects, from web development to marketing.
With robust security measures, timely deliveries, and positive user
feedback, it builds a growing community of satisfied clients and
skilled freelancers. In essence, it is a dynamic hub where creativity
thrives, projects excel, and collaboration is redefined for optimal
outcomes.
Snapshot :- Fornt page
Snapshot :- About Us
Snapshot :- Services
Snapshot :- Achievements
Snapshot :- Work-Place
 Snapshot :- Contact Detail form

CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
<title>HTML Project</title>
</head>
<body>
<!--Start Header-->
<table id="header" border="0" width="100%" cellpadding="0" cellspacing="0"
bgcolor="#f3971b">
 <tr>
<td>
<table border="0" width="85%" cellpadding="15" cellspacing="0"
align="center">
<tr>
<td>
<font face="arial" color="#000000" size="5">
<span class="fa fa-user-circle" aria-
hidden="true"></span>
<i> Freelancer World and Project Management
Tool</i>
</font>
</td>
<td >
&nbsp;
</td>
<td>
<a href="#home"><font face="arial" color="#ffffff"
size="4">Home</font></a>
</td>
<td>
<a href="#about"><font face="arial" color="#ffffff"
size="4">About</font></a>
</td>
<td>
<a href="#services"><font face="arial"
color="#ffffff" size="4">Services</font></a>
</td>
<td>
<a href="#testimonial"><font face="arial"
color="#ffffff" size="4">Testimonials</font></a>
</td>
<td>
<a href="#achievements"><font face="arial"
color="#ffffff" size="4">Achievements</font></a>
</td>
<td>
<a href="#contact"><font face="arial" color="#ffffff"
size="4">Contact</font></a>
</td>
</tr>
</table>
</td>

</tr>
 </table>
<!--End Header-->
<!--Start Home-->
<table id="home" border="0" width="100%" cellpadding="0" cellspacing="0"
bgcolor="#292929">
<tr>
<td>
<table border="0" width="85%" cellpadding="15" cellspacing="0"
align="center">
<tr>
<td align="center" valign="middle">
<h3>
<font face="arial" color="#ffffff" size="6">
Hi, We welcome You Here
</font>
</h3>

<h2>
<font face="arial" color="#f3971b" size="7">
Freelancer market place
</font>
</h2>
</td>
</tr>
</table>
</td>

</tr>

</table>
<!--End Home-->

<!--Start About-->
<table id="about" border="0" width="100%" cellpadding="0" cellspacing="0"
bgcolor="#292929">
<tr>
<td>
<table border="0" width="85%" cellpadding="15" cellspacing="0"
align="center">
<!-- Heading Start-->
<tr>
 <td height="180" align="center" valign="middle"
colspan="2">
<font face="arial" color="#f3971b" size="6">
About Us
</font>
<hr width="70" color="#f3971b">

</td>
</tr>
<!--Heading End-->
<tr>
<td width="40%">
<img src="WhatsApp Image 2023-11-27 at
14.32.50_ab150b32.jpg" alt="Shubham" width="90%">
</td>
<td width="60%">
<font face="arial" color="#ffffff" size="4">
<h2>
<i><b>For the passionate Programmer</i></b>
</h2>
"Welcome to our Freelancer Marketplace and
Project Management Tool! Our platform is designed to make project collaboration
easy and efficient. Clients can post their projects, and freelancers can bid on
those projects based on their skills. Once a freelancer is selected, our platform
provides tools for seamless communication, file sharing, and task management. You
can create, assign, and track tasks effortlessly. We prioritize user-friendly
features to enhance the collaboration experience. For secure transactions, we
integrate reliable payment methods. Our website ensures a smooth workflow from
project creation to completion. Join us to connect with talented freelancers and
successfully manage your projects, all in one place!"
</font>
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
</tr>
</table>
</td>

</tr>

</table>
 <!--End About-->

<!--Start Services-->
<table id="services" border="0" width="100%" cellpadding="0" cellspacing="0"
bgcolor="#c2c0c3">
<tr>
<td>
<table border="0" width="85%" cellpadding="15" cellspacing="0"
align="center">
<!-- Heading Start-->
<tr>
<td height="180" align="center" valign="middle"
colspan="3">
<font face="arial" color="#292929" size="6">
Services
</font>
<hr width="70" color="#292929">

</td>
</tr>
<!--Heading End-->
<tr>
<td width="33%">
<a href="service1.html"><img
src="https://img.freepik.com/premium-vector/freelance-concept-web-template-girl-
with-laptop-employee-works-from-home-while-traveling_178888-
73.jpg?size=626&ext=jpg&ga=GA1.1.1826414947.1699228800&semt=ais"
alt="Service1" width="100%"></a>
</td>
<td width="33%">
<a href="service2.html"><img
src="https://i.pinimg.com/originals/7e/94/9f/7e949f2895d5508a563b500007edce81.jpg
" alt="Service1" width="100%"></a>
</td>
<td width="33%">
<a href="service3.html"><img
src="https://assets.designhill.com/design-blog/wp-
content/uploads/2017/05/179.jpg" alt="Service1" width="100%"></a>
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
</tr>
 </table>
</td>

</tr>

</table>
<!--End Services-->

<!--Start Testimonial-->
<table id="testimonial" border="0" width="100%" cellpadding="0"
cellspacing="0" bgcolor="#353535">
<tr>
<td>
<table border="0" width="85%" cellpadding="15" cellspacing="0"
align="center">
<!-- Heading Start-->
<tr>
<td height="180" align="center" valign="middle"
colspan="3">
<font face="arial" color="#f3971b" size="6">
Testimonial
</font>
<hr width="70" color="#f3971b">

</td>
</tr>
<!--Heading End-->
<tr>
<td width="33%" valign="top">
<font face="arial" color="#ffffff">
<h3 align="center">Navneet Parmar</h3>
</font>
<font face="arial" color="#c2c0c3">
"I am a B.Tech Computer Science student. I have
learned about JavaScript, HTML, CSS, and other exciting things related to
computer science. I enjoy working with these technologies to create websites and
explore the world of coding. I'm passionate about using my skills to build and
innovate in the tech field."
</font>
</td>
<td width="33%" valign="top">
<font face="arial" color="#ffffff">
<h3 align="center">Shubham Kumar</h3>
</font>
 <font face="arial" color="#c2c0c3">
As a current B.Tech student in Computer Science
and Engineering (CSE), I am dedicated to exploring and mastering the intricacies
of technology. With a focus on acquiring a well-rounded education in computer
science, I am actively engaged in my studies, seeking to understand the latest
developments and innovations in the field. As a CSE student, I am passionate
about leveraging my skills to contribute to the ever-evolving world of technology
and computing. I am committed to academic excellence, continuous learning, and
the pursuit of knowledge in order to thrive in the dynamic and competitive
landscape of the tech industry."

</font>
</td>
<td width="33%" valign="top">
<font face="arial" color="#ffffff">
<h3 align="center">Sikandar Kumar</h3>
</font>
<font face="arial" color="#c2c0c3">
"I am a college student, eager to learn and
explore various web languages. Currently, I am diving into the world of coding
and studying languages like HTML, CSS, and more. I find joy in understanding how
websites are created and look forward to growing my skills in the exciting field
of web development."
</font>
</td>
</tr>
<tr>
<td colspan="3">
&nbsp;
</td>
</tr>
</table>
</td>

</tr>

</table>
<!--End Testimonial-->

<!--Start Achievements-->
<table id="achievements" border="0" width="100%" cellpadding="0"
cellspacing="0" bgcolor="#c2c0c3">
<tr>
<td>
 <table border="0" width="85%" cellpadding="15" cellspacing="0"
align="center">
<!-- Heading Start-->
<tr>
<td height="180" align="center" valign="middle"
colspan="2">
<font face="arial" color="#292929" size="6">
Achievements
</font>
<hr width="70" color="#292929">

</td>
</tr>
<!--Heading End-->
<tr>
<td width="66%" valign="top">
<font face="arial"color="#292929">
<ul>
<li>Successfully facilitated a diverse array of
projects spanning industries such as web development, graphic design, marketing,
and more.
</li>
<li>User Satisfaction</li>
<li>Achieved significant growth in the user base,
demonstrating the platform's appeal and effectiveness in connecting clients with
skilled freelancers.
</li>
<li>Robust User Growth.</li>
<li>Timely Project Deliveries</li>
<li>Established a track record of on-time project
deliveries, emphasizing the platform's commitment to meeting client expectations
and freelancer commitments</li>
<li>Received positive recognition and reviews
within the freelance and project management industry for excellence in
innovation, reliability, and user-centric design.
</li>
</ul>
</font>
</td>
<td valign="top">
<img src="https://jungleworks.com/wp-
content/uploads/2015/08/516239-freelancer-1362507380-525-640x480.jpg"
alt="Achievements" width="90%">
</td>
 </tr>
<tr>
<td>
&nbsp;
</td>
</tr>
</table>
</td>

</tr>

</table>
<!--End Achievements-->

<!--Start Contact-->
<table id="contact" border="0" width="100%" cellpadding="0" cellspacing="0"
bgcolor="#292929">
<tr>
<td>
<table border="0" width="85%" cellpadding="15" cellspacing="0"
align="center">
<!-- Heading Start-->
<tr>
<td height="180" align="center" valign="middle"
colspan="1">
<font face="arial" color="#f3971b" size="6">
Contact
</font>
<hr width="70" color="#f3971b">

</td>
</tr>
<!--Heading End-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Freelancer Hub - Project Management</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding:0%;
background: url('https://images.unsplash.com/photo-
1542831371-29b0f74f9713?q=80&w=1000&auto=format&fit=crop&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Y29kaW5nfGVufDB8fDB8fHww') no-repeat
center center fixed;
background-size: cover;
color: #fff;
}

header {
background-color: rgba(242, 6, 6, 0.7);
padding: 1rem;
text-align: center;
}

h1 {
font-size: 2.5rem;
margin: 0;
}

main {
padding: 20px;
text-align: center;
}

.project-card {
width: 300px;
margin: 20px;
padding: 15px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 20 20 px rgb(255, 255, 255);
transition: transform 0.3s ease-in-out;
}

.project-card:hover {
transform: scale(1.05);
}

h2 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #96009e;
}

p {
font-size: 1rem;
line-height: 1.4;
 color: #9c009c;
}

strong {
color: #ff9800;
}

button {
background-color: #ff9800;
color: #961414;
border: none;
padding: 10px;
margin-top: 10px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease-in-out;
}

button:hover {
background-color: #f57c00;
}

</style>
</head>
<body>

<header>
<h1>Freelancer Hub - Project Management</h1>
</header>

<main>
<div id="projects-container"></div>
</main>

<script>
// Example data (replace this with data from a server)
const projects = [
{ id: 1, title: 'Web Development', description: 'Build a
responsive website', budget: 'Rs. 1000' },
{ id: 2, title: 'Graphic Design', description: 'Design a
logo for a startup', budget: 'Rs. 500' },
{ id: 3, title: 'Content Writing', description: 'Write
blog articles', budget: 'Rs. 300' },
{ id: 4, title: 'Pet Adoption', description: 'adoption of
pet', budget: 'Rs. 400'}
 ];

// Function to render projects

function renderProjects() {
const projectsContainer =
document.getElementById('projects-container');
projectsContainer.innerHTML = '';

projects.forEach(project => {
const projectCard = document.createElement('div');
projectCard.classList.add('project-card');

projectCard.innerHTML = `
<h2>${project.title}</h2>
<p>${project.description}</p>
<p><strong>Budget:</strong> ${project.budget}</p>
<button
onclick="applyForProject(${project.id})">Apply</button>
`;

projectsContainer.appendChild(projectCard);
});
}

// Function to simulate applying for a project

function applyForProject(projectId) {
alert(`Applied for project with ID ${projectId}`);
}

// Initial rendering
renderProjects();
</script>
<tr>
<td align="center" valign="top">
<table border="0" width="50%" cellpadding="15"
cellspacing="0" align="center" bgcolor="#353535">
<tr>
<td width="30%">
<font face="arial" size="4"
color="#ffffff">
Name
</font>
</td>
<td width="70%">
<font face="arial" size="4" color="#ffffff">
 <input type="text" size="40">
</font>
</td>
</tr>
<tr>
<td width="30%">
<font face="arial" size="4" color="#ffffff">
Email
</font>
</td>
<td width="70%">
<font face="arial" size="4" color="#ffffff">
<input type="text" size="40">
</font>
</td>
</tr>
<tr>
<td width="30%">
<font face="arial" size="4" color="#ffffff">
Message
</font>
</td>
<td width="70%">
<font face="arial" size="4" color="#ffffff">
<textarea rows="5" cols="42"></textarea>
</font>
</td>
</tr>
<tr>
<td width="30%">
&nbsp;
</td>
<td width="70%">
<button type="Submit">
<font face="arial" size="4"
color="#292929">
Submit
</font>
</button>
</td>
</tr>
</table>
</td>

</tr>
 <tr>
<td colspan="3">
&nbsp;
</td>
</tr>
</table>
</td>

</tr>

</table>
<!--End Contact-->

<!--Start Footer-->
<table id="header" border="1" width="100%" cellpadding="0" cellspacing="0"
bgcolor="#353535">
<tr>
<td>
<table border="0" width="85%" cellpadding="15" cellspacing="0"
align="center">

<tr>
<td width="25%" valign="top">
<font face="arial" color="#f3971b" size="5">
<span class="fa fa-facebook-square" aria-
hidden="true"></span>
Facebook
</font>

</td>
<td width="25%" valign="top">
<font face="arial" color="#f3971b" size="5">
<span class="fa fa-twitter-square" aria-
hidden="true"></span>
Twitter
</font>

</td>
<td width="25%" valign="top">
<font face="arial" color="#f3971b" size="5">
<span class="fa fa-instagram" aria-
hidden="true"></span>
Instagram
</font>
 </td>
<td width="25%" valign="top">
<font face="arial" color="#f3971b" size="5">
<span class="fa fa-linkedin-square" aria-
hidden="true"></span>
Linkedin
</font>

</td>
<td rowspan="2">
<font face="arial" color="#ffffff" size="5">
<span class="fa fa-arrow-circle-up" aria-
hidden="true"></span>
<a href="#header">
<font face="arial" color="#ffffff" size="5">
Top
</font>

</a>
</font>

</td>
</tr>
<tr>
<td width="25%" valign="top">
<font face="arial" color="#f3971b" size="5">
<span class="fa fa-youtube-square" aria-
hidden="true"></span>
YouTube
</font>

</td>
<td width="25%" valign="top">
<font face="arial" color="#f3971b" size="5">
<span class="fa fa-rss-square" aria-
hidden="true"></span>
Blog
</font>

</td>
<td width="25%" valign="top">
<font face="arial" color="#f3971b" size="5">
<span class="fa fa-envelope-o" aria-
hidden="true"></span>
 Email
</font>

</td>
<td width="25%" valign="top">
<font face="arial" color="#f3971b" size="5">
<span class="fa fa-globe" aria-
hidden="true"></span>
Website
</font>

</td>
</tr>
<tr>
<td colspan="3">
&nbsp;
</td>
</tr>
</table>
</td>

</tr>

</table>
<!--End Footer-->
</body>
</html>
 references
HTML, CSS, and JavaScript:
Mozilla Developer Network (MDN): Comprehensive documentation for web technologies.

Frontend Frameworks:

React Documentation: A JavaScript library for building user interfaces.

Vue.js Documentation: A progressive JavaScript framework for building user interfaces.

Node.js Documentation: JavaScript runtime for server-side development.

Django Documentation: High-level Python web framework.

Database Management:

MongoDB Documentation: NoSQL database used for storing flexible, JSON-like documents

REST API Tutorial: Understanding and implementing RESTful APIs:

Git Documentation: Version control system for tracking changes in source code.

Project Management Tools:

Jira: A popular project and issue tracking tool.

Trello: An easy-to-use project management tool.

Security:

Payment Integration:

Stack Overflow: Q&A community for developers.

GitHub: Version control and collaboration platform.