A

Project Reoprt

On

Programmer’s Query Portal

Submitted in partial fulfillment of the requirement

For the degree of

Bachelor of Engineering
In
Computer
Supervisor

Prof.(Ms.Nandini Ahire)

Technology Personified

Department of Computer Engineering

Innovative Engineer’s and Teachers’ Education Society’s

Bharat College of Engineering

Badlapur: 421504.

(Affiliated to University of Mumbai)

(2022-23)
 Technology Personified

Bharat College of Engineering

Badlapur:421504.

CERTIFICATE
This is to certify that, the project titled

“Programmers’s Query Portal”

is a bonafide work done by

Khan Umair :– Rollno:31

Thakur AmitKumar :-Rollno:63

Mulayam Yadav :-RollNo:72

Vikas Yadav :-RollNo:73

Degree of

Bachelor of EngineeringIn

Computer

Supervisor

Prof.(Ms.Nandini ahire)

(External) Head Of Department Principle Subject Incharge

(Prof. Deepa Athawle) (Dr. Siddhartha (Prof. Nandani Ahire)
Ladhake )
 Project Report Approval for B.E

This is to certify that the project entitled "Programmer’s

Query Portal” is a bonafide work done by AmitkumarThakur, khan
Umair, Vikas yadav, Mulayam Yadav under the
supervision of Prof. Nandini Ahire. This project has been
approved for the award of Bachelor’s Degree in Computer
Engineering, University of Mumbai.

Examiners: .....................
......................

Supervisors: ......................
......................

Principal: ………………
 DECLARATION

I declare that this written submission represents my ideas in

my own words and where other’s ideas or words have been
included, I have adequately cited and referenced the original
sources. I also declare that I have adhered to all principles of
academic honesty and integrity and have not misrepresented or
fabricated or falsified any idea/data/fact/source in my
submission. I understand that any violation of the above will be
cause for disciplinary action by the Institute and can also evoke
penal action from the sources which have thus not been properly
cited or from whom proper permission has not been taken when
needed.

Amitkumar thakur RollNo:63

Umair khan Roll No:31
Vikas yadav Roll No:73
Mulayam yadav Roll No:72

Date:
 ABSTRACT

The unprecedented growth of ubiquitous computing infrastructure has brought new

challenges for security, privacy, and trust. New problems range from mobile apps with
incomprehensible permission (trust) model to OpenSSL Heartbleed vulnerability, which
disrupted the security of a large fraction of the world’s web servers. As almost all of the
software bugs and flaws boil down to programming errors/misalignment in requirements, we
need to retrace back Software Development Life Cycle (SDLC) and supply chain to check
and place security & privacy consideration and implementation plan properly.

Historically, there has been a divergent point of view between security teams and developers regarding
security. Security is often thought of as a “consideration” or “toll gate” within the project plan rather
than being built in from the early stage of project planning, development and production cycles. We
argue that security can be effectively made into everyone’s business in SDLC through a broader
exploration of the users and their social-cultural contexts, gaining insight into their mental models of
security and privacy and usage patterns of technology, trying to see why and how security practices
being satisfied or not-satisfied, then transferring those observations into new tool building and
protocol/interaction design.
 CONTENT
Abstract..................................................................................................................

List of Figures……………………………………………………........................

• Introduction

1.2 Problem Defination………………………………………………………..

1.3 Scope of Project…………………………………………………………...

1.4 Future of P r o g r a m m e r ’ s Q u e r y
p o r t a l ………………………………………………….

• Review of Related Work

• Flow Chart Staff leave management

System Methodology

4.1 Project System & Methodology…………………………………………...

4.2 System Requirements……………………………………………………..

• Design of Project

5.1 Coding……………………………………………………………………..

• Experimental Results

6.1 Outputs……………………………………………………………………..

• Conclusion

References………………………………………………………………….......
 List of Figures

Sr.Number Name of Figures Page Numbers

1 Introduction 8
1 Problem of Definaton 9
2 Scope of Project 10
3 Future of Programmer’s 11
Query Portal
4 Review of Related Work 12
5 Flow Chart 14
6 System Methodology 16
7 System Requirements 18
8 Coding 19
9 Output 31
10 Conclusion 35
11 References 35
 INTRODUCTION:
Welcome to the programmer's query portal, where programmers can come to find solutions to their
programming problems and share their knowledge with others. This portal is designed to be a platform
for programmers of all levels to connect, collaborate, and help each other with their coding challenges.

Whether you are a beginner or an experienced programmer, you may encounter various challenges
while working on your projects. This portal provides you with a space to ask questions, get feedback,
and learn from other programmers who have faced similar challenges in the past. You can also
contribute your knowledge and expertise by answering questions and providing solutions to other
programmers' problems.

Our portal covers a wide range of programming topics, including web development, mobile app
development, data science, artificial intelligence, machine learning, and more. So, no matter what your
area of expertise or interest is, you can find valuable information and resources here.

So, come and join our community of programmers, and let's work together to solve programming
challenges and advance our skills and knowledge.
 1.2 PROBLEM OF DEFINATION:

The problem of definition for the programmer's query portal is that it can be interpreted in different
ways, depending on the context and the audience. Some possible definitions are:

Programmer's query portal: A website or platform that provides a space for programmers to ask
questions, share knowledge, and collaborate with each other.
Query portal for programmers: A search engine or database that contains information and resources
related to programming, such as code snippets, tutorials, documentation, and forums.
Programming support portal: A customer service or technical support portal that provides assistance to
users who have issues or questions related to a programming tool, language, or framework.
To avoid confusion, it's important to clarify the specific purpose and scope of the programmer's query
portal and communicate it clearly to the users. This can be done through the portal's name, description,
user interface, and documentation. Additionally, it's important to provide relevant and accurate
information, to maintain a user-friendly and accessible design, and to foster a supportive and
respectful community of programmers.
 1.3 SCOPE OF PROJECT:
The scope of the project for the programmer's query portal can vary depending on the goals, resources,
and audience of the project. However, some possible features and functionalities that can be included
in the project scope are:

User registration and authentication: Users can create an account, log in, and manage their profile
information, preferences, and activity history.
Question and answer system: Users can ask questions, provide answers, and vote on the quality and
relevance of the content. Questions and answers can be categorized, tagged, and searched for easy
navigation and discovery.
Community features: Users can follow other users, join groups, participate in discussions, and share
resources and tips. The portal can offer gamification elements, such as badges, points, and rankings, to
incentivize participation and contribution.
Knowledge base and resources: The portal can provide a repository of tutorials, documentation, code
samples, and best practices related to programming tools, languages, and frameworks. The content can
be curated, updated, and reviewed by experts and moderators.
Support and feedback system: Users can report issues, suggest improvements, and receive feedback
from the portal's team or community. The portal can offer a helpdesk or ticketing system to manage
user requests and inquiries.
Analytics and reporting: The portal can track and analyze user behavior, engagement, and
performance metrics, such as pageviews, clicks, time on site, bounce rate, conversion rate, and user
satisfaction. The portal can provide insights and reports to improve the portal's usability, content, and
effectiveness.
The scope of the project can be expanded or refined based on user feedback, market demand, and
technological advancements. It's important to balance the scope with the project's timeline, budget,
and resources, and to prioritize the most critical and valuable features for the target audience.
1.4 FUTURE OF Programmers Query Portal:

The future of the programmer's query portal is promising, as the demand for programming
skills and knowledge continues to grow in various industries and domains. Some possible
trends and directions that can shape the future of the portal are:

AI and automation: The portal can leverage AI and automation technologies, such as natural
language processing, chatbots, and recommendation engines, to enhance the user experience,
streamline the content creation and curation process, and personalize the content and
recommendations based on user preferences and behavior.
Integration and collaboration: The portal can integrate with other programming tools and
platforms, such as IDEs, version control systems, cloud services, and online coding
challenges, to provide a seamless and comprehensive programming ecosystem. The portal
can also foster collaboration and networking opportunities, such as hackathons, mentoring
programs, and job matching services, to connect programmers with each other and with
potential employers or clients.
Emerging technologies and domains: The portal can adapt to the emerging technologies and
domains, such as blockchain, IoT, quantum computing, and cybersecurity, by providing
specialized content and resources, as well as facilitating discussions and collaborations
among experts and enthusiasts. The portal can also address the ethical, social, and
environmental implications of programming, such as privacy, bias, accessibility, and
sustainability, by promoting awareness and best practices.
Globalization and diversity: The portal can cater to the global and diverse programming
community by offering multilingual and multicultural support, as well as promoting
inclusivity and representation of underrepresented groups, such as women, minorities, and
people with disabilities. The portal can also leverage the power of open source and
crowdsourcing to foster innovation and co-creation among programmers worldwide.
To ensure the future success of the portal, it's important to stay updated with the latest
technologies, trends, and user needs, as well as to maintain a user-centric and agile approach
to development and innovation.
 2. REVIEW OF RELETED WORK:

□ User-friendly and accessible design: The portal should have a clean and intuitive
interface, easy navigation, and clear instructions and feedback. The portal should
also be responsive and compatible with different devices and browsers.
□ Relevant and accurate content: The portal should provide up-to-date and
comprehensive information and resources on programming topics, as well as filter
and moderate user-generated content to ensure its quality and relevance. The portal
should also provide clear attribution and citation of external sources and
contributors.
□ Active and engaged community: The portal should foster a vibrant and supportive
community of programmers, by encouraging participation and contribution,
providing feedback and recognition, and promoting respect and diversity. The
portal should also have mechanisms to manage conflicts, spam, and abuse.
□ Innovative and responsive features: The portal should offer innovative and
responsive features and functionalities, such as search, filtering, sorting, tagging,
bookmarking, sharing, and commenting, to enhance the user experience and
facilitate knowledge sharing and collaboration. The portal should also regularly
update and improve its features based on user feedback and technological
advancements.
□ Reliable and secure infrastructure: The portal should have a reliable and scalable
infrastructure, with backup and recovery mechanisms, to ensure the availability
and integrity of the data and services. The portal should also prioritize the security
and privacy of the users, by implementing strong authentication, encryption, and
data protection measures, and complying with relevant regulations and standards.
□ A good programmer's query portal can be a valuable resource for programmers of
all levels, by providing them with a platform to learn, collaborate, and advance
their skills and knowledge.
 3. SYSTEM FLOW CHART FOR STAFF LEAVE
MANAGEMENT SYSTEM

 The system flow chart diagram is a visual representation of all processed

in sequential order.
 The system flow chart diagram is a graphical representation of the
relation between all the major parts or step of the system.
 Flow chart diagram can not include minor parts of the system.
DFD Diagram:-
 4. METHODOLOGY

4.1 System Methodology:

For developing a Programmer's Query Portal, an Agile methodology would be appropriate. The
Agile methodology is iterative and incremental, which allows for flexibility and adaptability in
response to changing requirements and feedback from users.

The Agile methodology involves the following key principles:

Collaboration and communication: The Agile methodology emphasizes collaboration and

communication among team members and stakeholders, to ensure a shared understanding of
the project goals and requirements, and to facilitate timely and effective decision-making.

Iterative and incremental development: The Agile methodology breaks down the project into
small, manageable iterations or sprints, where each iteration delivers a working piece of
software that can be tested and evaluated. This approach allows for early and frequent feedback
from users and stakeholders, and enables the team to adapt and improve the product as needed.

Prioritization and timeboxing: The Agile methodology prioritizes the features and requirements
based on their value and urgency, and sets timeboxed deadlines for each iteration. This
approach ensures that the team focuses on the most important and feasible tasks, and delivers
the product incrementally within a predictable timeframe.

Continuous testing and integration: The Agile methodology emphasizes continuous testing and
integration throughout the development process, to ensure that the software meets the quality
standards and is ready for deployment. This approach helps to identify and address issues early
on, and to minimize the risks and costs of defects and delays.

Reflection and improvement: The Agile methodology encourages the team to reflect on their
performance and outcomes, and to continuously improve their processes and practices. This
approach fosters a culture of learning and innovation, and enables the team to adapt and evolve
in response to changing needs and challenges.

By using the Agile methodology, the team can develop a Programmer's Query Portal that meets
the needs and expectations of the users, while maintaining a high level of quality and
efficiency. The team can also prioritize the features and functionalities based on their value and
feasibility, and adjust the roadmap and timeline as needed.
4.1.2 Proposed Methodology:
Based on the requirements and scope of a Programmer's Query Portal, the proposed methodology
can be an Agile-based approach, such as Scrum.

Scrum is an Agile framework that emphasizes collaboration, flexibility, and continuous

improvement. It involves the following key roles, events, and artifacts:

Roles:

Product Owner: Represents the stakeholders and defines the product vision and goals, prioritizes
the product backlog, and provides feedback and guidance to the team.
Scrum Master: Facilitates the Scrum events, removes obstacles, and promotes the Scrum values
and practices.
Development Team: Cross-functional and self-organizing team that delivers a potentially
releasable product increment at the end of each sprint.
Events:

Sprint Planning: Meeting where the team defines the sprint goal, selects the backlog items to be
worked on, and creates the sprint backlog.
Daily Scrum: Daily meeting where the team synchronizes their work, identifies and resolves
obstacles, and plans the next steps.
Sprint Review: Meeting where the team demonstrates the product increment to the stakeholders,
collects feedback, and updates the product backlog.
Sprint Retrospective: Meeting where the team reflects on their performance and processes,
identifies areas for improvement, and creates an action plan.
Artifacts:

Product Backlog: Prioritized list of features and requirements, owned by the Product Owner, and
used to guide the sprint planning and backlog refinement.
Sprint Backlog: List of backlog items selected for the current sprint, owned by the Development
Team, and used to guide the daily work and progress tracking.
Increment: The sum of all the completed backlog items at the end of the sprint, which must meet
the Definition of Done.
The Scrum methodology can provide several benefits for developing a Programmer's Query Portal,
such as:

Flexibility: Scrum allows for flexibility and adaptability in response to changing requirements and
feedback, which is essential for a dynamic and evolving platform like a Programmer's Query
Portal.
Collaboration: Scrum promotes collaboration and communication among team members and
stakeholders, which is crucial for ensuring that the product meets the needs and expectations of the
users.
Continuous improvement: Scrum encourages continuous improvement and learning, which is
necessary for maintaining the quality and relevance of the content and features of a Programmer's
Query Portal.
4.2 SYSTEM REQUIREMENTS:
• Software Requirements:
Windows 7 and above

• Apache Xampp Server

• Bootstrap CDN

• Hardware Requirements:
Intel i5 processor 8300 3.0GHz(Recommended).
A minimum 512 MB of RAM is required to process
The algorithms. Recommended 4GB of RAM for faster execution.
5. Design Of Project

5.1 CODING:

Front-End Coding :

Navbar.jsx :
#import React, { useEffect } from 'react'

import { Link, useNavigate, useLocation } from 'react-router-dom'

import { useSelector, useDispatch } from 'react-redux'

import decode from 'jwt-decode'

import bars from '../../assets/bars-solid.svg'

import logo from '../../assets/logo.png'

import search from '../../assets/search-solid.svg'

import Avatar from '../../components/Avatar/Avatar'

import './Navbar.css'

import { setCurrentUser } from '../../actions/currentUser';

const Navbar = ({handleBar}) => {

const dispatch = useDispatch()

var User = useSelector((state) => (state.currentUserReducer))

const navigate = useNavigate();

const location=useLocation();

const handleLogout = () => {

dispatch({ type: 'LOGOUT'});

navigate('/')

dispatch(setCurrentUser(null))

useEffect(() => {
 const token = User?.token

if(token){

const decodedToken = decode(token)

if(decodedToken.exp * 1000 < new Date().getTime()){

handleLogout()

dispatch(setCurrentUser( JSON.parse(localStorage.getItem('Profile'))))

},[User?.token, dispatch])

return (

<nav className='main-nav'>

<div className='navbar'>

location.pathname!=='/Auth'&&<img src={bars} alt='menu-bar'

onClick={handleBar} id='menu-bar' width='20' />

<Link to='/' className='nav-item nav-logo'>

<img src={logo} alt='logo' />

</Link>

<Link to='/' className='nav-item nav-btn'>Home</Link>

 <Link to='/' className='nav-item nav-btn'>About</Link>

<Link to='/' className='nav-item nav-btn'>For Teams</Link>

<form>

<input type="text" placeholder='Search...'/>

<img src={search} alt="search" width="18" className='search-icon'/>

</form>

{ User === null ?

<Link to='/Auth' className='nav-item nav-links'>Log in</Link> :

<>

<Avatar backgroundColor='#009dff' px="10px" py="7px" borderRadius="50%"

color='white'><Link to={`/Users/${User?.result?._id}`} style={{color:"white",
textDecoration:'none',margin:"0px
5px"}}>{User.result.name.charAt(0).toUpperCase()}</Link></Avatar>

<button className='nav-item nav-links' onClick={handleLogout}>Log out</button>

</>

</div>

</nav>

export default Navbar

ChatContainer.js :-
import React, { useEffect, useState, useRef } from 'react'
import socketIOClient from "socket.io-client";
import ChatBoxReciever, { ChatBoxSender } from './ChatBox';
import InputText from './InputText';
import UserLogin from './UserLogin';
import {
doc,
setDoc,
collection,
serverTimestamp,
query,
onSnapshot,
orderBy,

} from 'firebase/firestore';
import db from "./firebaseConfig/firebaseConfig.js"

export default function ChatContainer() {

let socketio = socketIOClient("http://localhost:5001")

const [chats , setChats] = useState([])
const [user, setUser] = useState(localStorage.getItem("user"))
const avatar = localStorage.getItem('avatar')
const chatsRef = collection(db , "Messages")
const messagesEndRef = useRef(null)
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
}

useEffect(() => {
scrollToBottom()
}, [chats])

useEffect(()=> {
socketio.on('chat', senderChats => {
setChats(senderChats)
})
})

useEffect(()=>{

const q = query(chatsRef , orderBy('createdAt' , 'asc'))

const unsub = onSnapshot(q, (querySnapshot) =>{

const fireChats =[]
querySnapshot.forEach(doc => {
fireChats.push(doc.data())

});
setChats([...fireChats])
 })
return ()=> {
unsub()
}

},[])

function addToFirrebase(chat){
const newChat = {
avatar,
createdAt: serverTimestamp(),
user,
message: chat.message
}

const chatRef = doc(chatsRef)

setDoc(chatRef , newChat)
.then(()=> console.log('Chat added succesfully'))
.catch(console.log)
}

function sendChatToSocket(chat){
socketio.emit("chat" , chat)
}

function addMessage(chat){
const newChat = {...chat , user:localStorage.getItem("user") , avatar}
addToFirrebase(chat)
setChats([...chats , newChat])
sendChatToSocket([...chats , newChat])
}

function logout(){
localStorage.removeItem("user")
localStorage.removeItem("avatar")
setUser("")
}

function ChatsList(){
return( <div style={{ height:'75vh' , overflow:'scroll' , overflowX:'hidden'
}}>
{
chats.map((chat, index) => {
if(chat.user === user) return <ChatBoxSender key={index}
message={chat.message} avatar={chat.avatar} user={chat.user} />
return <ChatBoxReciever key={index} message={chat.message}
avatar={chat.avatar} user={chat.user} />
})
}

<div ref={messagesEndRef} />

</div>)
 }

return (
<div>
{
user ?
<div>

<div style={{display:'flex', flexDirection:"row", justifyContent: 'space-

between'}} >
<h4>Username: {user}</h4>
<p onClick={()=> logout()} style={{color:"blue", cursor:'pointer'}} >Log
Out</p>
</div>
<ChatsList
/>

<InputText addMessage={addMessage} />

</div>
: <UserLogin setUser={setUser} />
}

</div>
)
}
Back-End Code:

App.js :-

const express = require('express')

const http = require('http')
const Server = require("socket.io").Server
const app = express()
const path = require('path')

const server = http.createServer(app)

const io = new Server(server , {
cors:{
origin:"*"
}
})

const _dirname = path.dirname("")

const buildPath = path.join(_dirname , "../client/build");

app.use(express.static(buildPath))

app.get("/*", function(req, res){

res.sendFile(
path.join(__dirname, "../client/build/index.html"),
function (err) {
if (err) {
res.status(500).send(err);
}
}
);

})

io.on("connection" , (socket) => {

console.log('We are connected')

socket.on("chat" , chat => {

io.emit('chat' , chat)
} )

socket.on('disconnect' , ()=> {
console.log('disconnected')
})
})
server.listen(5001 , () => console.log('Listening to port 5001'))

Package.json :-

{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.18.2",
"nodemon": "^2.0.22",
"socket.io": "^4.6.1"
}
}
 5. Experimental Results

5.1 OUTPUTS:

• Enter Login Id & Password

• Homepage
• Ask question page:

• Answer Page:
 • Tags

• User’s Page:
• ChatBot:
CONCLUSION:

• In conclusion, a Programmer's Query Portal is a valuable platform for

programmers to ask and answer technical questions, share knowledge and
resources, and build a community of like-minded professionals. The development
of such a portal requires a systematic approach, such as an Agile-based
methodology like Scrum, to ensure that the product meets the needs and
expectations of the users and stakeholders.

• The key features of a successful Programmer's Query Portal include a user-

friendly interface, a comprehensive database of questions and answers, a robust
search function, an active community of contributors, and quality control
mechanisms to ensure the accuracy and relevance of the content. The portal can
also include additional features such as gamification, social networking, and
integration with other tools and platforms to enhance the user experience and
engagement.

• Overall, a Programmer's Query Portal can provide a valuable resource for

programmers at all levels of expertise, and can contribute to the growth and
development of the software industry as a whole

REFERENCES:
https://web.whatsapp.com/

https://www.googleadse

https://chrome.google.com/

www.geeksforgeeks.org

https://www.tutorialspoint.com/