Scribd
Upload
20 views

Blog Report1

The document describes building a blog website using React, Next.js and MongoDB. It discusses setting up the development environment, installing dependencies, designing the website structure and key pages like the navbar, write page and login page.

Uploaded by

syedmurtuzayt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

Blog Report1

The document describes building a blog website using React, Next.js and MongoDB. It discusses setting up the development environment, installing dependencies, designing the website structure and key pages like the navbar, write page and login page.

Uploaded by

syedmurtuzayt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

Project Report

Blog Website Development


Team Name:(Team AVM)

Team Leader: Syed Murtuza

Internship Company: Varcons Tech

Team Members

- Syed Murtuza [1HM20CS040]


- VinyakMangalagi[1HM20CS044]
- Akash G Kadatada[1HM20CS005]

[Team AVM]
[Contact Information :
[email protected] ]
Date: [20.9.2023]
TABLE OF CONTENT

CONTENT

1.TITLE & INTRODUCTION. PG1


2. Setting UP (INSTALLATION). PG2

3.FIGMA DESIGN. PG9

4.DESIGN STRUCTURE OF WEB. PG10

5.FUNTIONALITES. PG10

6.WRITEPAGE. PG11

7.LOGIN PAGE. PG15

8.BREAKDOWN OF WEB DESIGN. PG16

9.CODE SNIPPET. PG18


Title: Building a Blog Website with
React, Next.js, and MongoDB
Introduction
In the digital age, the internet has become a primary
platform for information sharing and personal expression.
Blogs have emerged as a powerful medium for individuals,
organizations, and businesses to communicate, educate,
and connect with a global audience. Building a blog
website not only allows you to share your thoughts,
experiences, and expertise but also provides an
opportunity to showcase your technical skills.

This report explores the creation of a blog website using a


modern technology stack that combines the strengths of
React, Next.js, and MongoDB. React, a popular JavaScript
library for building user interfaces, offers a dynamic and
interactive frontend. Next.js, a framework built on top of
React, enables server-side rendering and efficient routing,
enhancing the website's performance and SEO. MongoDB,
a NoSQL database, provides a flexible and scalable data
storage solution, making it suitable for managing blog
content.
Library, Framework & Database :
• React: A popular JavaScript library for building user
interfaces.
• Next.js: A React framework for server-side rendering
and routing.
• MongoDB: A NoSQL database for storing and retrieving
blog content.

Project Overview
1. Setting Up the Development Environment

Before starting the project, ensure you have the necessary


tools installed:

• Node.js and npm (Node Package Manager)


• MongoDB database
• Code Editor (e.g., Visual Studio Code)

Setting Up

Import the given files and source-code in visual studio:

Image References Below


*To install Node.js on Windows, follow these steps:
1. **Download Node.js**:

Go to the official Node.js website at [https://nodejs.org/](https://nodejs.org/).

- You'll see two versions available for download: "LTS" (Long Term Support) and
"Current." It's generally recommended to download the LTS version for stability
unless you have a specific reason to use the Current version.

- Click on the "LTS" or "Current" version, and the installer will start downloading.

2. **Run the Installer**:

Once the installer is downloaded, double-click on the downloaded file (it should
have a filename like `node-vxx.x.x-x64.msi`, where `xx.x.x` represents the version
number).
3. **Installation Wizard**:

- You will see a Windows Installer dialog. Click "Next" to begin the installation.

- Accept the license agreement and click "Next."

- Choose the installation location or use the default location (recommended)


and click "Next."

- Select the components you want to install. It's recommended to keep the
default options, which include Node.js runtime and npm (Node Package
Manager).

- Click "Next" to proceed.

- Choose the Start Menu folder for Node.js and click "Next."

- Check the box that says "Automatically install the necessary tools..." if it's not
already checked. This option ensures that npm will work properly.

- Click "Install" to start the installation process.

4. **Completing the Installation**:

Once the installation is complete, click "Finish" to exit the installer.

5. **Verify the Installation**:

To verify that Node.js and npm have been installed successfully, open a
Command Prompt or PowerShell window and run the following commands:
node -v
npm -v
These commands should display the installed Node.js and npm versions. If you
see the version numbers, it means Node.js has been successfully installed on your
Windows system.
Install npm from Visual Studio Code's
integrated terminal on Windows, follow
these steps:

Image Reference Below :


*Installation of yarn :

Install Dependencies: To install the project's dependencies using


Yarn, run the following command in the terminal:
yarn install
Run Yarn Dev: Once you have set up your scripts (if
necessary), you can run your development environment
using Yarn. For example, if you created a "start" script as
shown above, you can run it with the following command:

yarn dev. in terminal


Then VScode terminal shows the link:
http://localhost:3000 then click then link you are
fully ready to walkthrough the bloging! website.

Figma : is a versatile tool used for a wide range of


design projects, not just web design. It's also
commonly used for mobile app design, UI/UX
design, and more. So, you can adapt its features to
your specific web design needs.

Link Of Web Design In Figma:


https://www.figma.com/file/LsM8ju5IhLr5HhFzanuu3
i/BlogHUb?type=design&node-
id=3%3A224&mode=design&t=ZHwrypigdfij1udp-1

Design Structure of web :

https://app.eraser.io/workspace/aSshPSKlaKr8XiddBdl
v?origin=share

Functionalites:
Also Have Black Theme:

~ToggelMenu.

Writeing Page:

You can write Title of your blog in Titel Container,


And the Description of your blog in Tell
Your’s Story Container below.
Exampel:
You can also Customization the Text like
You can Bold the Style of Text, Add the Links to Text and
many more.

Examples given below:

What you can do with WritePage?

You can Add H1 (or) H2 Tag Make The Text Bigger And
Also UnderLine The Text
You Can Add Coped Text.
You Also Add Images And Videos, Buy Clicking The Plus
Button (+) Below The Title Container, After Click Then 3
more Buttons Occurs, For Adding Img And Video.

Login Page :
Using NextAuth, Configuration : GoogleCloud
Services
Breakdown of web design:

Layout: The web page contain 4 section.

1. NavBar:

Contains:

Logos => SocialMedia ,


(Links) : homepage, contactUs, about,
And Your Blog. PopularCategories(Section).
2.RecentPost(Section):

Is Divided Into 3 Parts


1.MostPopular(Section).
2.Categories(Section).
3.Editors Pick (Section).
4.Footer:

Slug Page :

Also Have Comment Section:


Categories Page: [Style,Fashion..ect]
Code Snippet: NavBar
React component called Navbar. This component seems to
be a part of a Next.js project, as it imports Next.js
components like Image and Link. The Navbar component
appears to be a navigation bar for your application.

Here's a breakdown of the code:

1. Import Statements: You import various modules and


components at the beginning of the file. These include React,
CSS styles from a navbar.module.css file, Next.js Image, Link,
and custom components like AuthLinks and ThemeToggle.
2. Component Definition: You define the Navbar functional
component. It appears to be a stateless functional
component as it doesn't have any state or lifecycle methods.
3. Component JSX: Inside the component's render function,
you return JSX (JavaScript XML) to define the structure and
layout of your Navbar component. Here's what it does:

• It creates a container div with the class name


styles.container. The CSS class styles.container
likely contains styling information for your Navbar
component.
• Inside this container, you have a div with the class
name styles.social, which seems to contain social
media icons (Facebook, Instagram, TikTok, and
YouTube) displayed using Next.js Image components.
• Next, you have a div with the class name styles.logo
displaying the text "BlogHub." This appears to be your
application's logo or branding.
• Finally, you have a div with the class name
styles.links that includes:

• A ThemeToggle component, which likely allows


users to switch between light and dark themes.
• A series of Link components from Next.js, which
seem to be used for navigation. However, the href
prop for all the links is set to " /", which points to
the homepage. You may want to update these
links to their respective destinations.
• An AuthLinks component, which likely handles
authentication-related links, such as login and registration.

This Navbar component appears to be a basic navigation bar


structure with some placeholder content. You can customize and
extend it to suit your application's specific requirements by
updating the content and functionality within this component.
Additionally, make sure to configure the Link components with
the correct URLs for navigation.
The Code: Navbar.jsx
The Code: Navbar.Css
. Project Link:

https://github.com/MurtuzaGithub/BlogWeb

You might also like