Project Report

On

Travel Story
Submitted in
Partial fulfilment of the
Requirement for the degree of
BACHELOR OF TECHNOLOGY
In
COMPUTER SCIENCE & ENGINEERING
(Session 2022-2026)

Under the guidance of

Submitted by:
Shivam Pathak (2224563)
Shivam Yadav (2224566)
Shivank Tiwari (2224568)

I. K. Gujral Punjab Technical University

of this project. The experience and knowledge we gained during its development have

significantly boosted our confidence in working with a variety of technologies that we were

initially hesitant to tackle.

We are profoundly grateful for the guidance, support, and mentorship provided by Ms.

Jagminder Mam and Ms. Pallavi Mam.

Their assistance at every step of the way and their constant motivation were instrumental in

enabling us to accomplish our tasks effectively.

We would also like to express our gratitude to all the supporting personnel who provided the

essential and vital equipment necessary for the project. Without their contributions, We would

not have been able to perform efficiently.

Additionally, we want to acknowledge the unwavering support from my peers and friends.

Their encouragement and positive reinforcement were crucial in fueling our efforts throughout

this journey.

Thank you all for being an integral part of this experience.

Shivam Pathak

Shivam Yadav

Shivank Tiwari

B.Tech, 6th Semester

Computer Science & Engineering

2
 Abstract
Travel Story is a full-stack MERN (MongoDB, Express.js, React.js, Node.js) web application

designed to help users document and share their travel experiences in a structured, visually

appealing, and interactive way. The platform serves as a personal travel journal, allowing users

to create detailed entries about their journeys, complete with titles, descriptions, locations, and

images.

One of the core strengths of Travel Story lies in its clean, intuitive user interface built using

React.js and Tailwind CSS. Users can easily navigate through the application, browse existing

travel stories, and view individual posts in detail. On the backend, Express.js and Node.js

handle data processing and routing, while MongoDB serves as the database to store user

accounts and story content efficiently.

Purpose:

The primary purpose of Travel Story is to provide users with a dedicated platform to

document, share, and relive their travel experiences in an organized and visually engaging way.

In today’s fast-paced digital world, travelers often seek a space where memories can be

preserved meaningfully — not just through photos, but through stories, locations, and personal

reflections.

Travel Story serves as a digital travel journal that allows users to create detailed entries about

their trips, including destination names, travel dates, personal notes, and image uploads. It

enables users to curate a timeline of their journeys, helping them revisit and reflect on their

adventures whenever they wish.

3
Beyond personal journaling, the platform also fosters inspiration and community. By exploring

stories shared by other users, travelers can discover new destinations, hidden gems, and

authentic experiences around the world.

Methods:

The Travel Story project follows a full-stack development approach, leveraging the MERN

stack (MongoDB, Express.js, React.js, Node.js) to deliver a seamless, responsive, and

scalable web application.

The frontend of the application is developed using HTML, CSS, JavaScript, and React.js,

creating a dynamic and interactive user interface. The use of React.js enables efficient

component-based architecture, real-time updates, and smooth navigation, ensuring an engaging

experience for users across both desktop and mobile devices.

On the backend, Node.js and Express.js are used to build a robust server-side infrastructure

that handles API routing, data processing, and communication with the database. The backend

is designed to be scalable and efficient, supporting all necessary operations such as content

management, user requests, and data validation.

The application uses MongoDB as the NoSQL database, where user profiles, travel stories,

images, and metadata are stored. Its flexible schema and document-oriented design make it

ideal for handling the diverse and dynamic nature of user-generated content in the application.

Authentication and session management are securely handled using JWT (JSON Web

Tokens). This ensures that users can register, log in, and manage their personal stories with full

security and privacy.

To further enhance user experience, a chatbot is integrated using either machine learning

models or rule-based logic. The chatbot serves as a virtual assistant, helping users navigate

4
the platform, answer common questions, and guide them through functionalities like story

creation or account setup in real-time.

This methodical full-stack approach ensures that Travel Story remains responsive, secure, and

feature-rich while offering a smooth and intuitive journaling experience to users.

Outcomes:

The final product, Travel Story, is a fully functional, responsive, and user-friendly web

application that allows users to document and relive their travel experiences in a structured and

engaging way. Users can create personal travel stories by adding details such as destination

names, travel dates, descriptions, and images.

The platform supports secure user authentication and provides complete CRUD (Create,

Read, Update, Delete) functionality, allowing users to manage their content efficiently. Each

user has a personalized space to maintain and organize their travel journals, making the

experience both personal and meaningful.

Built using the MERN stack, the application ensures smooth performance and seamless

operation across different devices and screen sizes. It also includes features like search and

filter options, enabling users to easily browse through their own stories or explore content

shared by others.

Overall, Travel Story successfully achieves its goal of offering a digital platform for travel

lovers to preserve memories, share experiences, and inspire others, while showcasing a strong

grasp of full-stack web development principles.

5
 Table of Contents
1. Introduction ………………………………………………………8 - 11

i. Problem Statement ………………………………………………………………

ii. Objectives ……………………………………………………………………….

iii. Scope …………………………………………………………………………….

iv. Significance ……………………………………………………………………..

2. System Analysis …………………………………………………12 - 14

i. Proposed system ………………………………………………………………...

ii. Feasibility study …………………………………………………………………

3. System Design……………………………………………………...15 - 20

i. Architecture Diagram …………………………………………………………...

ii. Data Flow Diagrams / UML …………………………………………………….

iii. Module Descriptions …………………………………………………………….

4. Code of Project ……………………………………………………21 - 31

i. Main Entry Point ………………………………………………………………...

ii. Module and Class Overview …………………………………………………….

iii. Important Functions ………………………………………………………...

iv. Configuration File Access ……………………………………………………….

v. Error Handling Mechanism ……………………………………………………..

vi. Compatibility with Windows Versions ………………………………………….

vii. Reusability and Modularity ……………………………………………………

6
5. Implementation ……………………………………………………32 - 45

i. Tools/Technologies Used ………………………………………………………..

ii. Screenshots of the software ……………………………………………………..

iii. Description of important functions/modules ……………………………………

6. Testing ……………………………………………………………...46 - 50

i. Test cases ………………………………………………………………………..

ii. Expected vs Actual Results ……………………………………………………...

iii. Bug reports ………………………………………………………………………

7. Conclusion and Future Scope …………….………………………51 - 55

i. What has been achieved …………………………………………………………

ii. Limitations ………………………………………………………………………

iii. Possible future enhancements …………………………………………………...

7
 1.Introduction
1.1 Problem Statement:

In the current digital landscape, individuals with a passion for travel often lack a reliable and

purpose-built platform where they can systematically document, preserve, and revisit their

journeys. While social media platforms allow users to share moments, they are not designed

for long-form storytelling, structured organization, or private reflection. Traditional blogging

platforms, on the other hand, often require technical skills and lack simplicity for everyday

users.

This results in scattered memories—photos stored in phones, experiences forgotten over time,

and valuable insights left unshared. Additionally, people who seek travel inspiration or want to

learn from real experiences often find it difficult to access genuine, detailed travel stories. There

exists a clear gap in the market for a dedicated digital travel journaling solution that balances

simplicity with functionality, allowing users to not only write and organize their travel

experiences but also revisit and share them with a community of like-minded explorers.

1.2 Objectives:

To design and develop a robust full-stack web application that serves as a digital journal

exclusively for travel stories, enabling users to document their trips in detail and store them

securely.

To create an intuitive and responsive user interface that supports story writing, location

tagging, photo uploads, and timeline-based display of travel entries.

8
 To implement secure user authentication and authorization systems using modern

technologies such as JWT, ensuring that each user’s data and stories are protected and

personalized.

To build CRUD (Create, Read, Update, Delete) functionality that empowers users to have

complete control over their content—enabling edits, deletions, and updates as needed.

To provide search and filter capabilities, allowing users to easily browse through their

own stories or explore inspiring experiences shared by others based on keywords, dates, or

destinations.

To ensure cross-device compatibility, making the application accessible and functional on

desktops, tablets, and smartphones alike.

1.3 Scope:

• This project encompasses the complete end-to-end development of a fully functional

travel journaling web application titled Travel Story, using the MERN stack. The

platform is designed with the following major components and features:

• A modern frontend interface built with React.js, offering a seamless and user-friendly

experience for content creation, display, and interaction.

• A backend system using Node.js and Express.js, responsible for handling all server-

side operations including routing, data handling, and API integration.

• A MongoDB database to efficiently store structured data such as user accounts, travel

stories, images, and story metadata, with scalability in mind.

• A secure user authentication system using JWT tokens, ensuring protected access to

user dashboards and stories.

9
 • Full CRUD operations, allowing users to create new travel entries, read and browse

stories, update details, or delete content when necessary.

• Search and filter mechanisms, empowering users to quickly locate stories based on

destination names, travel dates, or user-defined tags.

• A responsive design that ensures full usability on multiple devices, enhancing

accessibility and user satisfaction.

• This scope ensures the development of a reliable, user-focused platform that transforms

the way travel memories are stored and shared digitally.

1.4 Significance:

Travel Story stands out as a unique solution in the space of personal digital documentation,

tailored specifically to travelers who wish to preserve and relive their experiences in a

meaningful way. By offering a platform that is both aesthetically pleasing and functionally rich,

the application encourages users to go beyond quick photo uploads and instead engage in

thoughtful storytelling.

This platform significantly improves the user’s ability to organize memories, reflect on their

journeys, and share detailed narratives with friends, family, or the larger travel community. It

also acts as a source of inspiration for other travelers who are seeking firsthand experiences

and real-world insights about places they wish to explore.

From a technical standpoint, Travel Story demonstrates the practical application of full-stack

development skills, database management, authentication systems, and responsive design. It

showcases the potential of combining user-centered design with robust backend infrastructure

to deliver a product that is both meaningful and technically sound.

10
In essence, Travel Story contributes to the broader goal of digital preservation and community

storytelling, making it a valuable project not only for personal growth and expression but also

for professional demonstration in the field of web development.

11
 2.System Analysis
2.1 Proposed System:

The proposed system, titled Travel Story, is a full-stack web application developed with the

purpose of offering users a personalized and efficient platform to digitally document their travel

experiences. Unlike traditional blogs or social media platforms that are either too technical or

too brief for storytelling, Travel Story provides a tailored space for creating, organizing, and

preserving detailed travel memories in a structured format.

This application aims to replace the scattered and informal ways of preserving travel

memories—such as storing images in gallery folders or jotting notes in physical journals—

with a centralized digital solution that is both intuitive and feature-rich. Users can securely

register, log in, and maintain their own travel journals by adding details such as trip title,

destination, travel dates, story content, and images. Each story is saved in a database and can

be revisited or edited anytime.

The proposed system emphasizes clean design, responsiveness, and a user-first approach.

Whether on a mobile phone or a desktop computer, users can expect a seamless experience

with easy navigation and optimized layout. The entire application is built using the MERN

stack (MongoDB, Express.js, React.js, Node.js), ensuring modern architecture and efficient

development practices.

Key Features of the Proposed Travel Story Application:

• User Authentication & Authorization: Secure login and registration using JWT

tokens, ensuring that each user has protected access to their personal content.

12
 • Story Management (CRUD): Users can Create, Read, Update, and Delete their

travel stories. Each story supports details like trip title, destination, date, description,

and image uploads.

• Responsive Design: Fully optimized for mobile and desktop devices using modern

CSS and component-based frontend design via React.js.

• Search and Filter Capability: Users can search stories by title, keyword, or destination

and filter by travel dates for quick content access.

• Media Integration: Users can upload travel images to visually enhance their stories,

with all content safely stored in MongoDB.

• Scalable Backend Services: Backend APIs are designed using Node.js and Express.js

to handle story creation, user data, and other interactions efficiently.

• User Dashboard: A clean dashboard interface where users can manage their stories,

profile, and navigation with ease.

This system offers travelers a rich, personal, and visually pleasing space for storytelling, while

also showcasing practical skills in modern web development.

2.2 Feasibility Study:

1. Technical Feasibility:

The Travel Story application is developed using reliable, stable, and widely adopted open-

source technologies. The frontend is built with React.js, ensuring a responsive and dynamic

user interface with efficient component reusability. The backend uses Node.js and Express.js

for fast, event-driven server operations. MongoDB serves as the NoSQL database, storing user

data and travel stories with flexibility and scalability.

13
Hosting is easily manageable using services like Render, Vercel, or Heroku, making the system

lightweight in terms of infrastructure needs while still supporting future scalability. All

components are modular and decoupled, ensuring that future upgrades or feature additions (like

maps integration or social sharing) can be implemented smoothly.

2. Operational Feasibility:

The application is designed with a user-centric approach, making it highly intuitive and easy

to use for individuals with minimal technical expertise. Users can effortlessly navigate through

the dashboard, add or manage stories, and upload images without confusion. The layout is

clean, minimal, and distraction-free, ensuring the storytelling experience remains central.

From an operational standpoint, administrators can maintain and update the system with

minimal effort, and the user interface can be adapted in future based on user feedback. The

CRUD structure and database schema are built to accommodate long-term usage without

performance degradation.

3. Economic Feasibility:

The use of open-source technologies significantly reduces development and deployment costs.

There are no licensing fees, and all tools (React.js, Node.js, MongoDB, Express.js) are

community-supported and well-documented. Hosting on free-tier platforms for testing or low-

cost services for production ensures budget-friendliness.

Additionally, the modular architecture ensures minimal maintenance and support costs over

time. If monetization is planned in the future (e.g., premium accounts or ads), the platform can

easily be extended to support such features. Overall, the project remains economically viable

while offering high value to users.

14
 3. System Design
3.1 Architecture Diagram:

The architecture of Travel Story is based on a modern three-tier web architecture,

ensuring separation of concerns, scalability, and ease of maintenance. It consists of the

following layers:

1. Presentation Layer (Frontend):

• Developed using React.js, the frontend is responsible for managing user interactions.

• Users can register, log in, and perform CRUD operations on travel stories.

• Forms are provided for entering travel details including title, destination, date,

description, and image uploads.

15
 • The UI is responsive, ensuring smooth usability on desktops, tablets, and mobile

devices.

2. Application Layer (Backend):

• Built with Node.js and Express.js, this layer handles application logic and serves as

the bridge between frontend and database.

• It manages API endpoints for user authentication, story operations, data validation, and

secure routing.

• Middleware components process HTTP requests and enforce session and role-based

access control.

3. Data Layer (Database):

• Utilizes MongoDB to store structured user data and travel stories in collections.

• Each user document includes credentials and related metadata.

• Each story document includes destination, travel date, narrative content, and references

to images and the user ID.

This architecture allows modular development, simplifies debugging, and offers scalability for

future enhancements such as public sharing, comments, or cloud storage for images

3.2 Data Flow Diagram

16
3.2 Data Flow Diagram (DFD)

Level 0 DFD (Context-Level Diagram):

At the highest level, the Travel Story application is represented as a single process that

interacts with two external entities:

External Entities:

• User (Traveler): The primary system user who creates and manages travel stories.

Primary Data Flows:

• User to System: Registers, Logs in, Creates/Edits stories, Uploads media.

• System to User: Returns confirmation, displays stories, allows content management.

Level 1 DFD (Detailed View):

The system is broken into four major internal processes:

1. User Authentication Module

17
 • Manages registration, login, and token generation using JWT.

• Verifies credentials and controls access to user-specific content.

2. Story Management Module

• Allows users to create, read, update, and delete stories.

• Supports data input for destination, date, story text, and photo upload.

• Retrieves stories from the database and renders them in the frontend.

3. Media Handling Module

• Manages image upload and storage references.

• Validates file formats and stores file paths securely in MongoDB.

• Links images with the corresponding story entry.

4. Search & Filter Module

• Provides real-time filtering of travel stories by keywords, destinations, or dates.

• Enhances navigation and content discoverability within the user dashboard.

Data Stores:

• D1: User Database – Stores user login data, profile info, and authentication tokens.

• D2: Story Database – Stores all travel stories, including text, dates, and image paths.

• D3: Media Storage/References – Stores image data or cloud storage references.

3.3 Module Descriptions

1. Authentication Module

• Facilitates user registration and login functionality using JWT.

18
 • Ensures secure session handling and protects user-specific data.

• Implements password hashing, input validation, and access control.

2. Story Management Module

• Core component allowing users to:

o Create new stories by providing trip title, description, location, and image.

o Read and browse their saved stories.

o Update previously saved stories to reflect edits.

o Delete stories they no longer wish to keep.

• Uses Express.js routes and MongoDB schemas to manage data flow between client

and server.

3. Media Handling Module

• Allows users to attach photos to their stories.

• Validates file types and handles image previews and uploads.

• Ensures uploaded media are linked to the correct story for later retrieval.

4. User Dashboard Module

• Presents a clean and intuitive UI for each user.

• Allows users to:

o View their own stories in chronological or filtered order.

o Search through past experiences by destination or keyword.

o Edit or delete entries directly from the dashboard.

19
 • Responsive layout makes it accessible across all screen sizes.

5. Search and Filter Module

• Enhances user experience by enabling smart content search.

• Filters stories based on travel destination, title keywords, or travel dates.

• Helps users organize and retrieve entries from large sets of stored stories.

This modular design ensures that each part of the application can be developed, tested, and

maintained independently, offering both flexibility and performance.

20
 4. Code of Project
4.1 Main Entry Point

21
22
4.2 Module and Class Overview

23
4.3 Important Functions

24
25
4.4 Configuration File Access

26
4.5 Error Handling Mechanism (Travel Story)

The Travel Story application incorporates a robust and scalable error-handling

system designed to ensure graceful failure responses and simplify debugging

during development and maintenance.

A centralized error handler is implemented using an Express middleware file,

typically named errorMiddleware.js. This middleware acts as a catch-all for any

uncaught errors that occur during the execution of routes or controller logic.

Inside each controller function (such as those handling user registration, login,

story creation, or story editing), try...catch blocks are used to encapsulate

asynchronous operations. Whenever an error is caught, it is passed to the next

middleware, which is the centralized error handler.

The error handler then:

• Logs the error (with stack trace in development mode).

• Sends a consistent and structured JSON response back to the frontend,

which may include:

o Error message

o HTTP status code

o Optional error code for frontend mapping

27
 • Prevents application crashes and ensures the frontend receives meaningful

feedback (e.g., “Invalid credentials” or “Story not found”).

This method ensures consistency in API responses and helps developers quickly

identify and resolve issues without affecting the user experience.

4.6 Compatibility with Windows Versions (Travel Story)

The Travel Story application is built using platform-independent technologies,

ensuring it works seamlessly across major operating systems, especially

Windows 10 and Windows 11.

Key compatibility features include:

• The backend runs on Node.js v14 or higher, which is fully supported on

Windows platforms without the need for additional configurations.

• The frontend, developed using React.js, is accessible via all modern

browsers such as Google Chrome, Microsoft Edge, Firefox, etc., which

are compatible with Windows environments.

• All development and testing were performed on Windows systems,

confirming full compatibility for deployment, local development, and

usage.

There are no OS-specific dependencies or libraries used in this project. All

scripts and commands (npm scripts, MongoDB shell commands, etc.) are cross-

28
platform or easily adaptable for Windows terminals such as Command Prompt,

PowerShell, and Windows Terminal.

In summary, Travel Story is platform-agnostic and designed to offer a smooth

experience regardless of the system on which it is deployed or accessed, with

primary compatibility verified on Windows 10 and 11 systems.

4.7 Reusability and Modularity (Travel Story)

Travel Story follows a clean, modular, and reusable code architecture, which

not only simplifies current development but also ensures future scalability and

maintainability.

Backend:

• The backend is structured in a modular format using separate folders for:

o Routes (e.g., authRoutes.js, storyRoutes.js)

o Controllers (handling business logic)

o Models (for MongoDB schemas)

o Middleware (e.g., authentication, error handling)

o Utils (reusable helper functions)

• This structure promotes the Separation of Concerns (SoC) principle,

making each file responsible for a specific part of the logic.

29
 • Controllers and middleware are reusable across routes and can be

extended easily to support new features like role-based access or new APIs.

Frontend:

• The React.js frontend uses a component-based structure, with reusable

components like:

o StoryCard (used in listing views)

o StoryForm (used for both create and edit operations)

o Navbar, Footer, and Dashboard elements

• Components are stateless or stateful as needed and communicate via props,

improving code clarity and flexibility.

• Hooks and utilities are centralized for data fetching and form validation,

promoting DRY (Don't Repeat Yourself) principles.

Future Scalability:

• The modular design allows easy addition of new features such as:

o Admin Panel

o Story Rating System

o Commenting Functionality

o Email Notifications

30
 • Support for additional roles like admin users, travel editors, or public

readers can be introduced with minimal changes to the core logic.

In conclusion, Travel Story is designed as a reusable, modular, and extensible

web application that adheres to best practices in software engineering, setting a

solid foundation for ongoing development and future upgrades.

31
 5: Implementation
4.2 Tools and Technologies Used (Travel Story)

The Travel Story application is developed using a modern MERN stack

(MongoDB, Express.js, React.js, Node.js), ensuring high scalability,

maintainability, and responsiveness across all devices. The following

tools and technologies were used throughout the project development

lifecycle:

Frontend Development Technologies:

• HTML (HyperText Markup Language):

o Used to structure the content of the travel story web pages.

o Forms the skeleton of all components including the dashboard,

story forms, and story listing cards.

• CSS (Cascading Style Sheets):

o Provides basic layout styling, visual formatting, spacing,

typography, and visual consistency across pages.

o Used alongside Tailwind CSS for finer control over design.

• JavaScript:

o Enables client-side interactivity including form validation, filtering

stories, and dynamic UI updates.

32
 o Core scripting language for both frontend logic and API calls to

backend endpoints.

• React.js:

o A powerful JavaScript library used to build the frontend using

reusable and stateful components.

o Supports efficient state management using hooks (useState,

useEffect) and allows smooth routing via React Router DOM.

o Enables Single Page Application (SPA) behavior with real-time UI

updates.

• Tailwind CSS:

o A utility-first CSS framework used to build a responsive and

modern UI quickly.

o Helps in building components with consistent padding, margin,

flexbox, grid, and animations.

o Speeds up the development by avoiding repetitive CSS class

creation.

Backend Development Technologies:

• Node.js:

o A server-side JavaScript runtime environment that enables building

scalable backend services.

33
 o Runs the Express.js server and handles all incoming HTTP requests

from the frontend.

• Express.js:

o A minimalist and flexible Node.js web application framework used

to build RESTful APIs.

o Handles routing, middleware, error handling, and interaction with

the database in a clean and modular manner.

Database Technology:

• MongoDB:

o A NoSQL database used to store user data, travel stories, and

associated metadata.

34
 o Supports document-based storage, which aligns well with the

flexibility of story data like descriptions, destinations, images, and

user IDs.

o Managed through the Mongoose ODM (Object Data Modeling)

library for schema definition and CRUD operations.

Authentication and Security:

• JWT (JSON Web Tokens):

o Used to implement secure token-based authentication between the

client and server.

o Tokens are issued upon successful login and are used for route

protection, ensuring only authorized users can access certain

endpoints.

• bcrypt.js:

o A password hashing library used to encrypt user passwords before

storing them in the database.

o Protects user credentials against brute force and dictionary attacks.

Development Tools:

• Visual Studio Code (VS Code):

o The primary code editor used for developing both the frontend and

backend of the project.

35
 o Supports various extensions for auto-formatting, linting, Git

integration, and debugging.

• Postman:

o Used extensively during backend development to test API

endpoints for user registration, login, story creation, and other

CRUD operations.

o Helps simulate different request types (GET, POST, PUT,

DELETE) and test authentication tokens.

• Git:

o A distributed version control system used to track changes in

source code and collaborate efficiently.

o Ensures code history and rollback capabilities during development.

• GitHub:

o Serves as the remote repository to store and manage the project’s

source code.

o Facilitates version control, issue tracking, and project

collaboration.

Deployment Platforms:

• Vercel:

36
 o The frontend of the Travel Story application (React.js) is deployed

on Vercel, which offers easy continuous deployment and blazing-

fast global CDN.

o Automatically reflects changes pushed to the GitHub repository.

• Render (or Heroku):

o The backend server (Node.js + Express.js) is deployed using

Render or Heroku.

o These platforms support easy environment variable setup, REST

API hosting, and scaling as needed.

Configuration Management:

• dotenv:

o A Node.js package used to manage and load environment variables

from a .env file.

o Helps in safely storing sensitive information like MongoDB URI,

JWT secrets, and API keys during development and production.

This comprehensive stack of technologies allows Travel Story to deliver

a smooth, secure, and responsive experience to users while maintaining

modularity, scalability, and ease of development.

37
4.2 Screenshots of the software

38
39
 4.3 Description of Important Functions/Modules (Travel Story)

The Travel Story web application is structured using a modular design,

ensuring separation of concerns and ease of scalability. Each module handles a

specific core functionality essential for a seamless user experience. Below is a

detailed breakdown of the most critical modules and their implementations:

1. Authentication Module

The Authentication module manages user login, registration, and secure access

to private routes.

User Registration & Login:

New users can register by providing credentials and essential details such

as name and email.

40
 Registered users can log in using valid credentials.

JWT-Based Authentication:

Upon successful login, a JSON Web Token (JWT) is generated and sent to

the client.

The token is stored securely (e.g., in local storage) and attached to all protected

requests.

Role-Based Access:

Although all users are general contributors in this application, internal checks

validate the user identity to ensure that only the owner can edit or delete their

travel stories.

Password Security:

User passwords are hashed using bcrypt.js before being stored in MongoDB,

ensuring encrypted storage of sensitive data.

2. Story Management Module

This is the core module of the Travel Story app where users create, view,

update, and delete their personal travel experiences.

Create Story:

Users can submit travel stories with details such as title, description, location,

date of travel, and images.

41
View All Stories:

The homepage or story feed displays all available stories with pagination or

infinite scrolling for better performance.

Update/Delete:

Authenticated users can edit or delete only the stories they created.

These operations are protected through middleware that validates JWT and user

ownership.

REST API Endpoints:

POST /stories – Create a new story.

GET /stories – Fetch all stories.

GET /stories/:id – View a single story by ID.

PUT /stories/:id – Update a story.

DELETE /stories/:id – Remove a story.

3. Image Upload & Media Handling Module

This module manages uploading and displaying images associated with travel

stories.

Image Upload:

Users can upload one or more images while creating a story.

42
Images are stored either in a cloud service (like Cloudinary) or locally

depending on environment setup.

Story Display:

Uploaded images are dynamically displayed with each story card in both grid

and detailed views.

Validation & Constraints:

Accepts only valid image formats (JPG, PNG, JPEG).

Implements file size restrictions and error handling for failed uploads.

4. User Dashboard Module

The dashboard provides a centralized view for users to manage their content

and view activity.

User-Specific Dashboard:

Once logged in, users are redirected to a dashboard where they can:

View all stories they’ve posted.

Edit or delete any story they’ve authored.

Track the number of views or likes (if implemented).

Personalization:

Greets the user by name.

43
Displays personal statistics and quick actions (e.g., “Post a Story”).

UI Design:

Built using React.js with Tailwind CSS for responsiveness.

Adaptable layout for both mobile and desktop users.

5. API Interaction and Middleware Module

Handles all communication between frontend and backend, ensuring secure

and consistent data flow.

Axios/Fetch Integration:

Frontend uses Axios to make asynchronous API calls to Node.js/Express.js

backend.

Token Middleware:

A middleware function checks the validity of JWT tokens on all protected

routes.

Prevents unauthorized access to story management routes.

Error Handling:

Backend sends standardized JSON responses for success or failure.

Error boundaries on the frontend display user-friendly messages.

44
Modular File Structure (Supportive of All Modules):

/routes – Contains route definitions for user auth, stories, and uploads.

/controllers – Logic for each API call resides here, separated by module.

/models – Mongoose schemas for User and Story documents.

/middleware – JWT verification, error handling, and upload logic.

/components – React components grouped by functionality (form, card,

layout).

This well-defined modular approach not only helps in organizing the code but

also ensures the project remains scalable, maintainable, and secure, making

Travel Story a robust full-stack MERN application for showcasing personal

travel experiences.

45
 6:Testing
6.1 Test Cases – Travel Story Web Application

The following test cases were designed to validate the core functionalities

of the Travel Story application. Each test aims to confirm that the system

behaves as expected under valid and invalid input conditions.

I. User Registration

• Input: Valid name, email, password, and confirm password.

• Expected Output: User account is successfully created. The user is

redirected to the homepage or personal dashboard with a welcome

message.

• Edge Case: If email already exists, system shows an appropriate error.

II. User Login

• Input: Email and password (both correct and incorrect scenarios).

• Expected Output:

o If credentials are valid → Login successful; token is issued and

stored.

o If invalid → Error message like “Invalid email or password” is

displayed.

• Tested Across: Browsers like Chrome, Firefox.

46
III. Add Travel Story

• Input: Story title, location, description, date of travel, and image.

• Expected Output: Story is created and visible in user dashboard and

global feed.

• Validation Test: If fields are empty or invalid (e.g., image not supported),

display “All fields required” or specific error messages.

IV. Search/Filter Stories

• Input: Keywords like “Goa”, “Himalayas”, “2023”.

• Expected Output: The system returns a filtered list of stories matching the

search term.

• Edge Case: If no match found → Display “No stories found for this

keyword.”

V. View Full Story

• Action: User clicks on a story card to view the full post.

• Expected Output: Full story detail page opens with title, description, date,

location, and images.

• Access Test: Publicly visible even to non-logged-in users (if allowed).

VI. Form Validation Check

• Input: Submitting forms with empty title or description.

• Expected Output: Required field validation error shown beside the field.

47
 • Frontend & Backend Validation: Both layers enforce rules.

VII. Unauthorized Access Check

• Action: Try opening /create-story or /dashboard without logging in.

• Expected Output: Redirected to login page with a “Please log in”

message.

VIII. Delete Story

• Action: Authenticated user clicks “Delete” on one of their posted stories.

• Expected Output: Story is removed from DB and the dashboard list

updates immediately.

• Security Check: Only the story creator is allowed to delete.

IX. Edit Story

• Action: Click “Edit” on user’s own post, modify details, and submit.

• Expected Output: Data is updated in the DB and reflects on the feed.

• Validation: Ensures required fields are not left blank while editing.

X. Cross-User Access Restriction

• Action: A user tries to edit or delete another user's story using direct URL

manipulation.

• Expected Output: Operation is denied with a “Not Authorized” message.

Action is logged if audit system is enabled.

48
 4.3 Expected vs Actual Results

• All tested features behaved as expected.

• Validations and redirections worked properly.

• User role restrictions enforced correctly.

• No unexpected crashes or data loss.

4.4 Bug reports

Bug 1: Login form allowed empty inputs

• Issue: Login form submitted even when fields were empty.

• Fix: Added required attribute and conditional check before form submission on

frontend. Also validated on backend.

Bug 2: Image upload accepted unsupported file types

• Issue: Users could upload .exe or .txt files.

• Fix: Added MIME type filter and size restriction during upload (only .jpg, .jpeg, .png

under 2MB).

Bug 3: Dashboard crashed when no stories were posted

• Issue: Dashboard UI assumed data existed, causing a crash on empty state.

• Fix: Added conditional rendering to display “No stories posted yet” message.

Bug 4: Passwords stored in plain text

• Issue: User passwords were initially saved as plaintext in MongoDB.

• Fix: Implemented bcrypt to hash passwords before saving.

Bug 5: Unauthorized story deletion via API

49
• Issue: Story could be deleted by changing the story ID in the API call.

• Fix: Middleware now verifies if the logged-in user is the creator before allowing

delete.

50
 7. Conclusion and Future
Scope
7.1 What Has Been Achieved

The Travel Story web application has successfully been designed,

developed, and deployed using the MERN stack (MongoDB, Express.js,

React.js, and Node.js). The platform serves as a centralized and

interactive space where travel enthusiasts can share their journeys,

document their memories, and inspire others with real-life stories and

visuals.

Below are the core achievements of this project:

• Full-Stack Functionality: Implemented a complete MERN-based

architecture with seamless frontend-backend communication via REST

APIs.

• User Authentication: Incorporated secure user registration and login

functionality using JWT for session handling and bcrypt for password

hashing.

• CRUD for Stories: Users can Create, Read, Update, and Delete their

travel stories including titles, images, descriptions, and dates of travel.

51
 • Story Feed: Designed a responsive and elegant story feed where users

can browse all public stories with search and filter options.

• Dashboard System: Built personalized dashboards allowing users to

view, manage, and edit their own posts easily.

• Responsive Design: Ensured that the application is responsive and

functional across various devices and screen sizes, using Tailwind CSS.

• Error Handling: Centralized error management for graceful handling of

exceptions and invalid operations on both client and server sides.

• Deployment Ready: Successfully deployed the frontend (e.g., on

Vercel) and backend (e.g., on Render) with working environment

configurations using .env and GitHub integration.

The completion of this project demonstrates strong proficiency in modern

full-stack development practices while solving a real-world problem for

the travel storytelling community.

7.2 Limitations

Although the application is functional and meets all base-level

requirements, certain limitations currently exist in its scope and

capabilities:

• No Social Features: The platform lacks interactive features like

comments, likes, or sharing options which could enhance engagement.

52
 • Image Handling: Image uploads are limited to basic file types and sizes;

no optimization or CDN support is currently implemented.

• No Multi-User Interaction: There's no follow, messaging, or

community feature that allows users to interact beyond just reading

stories.

• No Offline Mode: The platform is fully dependent on an internet

connection and doesn't support any offline reading or saving.

• Search Limitations: The story search is keyword-based only; no

advanced filtering or tagging mechanism has been integrated.

• Mobile App Not Available: A responsive web app exists, but a

dedicated mobile application for Android/iOS is not yet developed.

• Limited Accessibility Features: Lacks support for screen readers,

keyboard navigation optimization, and color-contrast accessibility.

While these limitations do not affect the core storytelling experience, they

provide ample scope for future enhancement to improve user experience,

reach, and usability.

7.3 Possible Future Enhancements

To evolve this project into a feature-rich and scalable platform, several

improvements and additions are planned for the future versions:

1. Mobile App Development:

53
 o Develop native or cross-platform mobile apps using React Native

or Flutter for Android and iOS support, improving accessibility and

user engagement.

2. Advanced Search and Filtering:

o Add filters based on travel type (adventure, family, solo), budget,

region, duration, etc.

o Enable tagging and categorization for better discoverability of

content.

3. Media Enhancements:

o Introduce support for multiple image uploads, videos, and story

galleries.

o Integrate image compression and CDN for optimized performance.

4. Community Features:

o Implement comments, likes, and follower systems to allow users to

engage with each other’s stories.

o Add notification system to inform users of activity on their posts.

5. Admin Panel:

o Add an admin dashboard to monitor content, manage users, remove

inappropriate stories, and control platform activity.

6. ML-Based Recommendation System:

o Use machine learning to suggest stories to users based on their

reading history, preferences, and location.

54
7. Itinerary & Map Integration:

o Allow users to add travel itineraries and display location data using

Google Maps or Mapbox.

8. Email Notifications & Newsletters:

o Notify users about new stories, updates from followed users, or

featured destinations.

9. Offline & Export Features:

o Enable users to download or export their stories as PDF files.

o Introduce offline reading mode using service workers and PWA

(Progressive Web App) support.

10. Accessibility Improvements:

o Incorporate ARIA roles, improve keyboard navigation, and ensure

color-contrast compliance for visually impaired users.

In conclusion, Travel Story is more than just a CRUD application — it’s a

platform built with the intent to grow, adapt, and evolve into a social

space for travelers to preserve and relive their memories. With the

proposed enhancements, it can transform into a rich storytelling hub that

connects wanderers across the globe.

55
 References
➢ https://react.dev/

➢ https://nodejs.org/docs/latest/api/

➢ https://cloud.google.com/dialogflow/docs

➢ https://www.postgresql.org/docs/

➢ https://jwt.io/

➢ https://tailwindcss.com/docs/installation/using-vite

➢ https://developer.mozilla.org/en-US/

➢ https://expressjs.com/

56
 Appendix
❖ Link to GitHub & Website

https://github.com/shivam9063/trave_story

Installation Steps

1. Clone the repository:

2. Navigate to frontend folder:

3. Install dependencies:

4. Start frontend server:

Backend Setup (Node.js + Express):

1. Navigate to backend folder:

2. Install backend dependencies:

3. Set up .env file with:

4. Start backend server:

57