MERN STACK INTERNSHIP

WITH
WEBSTACK ACADEMY

PROJECT NAME: HomelyHub app using MERN STACK

PRESENTED BY: GOLLANGI JAGANMOHANA RAO

GOAL OF INTERNSHIP

Creating an HomelyHub Application using

MERN STACK
What is MERN STACK?

The MERN stack is a popular JavaScript stack used for building modern web
applications. MERN is an acronym that stands for:

1.MongoDB: A NoSQL database that uses a document-oriented data model. It

stores data in flexible, JSON-like documents, making it easy to manage and
scale.

2.Express.js: A web application framework for Node.js, designed for building

web applications and APIs. Express.js simplifies the process of creating robust
server-side applications with Node.js.

3.React.js: A JavaScript library for building user interfaces. React.js is

maintained by Facebook and allows developers to create interactive and dynamic
UI components for web applications.

4.Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js

allows developers to run JavaScript code on the server-side, enabling them to
build scalable and high-performance web applications.
What is MangoDB?

 MongoDB is a popular NoSQL database management system, known for its flexibility and
scalability.
 It stores data in a flexible, JSON-like format called BSON (Binary JSON), making it suitable for
handling unstructured or semi-structured data.
 MongoDB uses a document-oriented data model, where data is stored as collections of
documents rather than in traditional tables and rows.
 It supports dynamic schema design, allowing documents within a collection to have different
structures, which can evolve over time
What is Express.js?

 Express.js is a web application framework for Node.js, designed to simplify the process of
building web applications and APIs.
 It provides a robust set of features for handling HTTP requests and responses, routing,
middleware management, and more.
 Express.js is minimalist and unopinionated, allowing developers to structure their applications
according to their preferences and requirements.
What is React.js?

 React.js, commonly referred to as React, is a JavaScript library for building user interfaces,
particularly for single-page applications (SPAs) and dynamic web applications.
 Developed and maintained by Facebook, React allows developers to create reusable UI
components that represent different parts of a web application's user interface.

What is Express.js?

 Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.

 It allows developers to run JavaScript code on the server-side, enabling them to build scalable
and high-performance web applications.

 Node.js uses an event-driven, non-blocking I/O model, making it efficient and suitable for
building real-time web applications and APIs.
WHAT IS FULL STACK?

Full stack development is the process of developing both the frontend and backend of
applications. Any application has a frontend (user-facing) component and a backend
(database and logic) component. The frontend contains the user interface and code
related to user interactions with the application.

FrontEnd technologies:

Frontend technologies include HTML, CSS, JavaScript and REACT.

BackEnd technologies:
Backend technologies are tools and frameworks used to create the server-side logic and
functionality of web applications. Common examples include Node.js, Django, Flask,
Ruby on Rails, Spring Boot, ASP.NET Core, and Laravel.
What is HTML?
 HTML stands for Hypertext Markup Language. It is the standard markup language used to create
the structure and content of web pages.
 HTML consists of a series of elements or tags that define the various components of a webpage,
such as text, images, links, forms, and multimedia content.
 These elements are enclosed in angle brackets (<>) and typically come in pairs, with an opening
tag and a closing tag. HTML is the backbone of web development and is essential for creating
and formatting the content of websites.

What is CSS?
 CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the
presentation and visual styling of HTML documents.
 CSS allows web developers to control the layout, design, and appearance of web pages,
including elements such as fonts, colors, spacing, borders, and positioning.
 By separating the content (HTML) from its presentation (CSS), developers can create
consistent and visually appealing designs across multiple web pages.
 CSS can be applied directly within HTML documents using inline styles, embedded within
the <style> element in the document's head, or linked externally to a separate CSS file.
What is JAVASCRIPT?

 JavaScript is a high-level programming language primarily used for building dynamic and
interactive web applications.
 It is a versatile language that can be used both on the client-side (in web browsers) and
server-side (with platforms like Node.js).
 JavaScript enables developers to add functionality to web pages, handle user interactions,
manipulate the Document Object Model (DOM), perform asynchronous requests to servers,
and create responsive and interactive user interfaces.
What is REACT?

 React is a JavaScript library for building user interfaces, developed by Facebook. It utilizes a
component-based architecture for creating reusable UI elements.
 React's virtual DOM optimizes performance by minimizing direct DOM manipulation. It
encourages a declarative programming style, simplifying UI development.
 With its rich ecosystem and active community, React is widely used for building modern web
applications
 HomelyHub app
using
MERN STACK

 HomelyHub is a platform that lets people

find and book unique places to stay while
traveling.
 Whether it's a cozy home or a fancy villa, or
room, you can experience a personalized
stay.
 Hosts can also earn money by sharing their
spaces.
 so, Explore the world with HomelyHub for a
unique and comfy adventure!"
Architecture:
 The HomelyHub project using the MERN (MongoDB, Express.js, React, Node.js) stack is designed to replicate the
core functionalities of the Airbnb platform.
 The architecture comprises a MongoDB database to store property and user data, while Express.js handles server-
side logic and API endpoints.
 React is employed for building the user interface, providing a dynamic and responsive experience for property
listings and bookings.
 Node.js serves as the runtime environment for server-side execution, ensuring seamless communication between
the front and back ends.
 The project follows a modular structure, with components for user authentication, property search, and booking
features.
 Redux is integrated for efficient state management, enabling a smooth flow of data within the application.
 Additionally, the project employs RESTful API principles to facilitate communication between the client and
server, ensuring a scalable and maintainable codebase.
FEATURES

 User Authentication: Allow users to sign up, login, and manage their profiles i.e., update users profile
and password.
 Search and Filters: Implement a search feature with filters to enable users to easily find properties
based on location, dates, pricing, and amenities, enhancing the overall user experience.

 View Listings: Users can view detailed information about each accommodation, including photos,
descriptions, amenities.

 Property Listings: Allow property owners to list their accommodations, providing details such as images,
descriptions, amenities, and pricing, etc.

 Booking System: Develop a booking system that allows users to select desired dates, view pricing, and
confirm reservations, with real-time updates on availability and booking status.

 User Profiles: Implement user profiles where individuals can manage their bookings, update personal
information, and track their property listing activity.

 Payment Integration:Integrate a secure payment gateway to handle transactions, allowing users to make
reservations and property owners to receive payments seamlessly.

 Responsive Design: Ensure a responsive and visually appealing design that adapts to various devices,
providing a consistent and user-friendly experience on both desktop and mobile platforms.
Screenshots