PROJECT REPORT

ON
Kch-bhi.com(blogging site)
(SESSION:2019-2023)

SUBMITTED TO:- SUBMITTED BY:-

Mr. Amandeep Chhabra Sir Vanshika
CSE Department (251902065)
UIET, KUK Deepali Verma
(251902082)
Himanshi
(251902083)
CSE-A 6TH SEM
 ACKNOWLEDGMENT

We would like to thank Mr. Amandeep Chhabra Sir for his invaluable
support and guidance and also for constantly encouraging and compelling
me towards the right track. We would also like to thank other lab staff of
for setting up a perfect working environment for the project and providing
us with all the needed guidance.

-Vanshika Khanna

(251902065)

-Deepali Verma

(251902082)

-Himanshi

(251902083)

B.Tech CSE-A (6th Sem )

 INDEX

S.No Topic Pg No. Remarks

1. Project Introduction 4
2. Objective and Scope 5
3. Technology Used 6
4. Future Plans 7
5. Features 8
6. Pseudo Code 9
7. Snapshots of Website 15
8. Conclusion 17
PROJECT INTRODUCTION

This is blogging site. The main aim of this project is to developwebsite for
user who wants to publish their thoughts. This project will be developed to
carry out the processes of blogging easily and quickly. This project will
develop an environment in which users are free to express their thoughts and
views on topics of their choice.

In this project user is provided with a login so that we can Keep an I on

content posted and the users posting them sothat the content could be
filtered.

It I made using HTML, CSS, Bootstrap ,JavaScript, React.js ,Node.js and

many other libraries.
OBJECTIVE AND SCOPE

Due to rapid growth of technology, users are switched over from the
traditional method for getting daily news from newspapers or magazines to
reading blogs on the internet , so blogging sites plays a vital role in todays
world .
Advantages:
• Provides appropriate information for our queries.
• Different blogs are available for a certain problem.
• Provides quick access and is affordable.
• The system saves time.
TECHNOLOGY USED

Software Requirements:
• Windows 10
• Visual studio
Hardware Requirements:
• Processor – i5
• Hard Disk – 16 GB
• Memory – 4GB RAM
Languages:
• HTML
• CSS
• Bootstrap
• Java script
• React.js
• Node.js
Library Used:
• Material UI
• Styled-component
• react-router
• Redux
FUTURE PLANS

 To increase its digital consumption.

 To add content bots to the website.
 To add automatic filters to the website.
 To made this site worldwide popular.
 To integrate it with all contents possible.
FEAUTURES

• Admin login: Admin is the one who administers thesystem and input
updates.
• User login: Users have to create an account into thesystem by registering
themselves. Then they may login into the system and can upload their
blogs.
• Embedding: YouTube, github, Tweets, Instagram photos are all
embeddable in this project.
• Tags: For each story you publish, you can select up to3 tags. Tags will help
an interested audience discoveryour story, and improve search result
rankings within Medium.
• Notes: Leave notes on your own story to clarify apoint.
 PSEUDO CODE
Client
App.jsx:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Loadable
from 'react-loadable';

// import global styles here to apply them before any other styles import
'./assets/styles/index.scss';

import { ContextWrapper, withContext } from './utils/context'; import Header from

'./components/shared/Header';
import Spinner from './components/shared/Spinner';

const LoginScreen = Loadable({

loader: () => import('./components/screens/auth/LoginScreen'), loading: Spinner,
});

const LoginScreenWithContext = withContext(LoginScreen);

const RegisterScreen = Loadable({

loader: () => import('./components/screens/auth/RegisterScreen'), loading: Spinner,
});

const RegisterScreenWithContext = withContext(RegisterScreen);

const BlogScreen_Container = Loadable({

loader: () => import('./components/screens/BlogScreen/BlogScreen_Container'),

loading: Spinner,
});

const PostViewScreen_Container = Loadable({ loader: () =>

import('./components/screens/PostViewScreen/PostViewScreen_Container'), loading: Spinner,
});

const PostEditScreen_Container = Loadable({ loader: () =>

import('./components/screens/PostEditScreen/PostEditScreen_Container'), loading: Spinner,
});
const App = () => (
<ContextWrapper>
<Router>
<React.Fragment>
<Header />
<Switch>
<Route path="/blogs/:blogId/posts/:postId/edit" component={PostEditScreen_Container} />
<Route path="/blogs/:blogId/posts/:postId" component={PostViewScreen_Container} />
<Route path="/blogs/:blogId" component={BlogScreen_Container} />
<Route path="/register" component={RegisterScreenWithContext} />
<Route path="/login" component={LoginScreenWithContext} />
<Route path="/" exact component={BlogScreen_Container} />
</Switch>
</React.Fragment>
</Router>

</ContextWrapper>
);

export default App;

Login.jsx:

import React from 'react';

import PropTypes from 'prop-types'; import axios from 'axios';
import queryString from 'query-string';

import { contextShape } from '../../../../utils/context'; import storageHelper from

'../../../../utils/storageHelper'; import MarkupWrapper from './MarkupWrapper';

import styles from '../shared/AuthScreen.module.scss';

class LoginScreen extends React.Component { state = {

username: '',
password: '', error: null,
}

componentDidMount() { window.scrollTo(0, 0);

}

handleInputChange = (e) => {

this.setState({
[e.target.name]: e.target.value,
});
}
handleSubmit = (e) => { e.preventDefault();

axios.post('/api/auth/login', { username: this.state.username, password: this.state.password,

})
.then((response) => { storageHelper.setData({ user: response.data.user, token:
response.data.token,
});
axios.defaults.headers.common.Authorization = `Bearer
${response.data.token}`; this.props.context.setUser(response.data.user);

const decodedParams = queryString.parse(window.location.search);

this.props.history.push(decodedParams.redirectUrl);
}, (error) => {
const isValidationError = error.response.status >= 400 && error.response.status
< 500;
if (isValidationError) {
this.setState({ error: error.response.data.error });
} else {
// eslint-disable-next-line no-alert window.alert(error);

}
});
}

render() {
const errorBox = (
<div className={styles.error}>
{this.state.error}
</div>
);

return (
<MarkupWrapper>
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.username} onChange={this.handleInputChange}
name="username" placeholder="Username" required />
<input type="password" value={this.state.password} onChange={this.handleInputChange}
name="password" placeholder="Password" required />
<div className={styles['button-box']}>
<button className="btn btn--inverted">Sign in</button>
</div>
{this.state.error && errorBox}
</form>
</MarkupWrapper>
);
}
}
LoginScreen.propTypes = {
history: PropTypes.object.isRequired,

context: contextShape.isRequired,
};

export default LoginScreen;

RegisterScreen.jsx:
import React from 'react';
import PropTypes from 'prop-types'; import axios from 'axios';
import queryString from 'query-string';

import { contextShape } from '../../../../utils/context'; import storageHelper from

'../../../../utils/storageHelper'; import MarkupWrapper from './MarkupWrapper';

import styles from '../shared/AuthScreen.module.scss';

class RegisterScreen extends React.Component { state = {

username: '',
password: '', confirmPassword: '', error: null,
}

componentDidMount() { window.scrollTo(0, 0);

}

handleInputChange = (e) => {

this.setState({
[e.target.name]: e.target.value,
});
}

handleSubmit = (e) => { e.preventDefault();

axios.post('/api/auth/register', { username: this.state.username, password: this.state.password,

confirmPassword: this.state.confirmPassword,
})
.then((response) => { storageHelper.setData({ user: response.data.user, token:
response.data.token,
});
axios.defaults.headers.common.Authorization = `Bearer
${response.data.token}`; this.props.context.setUser(response.data.user);
const decodedParams = queryString.parse(window.location.search);
this.props.history.push(decodedParams.redirectUrl);
}, (error) => {

const isValidationError = error.response.status >= 400 && error.response.status

< 500;
if (isValidationError) {
this.setState({ error: error.response.data.error });
} else {
// eslint-disable-next-line no-alert

window.alert(error);
}
});
}

render() {
const errorBox = (
<div className={styles.error}>
{this.state.error}
</div>
);

return (
<MarkupWrapper>
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.username} onChange={this.handleInputChange}
name="username" placeholder="Username" required />
<
={styles['button-box']}>
<button className="btn btn--inverted">Sign up</button>
</div>
{this.stateinput type="password" value={this.state.password}
onChange={this.handleInputChange} name="password" placeholder="Password" required />
<input type="password" value={this.state.confirmPassword}
onChange={this.handleInputChange} name="confirmPassword" placeholder="Confirm
Password" required />
<div className.error && errorBox}
</form>
</MarkupWrapper>
);
}
}
RegisterScreen.propTypes = {
history: PropTypes.object.isRequired, context: contextShape.isRequired,
};

export default RegisterScreen;

 BlogScreen:
BlogScreen.jsx:
import React from 'react';
import PropTypes from 'prop-types';

import Spinner from '../../shared/Spinner';

import BlogHeader from './components/BlogHeader'; import PreContent from
'../../shared/PreContent'; import PostPreview from './components/PostPreview'; import Footing
from './components/Footing';

import styles from './BlogScreen.module.scss';

const BlogScreen = ({ data }) => { if (!data) {

return (<Spinner />);
}

const { blog, author, posts } = data;

return (
<main>

<BlogHeader name={blog.name} description={blog.description} />

<PreContent />
<div className={styles.posts}>
{
posts.map((post) => (
<PostPreview post={post} author={author} key={post.id} />
))
}
</div>
<Footing />
</main>
);
};

BlogScreen.defaultProps = { data: null,

};

BlogScreen.propTypes = { data: PropTypes.object,

};

export default BlogScreen;

 Server:
Authorize.js:
const jwt = require('jsonwebtoken');
//
const config = require('../config'); const db = require('../db');

const authorize = (req, res, next) => { if (!req.headers.authorization) {

res.status(400).json({ error: 'Auth token is not provided.' }); return;
}

const token = req.headers.authorization.slice('Bearer '.length);

const revokedToken = db
.get('revokedTokens')
.find({ token })
.value();

if (revokedToken) {
res.status(400).json({ error: 'Auth token is revoked.' }); return;
}

try {
const payload = jwt.verify(token, config.jwtSecret); res.user = { ...payload };
next();
} catch (e) { console.log(e);
res.status(400).json({ error: 'Auth token verification failed.' });
}
};

module.exports = authorize;
SNAPSHOTS
Home screen:

New Blog creation:

Sign up Screen:

Sign in screen:
Conclusion:

It has been a great pleasure for me to work on this exciting and challenging
project. This project proved good for me as it provided practical knowledge of not
only programming in node js and html, css, javascript and react js web based
application and to some extent databases, but also about all handling procedure
related with “Blogging Website”. It also provides knowledge about the latest
technology used in developing web enabled application that will be great demand
in future.This will provide better opportunities and guidance in future in
developing projects independently.

Benefits:
The project is identified by the merits of the system offered to the user. The merits
of this project are as follows: -

 It’s a web-enabled project.

 This project offers user to enter the data through simple and interactive
forms. This is very helpful for the client to enter the desired information
through so much simplicity.
 The user is mainly more concerned about the validity of the data, whatever
he is entering. There are checks on every stages of any new creation, data
entry or updation so that the user cannot enter the invalid data, which can
create problems at later date.
 Sometimes the user finds in the later stages of using project that he needs to
update some of the information that he entered earlier. There are options for
him by which he can update the records. Moreover there is restriction
forhim that he cannot change the primary data field. This keeps the
validity ofthe data to longer extent.
  From every part of the project the user is provided with the links through
framing so that he can go from one option of the project to other as per the
requirement. This is bound to be simple and very friendly as per the user is
concerned. That is, we can say that the project is user friendly which is one
of the primary concerns of any good project.
 Data storage and retrieval will become faster and easier to maintain because
data is stored in a systematic manner and in a single database.
 Decision making process would be greatly enhanced because of faster
processing of information since data collection from information available
on computer takes much less time than manual system.
 Easier and faster data transfer through latest technology associated with the
computer and communication.
 Through these features it will increase the efficiency, accuracy and
transparency.

Limitations:
 The size of the database increases day-by-day, increasing the load on the
database back up and data maintenance activity.
 Training for simple computer operations is necessary for the users
working on the system.