A project report on

Voyace
by
Jishnu Vyas (202102100410013)
Dev Malvi (202102100410002)
Henil Modi (202102100410003)
Raj Patel (202102100410056)

in Partial Fulfilment of the Requirements for the Degree of

Diploma
in
Computer Engineering

at
UKA TARSADIA UNIVERSITY

Under the guidance of

Mr. Harshal Patel

Department of Diploma
Chhotubhai Gopalbhai Patel Institute of Technology
Bardoli, Surat
April-2023
 CERTIFICATE

This is to certify that the project report entitled “Voyace” has been carried out by
Jishnu Vyas(202102100410013), Dev Malvi(202102100410002), Henil Modi(202102100
Raj Patel(202102100410056) at Chhotubhai Gopalbhai Patel Institute of
Technology for the partial fulfillment of Diploma in Computer Engineering degree
to be awarded by UKA TARSADIA UNIVERSITY.

Date:
Place: Bardoli, Surat

Mr. Harshal Patel Mr. Jignesh Gadhiya

Guide, Head,
Department of Diploma , Department of Diploma ,
CGPIT CGPIT

Examiner’s Signature

ii
 ACKNOWLEDGEMENT

We have taken efforts in this project. However, it would not have been possible without
the kind support and help of many individuals. We would like to extend our sincere
thanks to all of them.
We are highly indebted to Mr. Harshal Patel for her guidance and constant super-
vision as well as for providing necessary information regarding the seminar work.
We would like to express our gratitude towards our parents and member of family
for their kind co-operation and encouragement which help me in completion of this
project. Our thanks and appreciations also go to people who have willingly helped us
out with their abilities.

Jishnu Vyas
Dev Malvi
Henil Modi
Raj Patel

iii
 TABLE OF CONTENTS

CERTIFICATE ii

ACKNOWLEDGEMENT iii

LIST OF TABLES vi

LIST OF FIGURES vi

1 Introduction 1
1.1 Blogging Platform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1.1 History of Blogging . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1.2 Key Features of Blogging Platforms . . . . . . . . . . . . . . . . 1

1.1.3 Building a Blogging Platform with Next.js and Tailwind CSS . . 2

1.2 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 System Planning 4
2.1 Project Development Approach . . . . . . . . . . . . . . . . . . . . . . 4

2.2 Project Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.2.1 Login Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.2.2 Signup Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.2.3 Write Post Screen . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.2.4 Home Page (To Discover Posts) . . . . . . . . . . . . . . . . . . 5

2.2.5 Comment System . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.3 Functional Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . 6

iv
 2.4 Non-Functional Requirements . . . . . . . . . . . . . . . . . . . . . . . 6

2.4.1 Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.4.2 Reliability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.4.3 Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.4.4 Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.4.5 Scalability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.4.6 Compliance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3 Diagrams 8
3.1 ER Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

3.2 Activity Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.3 Use-case Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3.4 Data-Flow Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3.5 Class Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3.6 Sequence Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4 Implementations 14
4.1 Screens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

v
 LIST OF TABLES

2.1 Functional Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . 6

LIST OF FIGURES

3.1 Entity-Relationship Diagram (ERD) . . . . . . . . . . . . . . . . . . . 8

3.2 Activity Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.3 Use-case Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.4 Data-Flow Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.5 Class Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.6 Sequence Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4.1 Sign in Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

4.2 Sign up Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.3 Landing page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

vi
 Chapter 1

Introduction

1.1 Blogging Platform

A blogging platform is a web-based software or service that allows users to create,
manage, and publish content on the internet in the form of blog posts. Blogging has
become an increasingly popular way for individuals, organizations, and businesses to
share their thoughts, ideas, and expertise with a global audience.

1.1.1 History of Blogging

Blogging has its roots in the early days of the internet when personal websites and
online diaries were prevalent. The term ”weblog” was coined in 1997 by Jorn Barger,
and it was later shortened to ”blog” by Peter Merholz in 1999. These early blogs were
often used as a way to share personal experiences and links to interesting content.

1.1.2 Key Features of Blogging Platforms

Modern blogging platforms offer a wide range of features and tools to make it easy for
users to create and manage their blogs. Some of the key features of popular blogging
platforms include:

1. Content Management: Users can create, edit, and organize their blog posts using
a user-friendly interface.
2. Themes and Templates: Bloggers can choose from a variety of themes and tem-
plates to customize the look and feel of their blogs.
3. Multimedia Support: Most platforms allow users to embed images, videos, and
other multimedia content in their posts.
4. Social Sharing: Integration with social media platforms for easy sharing of blog
posts.

1
CHAPTER 1. INTRODUCTION 2

5. Commenting System: Built-in comment sections for interaction with readers.

6. Search Engine Optimization (SEO) Tools: Tools to improve the visibility of blog
posts in search engine results.

1.1.3 Building a Blogging Platform with Next.js and Tailwind

CSS
If you’re considering building your own blogging platform, using modern web devel-
opment technologies like Next.js and Tailwind CSS can be a powerful choice. Next.js
is a popular React framework that provides server-side rendering, routing, and other
essential features for building dynamic web applications. Tailwind CSS is a utility-first
CSS framework that allows you to quickly design and style your application.

Next.js

Next.js offers several benefits for building a blogging platform:

• Server-Side Rendering: Next.js allows you to render pages on the server, improv-
ing performance and SEO.
• Routing: The framework includes easy-to-use routing for creating dynamic and
SEO-friendly URLs.
• Data Fetching: You can fetch data at build time, which is perfect for generating
static blog posts.
• Extensibility: Next.js can be extended with various plugins and libraries to add
features like authentication and user management.

Tailwind CSS

Tailwind CSS simplifies the styling of your blogging platform:

• Utility-First: Tailwind CSS provides utility classes for designing your user inter-
face, making it highly customizable and efficient.
• Responsiveness: You can create responsive designs easily with Tailwind’s respon-
sive classes.
CHAPTER 1. INTRODUCTION 3

• Customization: Tailwind CSS is customizable, allowing you to define your design

system.

By combining Next.js and Tailwind CSS, you can create a fast, dynamic, and visually
appealing blogging platform. This technology stack is ideal for both developers and
designers looking to create a custom and modern blogging experience.

1.2 Conclusion
Blogging platforms have evolved over the years, making it easier for individuals and
businesses to share their content with the world. Leveraging technologies like Next.js
and Tailwind CSS, you can create a unique and feature-rich blogging platform tailored
to your specific needs.
In the next chapter, we will delve deeper into the technical aspects of building a blogging
platform with Next.js and Tailwind CSS.
 Chapter 2

System Planning

2.1 Project Development Approach

Selecting the right development approach is vital to the success of your blogging plat-
form. The choice of development approach determines how the project will be or-
ganized, executed, and managed. Different approaches, such as Agile, Waterfall, or
a hybrid approach, have their advantages and disadvantages. The chosen approach
should align with the project’s goals and constraints.

2.2 Project Modules

The blogging platform can be divided into several modules to manage its functionality
efficiently. Let’s explore some of the key modules that are essential for a successful
platform.

2.2.1 Login Screen

The login screen is the gateway for users to access their accounts. It should provide
a secure and user-friendly authentication process. User credentials, such as email and
password, are typically required for login. Implementing security measures, like en-
cryption and account recovery, is essential to protect user data.

2.2.2 Signup Screen

The signup screen allows new users to create accounts on your platform. Users provide
their details, including name, email, and password, to register. Implementing email
verification and CAPTCHA can enhance security and prevent spam registrations. An
effective signup process is crucial for user acquisition.

4
CHAPTER 2. SYSTEM PLANNING 5

2.2.3 Write Post Screen

The write post screen is where users can create and publish their blog posts. This
module should offer a user-friendly text editor with features like rich text formatting,
image embedding, and post categorization. An effective content management system
(CMS) is essential for bloggers to easily create and manage their content.

2.2.4 Home Page (To Discover Posts)

The home page serves as the entry point for users to discover and explore posts created
by other users. It should feature an engaging and user-friendly design that showcases
a curated list of trending and recent posts. An effective home page can increase user
engagement and retention.

2.2.5 Comment System

A comment system allows users to engage in discussions and provide feedback on

blog posts. It should offer a user-friendly interface for readers to leave comments and
for authors to moderate and respond to them. Implementing features like threaded
comments and comment notifications can enhance user interaction.
CHAPTER 2. SYSTEM PLANNING 6

2.3 Functional Requirements

ID Requirement
FR-001 Users must be able to create an account by providing
their name, email, and password.
FR-002 Users should be able to log in with their registered email
and password.
FR-003 The platform must provide a user-friendly text editor
for creating and editing blog posts.
FR-004 Authors should be able to categorize their blog posts for
better organization.
FR-005 The home page should display trending and recent blog
posts with their titles and authors.
FR-006 Readers must be able to leave comments on blog posts.
FR-007 Authors should have the ability to moderate and re-
spond to comments on their posts.
FR-008 The system should support email verification for new
user registrations.
FR-009 CAPTCHA should be implemented in the signup pro-
cess to prevent spam registrations.

Table 2.1: Functional Requirements

2.4 Non-Functional Requirements

Non-functional requirements describe the qualities, characteristics, and constraints that
your blogging platform should possess. They focus on how the system should perform
and provide a set of criteria for evaluating its overall quality. Here are some common
non-functional requirements for your platform:
CHAPTER 2. SYSTEM PLANNING 7

2.4.1 Performance
• Response Time: The system should provide responsive interactions with min-
imal delay, ensuring that users can perform actions quickly.
• Scalability: The platform should handle an increasing number of users, blog
posts, and comments without a significant degradation in performance.

2.4.2 Reliability
• Uptime: The platform should have a high availability rate to ensure users can
access it consistently.
• Data Integrity: User data, including blog posts and comments, should be se-
curely stored and protected from data corruption.

2.4.3 Security
• Data Encryption: User credentials and sensitive data should be encrypted
during transmission and storage.
• User Authentication: Strong authentication mechanisms should be in place
to prevent unauthorized access to user accounts.

2.4.4 Usability
• User-Friendly Interface: The platform should feature an intuitive and visually
appealing design, ensuring an excellent user experience.

2.4.5 Scalability
• Load Handling: The system should handle spikes in traffic, especially during
periods of high user activity.

2.4.6 Compliance
• Legal Requirements: The platform should adhere to legal and regulatory re-
quirements related to user data protection and content moderation.
 Chapter 3

Diagrams

3.1 ER Diagram

Figure 3.1: Entity-Relationship Diagram (ERD)

8
CHAPTER 3. DIAGRAMS 9

3.2 Activity Diagram

Figure 3.2: Activity Diagram

CHAPTER 3. DIAGRAMS 10

3.3 Use-case Diagram

Figure 3.3: Use-case Diagram

CHAPTER 3. DIAGRAMS 11

3.4 Data-Flow Diagram

Figure 3.4: Data-Flow Diagram

CHAPTER 3. DIAGRAMS 12

3.5 Class Diagram

Figure 3.5: Class Diagram

CHAPTER 3. DIAGRAMS 13

3.6 Sequence Diagram

Figure 3.6: Sequence Diagram

 Chapter 4

Implementations

4.1 Screens

Figure 4.1: Sign in Screen

Figure 4.2: Sign up Screen

14
CHAPTER 4. IMPLEMENTATIONS 15

Figure 4.3: Landing page