Introduction

In the modern digital era, computers have become an indispensable part of our daily lives,
providing us with swift, reliable, and accurate solutions to a multitude of tasks. With just a few
clicks, we can access a wealth of information and perform complex operations effortlessly. The
speed and precision of computers make them a powerful tool across various domains, including
data management and processing, which are essential in today’s fast-paced business
environment.
The project I have undertaken falls into this dynamic sphere, aiming to streamline data handling
through the use of advanced technology. Specifically, it focuses on the efficient management of
JSON data, a vital aspect of modern web applications and data-driven solutions.
The NoSQL JSON Manager project leverages the capabilities of computers to offer users a
powerful platform for storing, retrieving, and manipulating data with ease and flexibility.
By utilizing Flask as the backend framework and incorporating RESTful APIs, this project
provides a robust system for managing data. The user interface, built with HTML, CSS, and
JavaScript, ensures a seamless and intuitive experience, enabling users to perform CRUD
operations on JSON data efficiently.
This project embodies the principles of NoSQL databases, emphasizing schema-less, flexible
data structures that adapt to evolving needs, making it a valuable tool for developers and data
analysts alike.

Documentation: NoSQL JSON Manager 1

Project Synopsis
Overview:
“NoSQL JSON Manager” is a web application designed to manage JSON data using NoSQL principles. Built
with Flask as the backend server, the application provides a RESTful API to perform CRUD (Create, Read,
Update, Delete) operations. The application uses a flexible JSON structure to store and manipulate data,
making it ideal for scenarios requiring dynamic and schema-less data management.

Objectives:
• To develop a web application that mimics NoSQL database functionalities using JSON as the data
format.
• To implement REST API endpoints for seamless data manipulation.
• To create a user-friendly interface for managing JSON data.

Scope:
• Suitable for developers and data analysts who need a lightweight NoSQL solution for managing
JSON data.
• Ideal for applications requiring flexible, schema-less data storage.

Key Features:
1. NoSQL Data Management:
o Schema-less storage with JSON, allowing dynamic and flexible data structures.
2. RESTful CRUD Operations:
o Create: Add new JSON entries through REST API POST requests.
o Read: Fetch all or specific JSON entries using GET requests.
o Update: Modify existing JSON entries with PUT requests.
o Delete: Remove unwanted entries using DELETE requests.
3. Flask Routing:
o Utilizes Flask’s routing capabilities to define RESTful endpoints.
4. User Interface:
o Built with HTML, CSS, and JavaScript to provide a responsive and interactive experience.

Technology Stack:
• Backend: Flask (Python framework) for routing and RESTful API implementation.
• Frontend: HTML, CSS, JavaScript for the UI.
• Data Storage: JSON for flexible, schema-less data management.

Expected Outcomes:
• A web application that acts as a lightweight NoSQL database using JSON and Flask.
• Enhanced data management capabilities with a user-friendly interface.
• Efficient handling of dynamic and complex data structures without predefined schemas.

Documentation: NoSQL JSON Manager 2

Development Tools
Python
Python serves as the primary programming language for
NoSQL JSON Manager. Known for its simplicity and
readability, Python enables rapid development and easy
maintenance. Its vast ecosystem of libraries and
frameworks makes it highly versatile for web development,
data manipulation, and more. Python's intuitive syntax and
robust performance are key factors in its selection for this
project, ensuring efficient backend operations and seamless
integration with other technologies.

Flask
Flask is the chosen web framework for the backend
development of NoSQL JSON Manager. It is a
lightweight and flexible framework that provides
the essential components needed to build web
applications. Flask supports modular code
development, making it easier to manage routes,
handle requests, and develop RESTful APIs. Its
minimalistic nature allows developers to add only the necessary extensions, resulting in a clean and
efficient codebase. Flask is ideal for creating scalable web applications with dynamic content.

HTML5
HTML5 is used to structure the web pages of NoSQL JSON Manager. As the
backbone of the frontend, HTML5 defines the layout and content of the
application, including forms, buttons, and interactive elements. It
supports multimedia content, semantic elements, and improved
accessibility features, making the web application more user-friendly
and functional. HTML5 ensures that the application is well-structured
and compatible with modern web standards.

CSS3
CSS3 is responsible for the styling and layout of NoSQL JSON Manager. It enhances the visual appeal of
the application by applying styles to HTML elements,
enabling responsive design, and creating visually engaging
user interfaces. CSS3 introduces advanced features such as
flexbox, grid layouts, and animations, which help in building
a modern, attractive, and intuitive frontend. With CSS3, the
application can adapt to various screen sizes and devices,
ensuring a consistent user experience.

Documentation: NoSQL JSON Manager 3

JavaScript
JavaScript is the programming language used to add interactivity and dynamic behaviour to the frontend
of NoSQL JSON Manager.

It enables real-time updates, client-side validations, and asynchronous communication with the server
through AJAX. JavaScript enhances the user experience by allowing smooth transitions, interactive
forms, and immediate feedback without the need for page reloads. Its integration with HTML and CSS
makes it a powerful tool for creating engaging and responsive web applications.

JSON
JSON (JavaScript Object Notation) is the data format used for storing and
exchanging information in NoSQL JSON Manager. Its lightweight and human-
readable structure make it ideal for data serialization and deserialization. JSON's
schema-less nature allows for flexible and dynamic data storage, which aligns
with the principles of NoSQL databases. This flexibility simplifies data
manipulation and integration with web APIs, ensuring efficient data handling
within the application.

REST API
REST API (Representational State Transfer) is employed in NoSQL JSON
Manager to enable communication between the client and server. The
RESTful architecture ensures stateless, scalable, and modular interactions
through standardized HTTP methods (GET, POST, PUT, DELETE). This
design allows the application to perform CRUD operations on JSON data,
providing a structured approach to data management. REST APIs facilitate
seamless integration with other web services, enhancing the overall
functionality of the application.

Documentation: NoSQL JSON Manager 4

NoSQL
NoSQL principles are applied in NoSQL JSON Manager to manage data in a flexible and scalable manner.
By using JSON as the data format, the application supports schema-less data structures, which are
typical of NoSQL databases. This approach allows for rapid development and easy adaptation to changing

data requirements, making it suitable for applications with dynamic and unstructured data. NoSQL
principles ensure that the application can handle large volumes of data with high performance and
reliability.

Documentation: NoSQL JSON Manager 5

Objective
The NoSQL JSON Manager is a web-based application designed to simulate the core functionalities of a
NoSQL database using JSON as the data format. Traditional databases often require predefined schemas,
limiting flexibility with dynamic and complex data. This project aims to provide a simple, efficient way
to manage data without being tied to rigid data models, addressing the increasing need for flexible,
schema-less storage solutions.

The primary objective is to create an intuitive web application that helps developers and data analysts
manage JSON data efficiently. By leveraging JSON’s flexibility, the app enables users to store and
manipulate semi-structured or unstructured data, making it suitable for scenarios where data formats
may evolve dynamically.

Another key goal is to implement REST API endpoints that allow seamless interaction with data. Through
standard HTTP methods (POST, GET, PUT, DELETE), users can perform CRUD operations, ensuring
efficiency and scalability. The RESTful architecture allows the application to handle various use cases
effectively.
The project also focuses on building a user-friendly interface, making it accessible to both technical
and non-technical users. The interface will simplify JSON data management, ensuring a seamless
experience for all users.
Ultimately, the NoSQL JSON Manager aims to provide a scalable, flexible solution for real-time data
manipulation, supporting a wide range of use cases. By combining the power of NoSQL databases, JSON,
and REST APIs, the application offers a modern tool to manage dynamic and schema-less data in an
efficient, user-friendly environment.

Documentation: NoSQL JSON Manager 6

Scope and Features
The NoSQL JSON Manager is designed for developers, data analysts, and businesses that require a
lightweight and flexible solution for managing JSON data. The application is ideal for scenarios where
traditional relational databases are too rigid, and a schema-less approach is preferred. It caters to users
who need to store, manipulate, and manage dynamic and complex data without predefined structures.
This project is particularly suitable for applications that require real-time data manipulation, as it
allows for easy updates, modifications, and storage changes without the limitations of a predefined
schema. The solution is adaptable and can be used for prototyping, managing large datasets, or building
applications that need flexible data handling.

To enhance security and control access to the application, authentication mechanisms will be
implemented. Users will authenticate using private keys or API keys to ensure secure access to data and
endpoints. Only authorized users will be able to perform CRUD operations, protecting sensitive data from
unauthorized access. Additionally, security rules will be implemented to define permissions, allowing for
role-based access to specific data, and ensuring that users can only interact with data they are
authorized to access.

In addition, the user-friendly interface ensures that both technical and non-technical users can interact
with the application efficiently. The NoSQL JSON Manager aims to bridge the gap between traditional
databases and modern, dynamic data management needs.

Documentation: NoSQL JSON Manager 7

Key Features
1. NoSQL Data Management :

Schema-less Storage with JSON: NoSQL JSON Manager leverages JSON (JavaScript Object
Notation) for its data storage, embracing the schema-less nature of NoSQL databases. This
flexibility allows users to store data without the constraints of predefined schemas, making it
possible to handle varied and complex data structures. Users can easily adapt their data models
to meet evolving requirements without the need for costly and time-consuming database
migrations. This dynamic storage approach is particularly useful for applications dealing with
unstructured or semi-structured data, enabling seamless integration and rapid development.

2. RESTful CRUD Operations :

Create: The Create operation is facilitated through REST API POST requests, allowing users to
add new entries to the JSON data store. This feature ensures that users can dynamically expand
their data collection by simply sending structured JSON payloads to the designated API
endpoint. The POST requests are designed to validate and process incoming data, ensuring
consistency and integrity within the data store.

Read: Fetching data is streamlined through GET requests, which allow users to retrieve either
all entries or specific records based on query parameters. This functionality provides flexibility
in accessing data, whether for display purposes, data analysis, or integration with other
systems. The GET endpoints are optimized to handle various filters and parameters, ensuring
efficient data retrieval and minimal server load.

Update and Delete via POST and GET: In NoSQL JSON Manager, both update and delete
operations are handled through POST and GET requests, rather than using the traditional PUT
and DELETE methods. This approach simplifies the routing logic and ensures consistent handling
of all operations. Users can send specific instructions within the POST or GET requests to
indicate whether an entry should be updated or deleted. This method maintains a unified API
structure while still allowing for the full range of CRUD functionalities.

3. Flask Routing :

Utilizes Flask’s Routing Capabilities: Flask, a lightweight and flexible Python web framework,
forms the backbone of NoSQL JSON Manager's server-side logic. Its routing capabilities are
harnessed to define RESTful endpoints for all CRUD operations. Each endpoint is carefully
mapped to a specific function, ensuring clear and maintainable code structure. Flask’s routing
allows for the easy handling of URL parameters, query strings, and request payloads, enabling
the creation of a fully functional API with minimal boilerplate code.

Flask’s modular nature allows developers to organize their code into blueprints and modules,
enhancing maintainability and scalability. This structure is particularly beneficial for projects
that may grow in complexity over time, ensuring that new features and endpoints can be added
without disrupting existing functionality.

Documentation: NoSQL JSON Manager 8

4. User Interface :

Built with HTML, CSS, and JavaScript: The user interface of NoSQL JSON Manager is designed
to provide a responsive and interactive experience, built using HTML, CSS, and JavaScript. HTML
serves as the structural foundation, defining the layout and elements of the web pages. CSS is
utilized to style the interface, ensuring a visually appealing and consistent look across different
devices and screen sizes. CSS techniques like flexbox and grid layouts are employed to create
responsive designs that adapt to varying viewports, enhancing usability.

JavaScript plays a pivotal role in adding interactivity and dynamic functionality to the interface.
It enables features such as real-time data updates, form validations, and asynchronous requests
(AJAX) to the server, providing a smooth and efficient user experience. The integration of
JavaScript with RESTful APIs allows users to perform CRUD operations directly from the
frontend, with immediate feedback and updates displayed on the interface.

The combination of these technologies ensures that the user interface is not only functional but
also engaging and user-friendly. The design prioritizes ease of use, enabling users to navigate
the application and manage data effortlessly, whether they are adding new entries, fetching
existing records, or modifying and deleting data.

Documentation: NoSQL JSON Manager 9

Data Flow Diagram (DFD)
- Introduction
The NoSQL JSON Manager is a web-based application designed to facilitate dynamic data
management using a NoSQL approach. It leverages Flask for backend operations and provides a
user-friendly interface through HTML, CSS, and JavaScript. The core functionality revolves
around RESTful API endpoints that enable CRUD operations on a JSON data store. This document
provides a detailed explanation of the Data Flow Diagram (DFD), outlining how data flows
between different components of the system.

- Level 0 - Context Diagram

At the highest level, the system comprises three primary components:
1. User Interface (UI): The user interacts with the system via a web-based interface.
2. REST API: The backend processes user requests and interacts with the data store.
3. JSON Data Store: A schema-less storage system that holds all the application data.
The interaction flows are as follows:
• Users submit requests through the UI.
• The REST API processes these requests and performs the required data operations.
• The JSON Data Store is accessed for data retrieval, insertion, updating, or deletion.

- Level 1 - Detailed DFD Components

External Entities
1. User: The individual who interacts with the application through the web interface.
Processes
1. User Interaction (UI): Manages user input and displays data.
2. REST API: Facilitates data requests and responses between the UI and the backend.
3. Data Processing: Handles the validation, manipulation, and routing of data.
4. Data Storage Management: Manages the operations on the JSON Data Store.
Data Stores
1. JSON Data Store: The primary storage for all data entries, supporting schema-less data
management.
Data Flows
1. User Input: Data entered by the user via forms or other interactions.
2. API Requests: Data requests (POST/GET) sent from the UI to the REST API.
3. Data Responses: Processed data or confirmation messages returned from the REST API to
the UI.
4. Data Processing: Data validation, manipulation, or querying performed by the backend.
5. Data Storage Access: Interaction with the JSON Data Store for data operations.

Documentation: NoSQL JSON Manager 10

- Level 1 - Detailed DFD Explanation
API Routes
The application defines several RESTful API routes for interacting with the JSON data store:
• /api/data/get/path:subpath: Retrieves data from a specific path.
• /api/data/set/path:subpath: Updates or inserts data at the specified path.
• /api/data/reset: Resets the entire JSON database to its initial state.
• /api/data/remove/path:subpath: Removes data from a specified path.
• /api/data/append/path:subpath: Appends new data to an existing path.

- Data Manipulation Processes

1. Get Data at Path:
o Retrieves the requested data from the JSON store.
o Returns either the data or an error message if the operation fails.

2. Set Data at Path:

o Updates or inserts new data at a specified path.
o Saves the updated data and returns a success or error message.

3. Reset Data:
o Resets the entire data store to its initial state.
o Saves the reset data and returns a confirmation message.

4. Remove Data at Path:

o Deletes data from the specified path.
o Saves the changes and returns a success or error message.

5. Append Data at Path:

o Adds new data at the given path.
o Saves the updated data and returns a confirmation message.

- Initialization Process
• Start Application: Checks if database.json exists; if not, creates an empty database.
• Load JSON: Loads existing JSON data for processing.
• Save JSON: Saves any updates or changes back to database.json.

- User Interface
• Home Route: Serves the main webpage, rendering index.html with the data from the
JSON store.
• Render Template: Displays the user interface, populated with data from the backend.
The NoSQL JSON Manager provides a robust system for managing JSON data using a schema-less
NoSQL approach. The DFD illustrates how data flows between various components, ensuring
efficient data management and user interaction. By utilizing Flask for routing and RESTful APIs
for data operations, the system offers a seamless experience for dynamic data handling, making
it a powerful tool for modern web applications.

Documentation: NoSQL JSON Manager 11

Documentation: NoSQL JSON Manager 12
Entity Relationship Diagram (ERD)
The ER diagram for the JSON Tree Web App project illustrates the core entities and their
interrelations. This project uses Flask as a server framework, handles NoSQL data in JSON
format, and adheres to CRUD principles through RESTful APIs.

Entities and Relationships:

1. Application
• Attributes:
o name: Represents the name of the Flask application.
o static_dir: Directory path for static files like CSS and JavaScript.
o template_dir: Directory path for HTML templates.
o main_file: The main Python file that runs the Flask application.
• Relationships:
o Has a one-to-many relationship with Route and Database entities.

2. Route
• Attributes:
o endpoint: The API path that defines a specific route.
o method: Specifies the HTTP method (GET or POST) used for the route.
o subpath: Optional parameter for additional path details.
• Relationships:
o Each Route is associated with one Handler.

3. Handler
• Attributes:
o operation: Describes the type of operation performed (e.g., set, get, append,
remove).
o response_type: Specifies the response format, typically JSON.
o status_code: HTTP status code returned by the handler.
• Relationships:
o Each Handler interacts with one or more Database entities to perform the required
operations.
4. Database
• Attributes:
o filename: Name of the JSON file used as the database (e.g., database.json).
o root_node: The root node of the JSON structure.
o format: Specifies the format of the stored data, which is JSON.
• Relationships:
o The Database interacts with JSONPath to navigate and manipulate the JSON data
structure.

Documentation: NoSQL JSON Manager 13

5. JSONPath
• Attributes:
o path: Defines the nested path structure within the JSON data.
o delimiter: Character used to separate different levels of the path, typically '/'.
o parent: Optional attribute to specify the parent path in the JSON structure.
• Relationships:
o JSONPath is used by Handler to access and manipulate specific parts of the JSON
data.
o Linked to the Value entity to represent the actual data stored or manipulated.

6. Value
• Attributes:
o data: Contains any JSON value (e.g., objects, arrays, or primitives).
o type: Indicates the type of data (e.g., dictionary, list, or primitive types like string
or number).
• Relationships:
o Each Value is associated with a JSONPath to signify the exact data located at a
specific path within the JSON structure.

Summary:
The ER diagram highlights a structured and modular approach to handling JSON-based NoSQL
data. The application leverages Flask for routing, with clearly defined handlers for CRUD
operations. The database interactions rely on JSONPath for efficient data manipulation, and the
values are dynamically stored and retrieved, reflecting the flexibility of the NoSQL paradigm.
This structure ensures a robust, scalable, and maintainable system for managing JSON data
through RESTful APIs.

Documentation: NoSQL JSON Manager 14

 Route
str ing endpoint API path

str ing method GET POST

str ing subpath Optional path par ameter

processes

Application
Handler
str ing name Flask App
str ing oper ation set get append r emove
str ing static_dir static/
str ing r esponse_type JSON
str ing template_dir templates/
int status_code HTTP status
str ing main_file main.py

manages interacts

Database
str ing filename database.json

object r oot_node wyc db

str ing for mat JSON

contains

JSONPath
str ing path nested/path/str uctur e

str ing delimiter /

str ing par ent Optional

stores

Value
object data Any JSON value

str ing type dict list pr imitive

Documentation: NoSQL JSON Manager 15

Design Goals and Constraint
- Design Goals
1. Simplicity and Usability
The primary goal of the NoSQL JSON Manager App is to provide a simple, intuitive interface for managing
JSON-based NoSQL databases. This involves creating a web application that non-technical users can
easily navigate to perform essential database operations such as retrieving, adding, updating, and
deleting records.
Key Aspects:
• User Interface (UI): The UI should be minimalistic, focusing on essential functionalities without
overwhelming the user. The single HTML template (index.html) should display the database
content clearly and provide easy access to various operations through intuitive navigation.
• User Experience (UX): The application should provide feedback for user actions, such as success
or error messages, to guide users through their interactions. Each operation should be accessible
with minimal clicks, and the user should understand the result of their actions immediately.
2. Flexibility and Extensibility
Given the nature of NoSQL databases, the app should support flexible data structures, allowing users to
manage nested and varied JSON data efficiently.
Key Aspects:
• Dynamic Data Management: Users should be able to work with nested data structures effortlessly,
using simple path-based queries to access or modify specific data points.
• Extensibility: The app should be designed to accommodate future enhancements, such as adding
new endpoints or expanding the user interface. This flexibility ensures the app can evolve
alongside user needs and technological advancements.
3. Data Integrity and Security
Maintaining the integrity and security of the data is critical. Users should trust that their data is safe and
the app behaves predictably.
Key Aspects:
• Data Validation: Implement checks to ensure that data being added, updated, or deleted is valid
and conforms to expected formats. This prevents corruption or unintended modifications.
• Error Handling: Comprehensive error handling should be in place to deal with invalid requests,
missing data, or other issues without causing the application to crash or behave unpredictably.
• Secure Access: Although not a focus in the current design, future iterations should consider
authentication mechanisms to protect sensitive data and ensure only authorized users can make
changes.
4. Performance and Scalability
The app should perform well with reasonable amounts of data and be designed to scale as user demands
grow.
Key Aspects:
• Efficient Data Handling: Loading and saving data should be optimized to handle typical use cases
swiftly, minimizing wait times for users.
• Scalability: The architecture should allow for scaling, whether by handling larger JSON files or
supporting multiple concurrent users in future updates.

Documentation: NoSQL JSON Manager 16

- Design Constraints
1. Simple Backend Architecture
The app's backend is designed using Flask, a lightweight Python web framework, to ensure simplicity and
ease of deployment. This choice imposes some constraints:
• Limited by Flask’s Capabilities: While Flask is powerful for small to medium-sized applications, it
might not handle extremely high loads or complex operations as efficiently as more heavyweight
frameworks.
• Single-Threaded by Default: Flask's default deployment is single-threaded, which could be a
bottleneck for concurrent user requests in a larger-scale scenario.
2. JSON File as the Database
The app uses a JSON file (database.json) as its data store, which is suitable for lightweight applications
but has limitations:
• Limited Scalability: A JSON file is not suitable for large-scale applications or datasets. As the data
grows, performance can degrade, and operations might become slower.
• Concurrency Issues: JSON files are not designed for concurrent access, which could lead to data
corruption if multiple users try to write to the file simultaneously.
• Lack of Advanced Query Capabilities: Unlike traditional database systems, JSON files do not offer
advanced query functionalities, indexing, or transaction management.
3. Minimal Frontend Development
The frontend is kept minimal with a single HTML template (index.html) and a CSS file (style.css),
focusing on basic user interactions:
• Limited Interactivity: With a single-page approach, the app lacks advanced interactivity that
could be achieved with more complex frontend frameworks like React or Angular.
• Basic Styling: The use of a single CSS file restricts the design to basic styling, which may not be
sufficient for creating a highly polished user interface.
4. Absence of Authentication and Authorization
The current design does not include user authentication or authorization mechanisms:
• Open Access: Anyone with access to the app can perform operations on the database, which is a
significant security concern if the app is deployed in a production environment.
• No Role-Based Access Control: The absence of user roles means that all users have the same level
of access and capabilities, which may not be suitable for scenarios requiring differentiated
permissions.
5. Static Data Loading
The app loads and saves the JSON data to a file on each operation, which simplifies data management
but comes with its own set of limitations:
• I/O Performance Bottleneck: Reading and writing to a file for every operation can become a
performance bottleneck, especially as the data grows in size.
• No In-Memory Data Caching: The lack of in-memory caching means that every data operation
requires file I/O, which could slow down performance compared to systems using in-memory
databases or caching layers.

Documentation: NoSQL JSON Manager 17

Methodology, Adopted & System Implementation
- Methodology
The development of the NoSQL JSON Manager App follows an iterative and incremental development
methodology. This approach allows for continuous refinement and enhancement of the application based
on feedback and evolving requirements. The methodology emphasizes simplicity, user-centric design, and
flexibility, making it suitable for a project focused on managing JSON data through a web interface.
Key Steps in the Methodology:
1. Requirement Gathering:
Understanding the core functionalities needed for the app, such as data retrieval, addition,
updating, and deletion, formed the foundation of the project. The focus was on simplicity and
usability, catering to users who need an intuitive tool for managing JSON-based NoSQL databases.
2. Design:
The design phase involved creating a simple and intuitive user interface with a backend
architecture that supports essential operations. The design was kept minimalistic, focusing on
essential features while ensuring scalability for future enhancements.
3. Development:
The development process was broken down into small, manageable iterations, each focusing on
specific functionalities:
o Initial setup of the Flask framework and basic routing.
o Implementation of JSON data handling, including loading, saving, and path-based data
manipulation.
o Development of frontend components to display data and provide interactive elements for
user operations.
4. Testing:
Each iteration included testing to ensure the stability and correctness of the functionalities. This
involved both unit tests for individual components and integration tests to validate the
interaction between the frontend and backend.
5. Deployment and Feedback:
After developing a minimum viable product (MVP), the app was deployed in a test environment to
gather user feedback. This feedback informed subsequent iterations, leading to improvements in
both the user interface and backend functionalities.

Adopted Techniques and Tools

1. Flask Framework:
Flask was chosen for its simplicity and flexibility, making it ideal for developing a lightweight web
application. Its modular nature allows for easy extension as the project evolves.
2. JSON as a Data Store:
JSON was selected as the data storage format due to its simplicity and ease of use in web
applications. This choice aligns with the app’s goal of providing a straightforward tool for
managing NoSQL data.
3. Custom CSS:
Custom CSS, was used to style the frontend. This combination ensured a responsive and visually
appealing user interface with minimal development effort.

Documentation: NoSQL JSON Manager 18

 4. JavaScript for Interactivity:
Basic JavaScript was incorporated to enhance user interaction, particularly for making AJAX calls
to the backend and updating the UI dynamically without needing full-page reloads.

System Implementation
The system implementation can be divided into three main components: the backend, the frontend, and
data handling mechanisms.
Backend Implementation:
• Flask App Setup:
The backend was implemented using Flask, which provides routing, request handling, and data
processing capabilities. Each route corresponds to a specific operation on the JSON data, such as
retrieving all data, setting a value, or appending data.
• Data Management Functions:
Custom functions were developed to load and save data from the database.json file. These
functions ensure data consistency and integrity by handling file I/O operations securely and
efficiently.
• Path-Based Data Access:
Data is accessed and manipulated using path-based keys, allowing users to specify nested data
structures directly. This feature is crucial for working with complex JSON objects.
Frontend Implementation:
• HTML Template:
A single HTML template (index.html) was designed to display the database content and provide
user controls for performing various operations. The template includes placeholders for dynamic
content, which is populated using data fetched from the backend.
• CSS Styling:
Custom CSS, supported by Bootstrap, was used to style the application. The goal was to create a
clean and user-friendly interface with a focus on readability and ease of navigation.
• JavaScript Interactivity:
JavaScript functions were added to handle user interactions, such as form submissions and
dynamic content updates. These functions make asynchronous requests to the backend and
update the UI based on the response.
Data Handling:
• JSON File Operations:
The database.json file serves as the app’s data store. The backend functions handle reading from
and writing to this file, ensuring data is stored persistently and retrieved accurately.
• Data Integrity Checks:
Validation and error handling mechanisms are in place to ensure the integrity of the data. For
example, when setting or appending data, the app checks for valid JSON structures and handles
errors gracefully, providing meaningful feedback to the user.

Documentation: NoSQL JSON Manager 19

Flask Routes Explanation
Flask app routing involves mapping URLs to specific functions that handle the logic for those
URLs. This helps create meaningful URLs that are easier for users to remember and navigate. In
Flask, this is achieved using the app.route decorator.
The Flask application (app.py) defines several routes that handle various HTTP operations.
These operations provide a simple API for interacting with the JSON database.
Routes Defined in app.py:
1. Home Route (/)
o Method: GET
o Description: This route loads the home page and displays the contents of the
database. It uses the index.html template.
@app.route('/')
def home():
data = load_json()
return render_template('index.html', data=data)

2. Get All Data (/api/data)

o Method: GET
o Description: This route returns all the data stored in the database.json file as a
JSON response.
@app.route('/api/data', methods=['GET'])
def print_data():
data = load_json()
return jsonify(data)

3. Set Data (/api/data/set/<path:subpath>)

o Method: POST
o Description: This route allows setting new data at a specific path in the database.
The data is passed as JSON in the request body.
@app.route('/api/data/set/<path:subpath>', methods=['POST'])
def set_data(subpath):
new_data = request.get_json()
value = new_data.get("value", {})
data = load_json()

result = set_data_at_path(data, subpath, value)

if isinstance(result, dict) and "error" in result:
return jsonify(result), 400

save_json(data)
return jsonify({"message": f"Data set at {subpath}!"}),
201

Documentation: NoSQL JSON Manager 20

4. Append Data (/api/data/append/<path:subpath>)
o Method: POST
o Description: This route appends new data to an existing list or merges data into a
dictionary at a specified path.
@app.route('/api/data/append/<path:subpath>',
methods=['POST'])
def append_data(subpath):
new_data = request.get_json()
value = new_data.get("value", {})
data = load_json()

result = append_data_at_path(data, subpath, value)

if isinstance(result, dict) and "error" in result:
return jsonify(result), 400

save_json(data)
return jsonify({"message": f"Data appended at
{subpath}!"}), 201

5. Get Data by Path (/api/data/get/<path:subpath>)

o Method: GET
o Description: This route allows retrieving data from a specific path in the database.
@app.route('/api/data/get/<path:subpath>', methods=['GET'])
def get_data(subpath):
data = load_json()
keys = subpath.split('/')
for key in keys:
if key in data:
data = data[key]
else:
return jsonify({"error": f"{subpath} not
found!"}), 404
return jsonify(data), 200

Documentation: NoSQL JSON Manager 21

6. Remove Data (/api/data/remove/<path:subpath>)
o Method: POST
o Description: This route removes data from a specific path in the database.
@app.route('/api/data/remove/<path:subpath>',
methods=['POST'])
def remove_data(subpath):
data = load_json()
keys = subpath.split('/')
target_data = data
for key in keys[:-1]:
if key in target_data:
target_data = target_data[key]
else:
return jsonify({"error": f"{subpath} not
found!"}), 404

if keys[-1] in target_data:
del target_data[keys[-1]]
save_json(data)
return jsonify({"message": f"Data removed from
{subpath}!"}), 200
else:
return jsonify({"error": f"{subpath} not found!"}),
404

7. Reset Database (/api/data/reset)

o Method: POST
o Description: This route resets the database, clearing all data.
@app.route('/api/data/reset', methods=['POST'])
def reset_data():
save_json({"nosql@db":{}})
return jsonify({"message": "Database reset!"}), 200

Documentation: NoSQL JSON Manager 22

Requests and HTTP Status Codes
Understanding HTTP Requests
HTTP (Hypertext Transfer Protocol) is the foundation of communication on the web, enabling
clients (such as web browsers or applications) to interact with servers. In the NoSQL JSON
Manager App, HTTP requests are used to perform various operations on the JSON-based
database. Each request comprises a method (like GET, POST, or DELETE), a URL endpoint, and
optionally, data (payload) or parameters.

Key HTTP Methods Used (In Project):

1. GET:
o Purpose: Retrieve data from the server.
o Example: Fetching all records from the JSON database or retrieving a specific
record by its path.
o Usage in App: The /api/data endpoint allows clients to retrieve the entire JSON
data structure, while /api/data/get/<path> fetches specific nested data.
2. POST:
o Purpose: Submit data to the server for creation or modification.
o Example: Adding new data, updating existing records, or deleting records through
a path specification.
o Usage in App: The /api/data/set/<path> endpoint uses POST to update or create
data at a specific path, while /api/data/append/<path> appends new data.

HTTP Status Codes and Their Significance

HTTP status codes are essential for indicating the outcome of an HTTP request. They provide
standardized messages about the success, failure, or other states of a request. These codes are
grouped into five categories:
1. 1xx (Informational):
o Purpose: Indicate that a request has been received and the process is continuing.
o Not typically used in the app, as most interactions are straightforward and do not
require ongoing information exchanges.
2. 2xx (Successful):
o 200 OK: Indicates a successful request where the server has returned the
requested data or processed the request without issues.
▪ Example in App: When data is successfully retrieved via
/api/data/get/<path>, a 200 OK status is returned along with the requested
data.

Documentation: NoSQL JSON Manager 23

 o 201 Created: Used when a resource has been successfully created or modified.
▪ Example in App: When new data is appended or updated using
/api/data/set/<path>, the server responds with 201 Created to confirm the
operation's success.
3. 3xx (Redirection):
o Purpose: Indicate that further action is needed to complete the request (e.g.,
redirecting to a new URL).
o Not used in the app, as the operations are direct and do not require redirection.

4. 4xx (Client Error):

o 400 Bad Request: Indicates that the server cannot process the request due to
client-side issues, such as malformed syntax or invalid data.
▪ Example in App: If a user tries to set data with an incorrect path or invalid
JSON structure, the server responds with a 400 Bad Request to signal the
issue.
o 404 Not Found: Returned when the requested resource or endpoint does not exist.
▪ Example in App: If a user attempts to fetch data from a non-existent path
using /api/data/get/<path>, the server returns a 404 Not Found.
5. 5xx (Server Error):
o Purpose: Indicate server-side issues where the server fails to fulfill a valid request.
o The app is designed to minimize server errors, but in cases of unexpected issues
(e.g., file corruption or internal processing errors), a 500 Internal Server Error
might be used.

Documentation: NoSQL JSON Manager 24

Project Structure
This project is a NoSQL JSON Manager App using Flask as the backend framework and a simple
JSON file (database.json) as the data store. The project is organized into the following
directory structure:

At the root level:

NoSQL JSON Manager App/
| app.py
| database.json

app.py - The main Flask app entry point that handles routing and initializes the app
database.json - The JSON file acting as a simple document store/database

The operations/ directory contains modules for different database operations:

+---operations
| append.py
| getall.py
| getonly.py
| rem.py
| reset.py
| setonly.py

append.py - handles adding new data to existing records

getall.py - retrieves all records from the database
getonly.py - retrieves specific records based on criteria
rem.py - handles deletion of records
reset.py - resets/clears the database
setonly.py - handles updating specific records

Frontend-related directories:
+---static
| style.css
|
\---templates
index.html

static/style.css - Contains CSS styling for the web interface

templates/index.html - The main (and only) HTML template for the web interface

Documentation: NoSQL JSON Manager 25

Project Requirements
Overview:
This project is a Flask-based web application that utilizes JSON data storage for managing database-like
structures. It provides several API endpoints to interact with the stored data, including routes for
retrieving, setting, appending, and removing data, as well as for resetting the database. The project
requires the following technologies and tools:
• Python 3.9=< : The core programming language used for backend logic and API implementation.
• Flask: A lightweight web framework used to handle routing, HTTP requests, and serve the
application.
• JSON: The data format used for storing and managing data, allowing for easy manipulation and
retrieval.
• OS Module: For checking the existence of the database file and interacting with the file system.
• HTML/CSS: Basic frontend structure and styling to display the data and interactions with the user.
• Web Browser: To access and interact with the application via its user interface.

Installation Instructions:
To set up the environment, use the following commands to install the necessary dependencies:

>> pip install flask request

This will install the Flask and Request library, which is required to run the web application. The project
also uses standard Python libraries (like json and os), which are available by default in Python 3.x, so no
additional installation is necessary for those.
Additional requirements include the ability to manage nested data structures (dictionaries and lists)
within the JSON file, and the capacity to validate data integrity during API operations. The application
should be able to handle edge cases such as non-existent paths and invalid data types, providing clear
error responses for failed operations.

Documentation: NoSQL JSON Manager 26

Project Demonstration
The project demonstrates a simple Flask-based web application that serves as a basic backend API for
managing and manipulating JSON data. Below are the steps for demonstrating how the application works:
1. Start the Application:
o After installing Flask and setting up the environment, start the application by running the
following command in your terminal:
>> python app.py
* Serving Flask app 'app'
* Debug mode: on
WARNING: This is a development server. Do not use it in a
production deployment. Use a production WSGI server instead.
* Running on http://127.0.0.1:5000
Press CTRL+C to quit
* Restarting with stat
* Debugger is active!
* Debugger PIN: 821-337-920

This will launch the Flask web server, usually accessible at http://127.0.0.1:5000/.

2. Access the Web Interface:

o Open a web browser and go to http://127.0.0.1:5000/. This will display the front-end
interface showing the data stored in the database.json file.

3. Interact with the API Endpoints:

o The application provides several API endpoints that can be accessed via HTTP requests:
▪ GET /api/data: Fetches and displays all the data from the database.
▪ POST /api/data/set/<path>: Allows setting data at a specific path in the database.

You can send a POST request with a JSON body specifying the value you want to set.
▪ POST /api/data/append/<path>: Appends data to a specific path in the database.
You can send a POST request to add data to lists or merge dictionaries.
▪ POST /api/data/remove/<path>: Removes data from the specified path.
▪ POST /api/data/reset: Resets the database to its initial state.

4. Testing API Endpoints:

- append.py
import requests

url = 'http://127.0.0.1:5000/api/data/append/nosql@db/users'
payload = {
"value": {
"User1": {"name": "John Doe", "age": 32},
"User2": {"name": "Peter Doe", "age": 12}
}
}

response = requests.post(url, json=payload)

print(response.json())

Documentation: NoSQL JSON Manager 27

#Output
>> {'message': 'Data appended at nosql@db/users!'}
# database affected
{
"nosql@db": {
"users": {
"User1": {
"name": "John Doe",
"age": 32
},
"User2": {
"name": "Peter Doe",
"age": 12
}
}
}
}

- setonly.py
import requests
url = 'http://127.0.0.1:5000/api/data/set/nosql@db/users/User1/name'
payload = {"value": "Sam Doe"}

response = requests.post(url, json=payload)

print(response.json())
# Expected output: {"message": "Data set at some/key!"}

#Output
>> {'message': 'Data set at nosql@db/users/User1/name!'}
# database affected
{
"nosql@db": {
"users": {
"User1": {
"name": "Sam Doe",
"age": 32
},
"User2": {
"name": "Peter Doe",
"age": 12
}
}
}
}

- getall.py
import requests

response = requests.get('http://127.0.0.1:5000/api/data')
print(response.json())

#Output
>>{'nosql@db': {'users': {'User1': {'age': 32, 'name': 'Sam Doe'}, 'User2':
{'age': 12, 'name': 'Peter Doe'}}}}

Documentation: NoSQL JSON Manager 28

- getonly.py
import requests

response =
requests.get('http://127.0.0.1:5000/api/data/get/nosql@db/users/User1')
print(response.json()) # This will print the value at the path "some/key"

#Output
>> {'age': 32, 'name': 'Sam Doe'}

- rem.py
import requests

url = 'http://127.0.0.1:5000/api/data/remove/nosql@db/users/User1/name'
# Provide the correct path for the selected field or node
payload = {} # No need to send a value, just the endpoint for removal

response = requests.post(url, json=payload)

print(response.json())
# Expected output: {"message": "Data removed from some/key!"}

#Output
>> {'message': 'Data removed from nosql@db/users/User1/name!'}
#database affected

{
"nosql@db": {
"users": {
"User1": {
"age": 32
},
"User2": {
"name": "Peter Doe",
"age": 12
}
}
}
}

- reset.py
import requests

response = requests.post('http://127.0.0.1:5000/api/data/reset')
print(response.json())
# Expected output: {"message": "Database reset!"}

#Output
{'message': 'Database reset!'}
#database affected
{
"nosql@db": {}
}

Documentation: NoSQL JSON Manager 29

Screenshots

Figure: After Appending User2 in users

Figure: After Removing one field from User1

Documentation: NoSQL JSON Manager 30

Figure: After resetting the database

Documentation: NoSQL JSON Manager 31

Source Code
1. app.py (The entry point of the Flask app)
- Libraries Used
from flask import Flask, render_template, jsonify, request
import json
import os

- Flask Initialization
app = Flask(__name__)

- Load JSON
# Load JSON data from the file
def load_json():
if not os.path.exists("database.json"):
# If database.json doesn't exist, create an empty database
save_json({"nosql@db":{}})
with open("database.json", "r") as file:
return json.load(file)

- Save JSON
# Save JSON data to the file
def save_json(data):
with open("database.json", "w") as file:
json.dump(data, file, indent=4)

- Set Data at Path

# Helper function to set data at a specific path
def set_data_at_path(data, path, value):
keys = path.split('/')
for key in keys[:-1]:
data = data.setdefault(key, {}) # Create nested dict if don't exist
if isinstance(data, dict):
data[keys[-1]] = value # Set the value at the final key
else:
return {"error": f"Cannot set value at {path}, invalid structure!"}

Documentation: NoSQL JSON Manager 32

- Append Data at Path
# Helper function to append data to a list
def append_data_at_path(data, path, value):
keys = path.split('/')
target_data = data

for key in keys[:-1]:

target_data = target_data.setdefault(key, {})

if isinstance(target_data, list):
# Append to a list
target_data.append(value)
elif isinstance(target_data, dict):
# If the target data is a dict and the last key exists, update it
key = keys[-1]
if key in target_data:
# If it's an existing dictionary, merge the data
target_data[key].update(value)
else:
# If it's a new key, add the new value
target_data[key] = value
else:
return {"error": f"Cannot append data at {path}, target is neither a
list nor a dict!"}

return None # No error, everything worked fine

- App Routes
@app.route('/')
def home():
data = load_json()
return render_template('index.html', data=data)

@app.route('/api/data', methods=['GET'])
def print_data():
data = load_json()
return jsonify(data)

@app.route('/api/data/set/<path:subpath>', methods=['POST'])
def set_data(subpath):
new_data = request.get_json() # Get data from the POST request
value = new_data.get("value", {})
data = load_json()

result = set_data_at_path(data, subpath, value)

if isinstance(result, dict) and "error" in result:
return jsonify(result), 400

save_json(data)
return jsonify({"message": f"Data set at {subpath}!"}), 201

@app.route('/api/data/append/<path:subpath>', methods=['POST'])
def append_data(subpath):
new_data = request.get_json() # Get data from the POST request
value = new_data.get("value", {})
data = load_json()

result = append_data_at_path(data, subpath, value)

Documentation: NoSQL JSON Manager 33

 if isinstance(result, dict) and "error" in result:
return jsonify(result), 400

save_json(data)
return jsonify({"message": f"Data appended at {subpath}!"}), 201

@app.route('/api/data/get/<path:subpath>', methods=['GET'])
def get_data(subpath):
data = load_json()
keys = subpath.split('/')
for key in keys:
if key in data:
data = data[key]
else:
return jsonify({"error": f"{subpath} not found!"}), 404
return jsonify(data), 200

@app.route('/api/data/remove/<path:subpath>', methods=['POST'])
def remove_data(subpath):
data = load_json()
keys = subpath.split('/')
target_data = data
for key in keys[:-1]:
if key in target_data:
target_data = target_data[key]
else:
return jsonify({"error": f"{subpath} not found!"}), 404

# Remove the data at the final key

if keys[-1] in target_data:
del target_data[keys[-1]]
save_json(data)
return jsonify({"message": f"Data removed from {subpath}!"}), 200
else:
return jsonify({"error": f"{subpath} not found!"}), 404

# Route to reset the database (for testing purposes)

@app.route('/api/data/reset', methods=['POST'])
def reset_data():
save_json({"nosql@db":{}})
return jsonify({"message": "Database reset!"}), 200

- App Execution
if __name__ == '__main__':
app.run(debug=True)

Documentation: NoSQL JSON Manager 34

 2. index.html (The front-end template rendered by Python-Flask)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NoSQL JSON Manager</title>

<!-- Styles -->

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

</head>
<body>
<div class="container">
<header>
<h1>NoSQL JSON Manager</h1>
</header>
<main>
<div id="json-tree" class="json-tree" role="tree" aria-label="JSON
structure"></div>
</main>
</div>

<!-- Application Scripts -->

<script>
/**
* JSON Tree Viewer Application
* Renders a collapsible tree view of JSON data with type information
*/
(function() {
'use strict';

const CONFIG = {
expandIcon: '+',
collapseIcon: '-'
};

// Safely parse JSON data from server

const jsonData = JSON.parse('{{ data | tojson | safe }}');

/**
* Creates a DOM element with given properties
*/
function createElement(tag, props = {}, attributes = {}) {
const element = document.createElement(tag);
Object.assign(element, props);
// Add data attributes and other HTML attributes
Object.entries(attributes).forEach(([key, value]) => {
element.setAttribute(key, value);
});
return element;
}

/**
* Gets the precise type of a value
*/
function getValueType(value) {
if (value === null) return 'null';
if (Array.isArray(value)) return 'array';
if (value instanceof Date) return 'date';
return typeof value;
}
Documentation: NoSQL JSON Manager 35
/**
* Formats a value for display based on its type
*/
function formatValue(value, type) {
switch (type) {
case 'string':
return `"${value}"`;
case 'null':
return 'null';
case 'undefined':
return 'undefined';
case 'date':
return `"${value.toISOString()}"`;
default:
return String(value);
}
}

/**
* Creates the value display element with appropriate type information
*/
function createValueDisplay(value) {
const type = getValueType(value);
const isExpandable = type === 'object' || type === 'array';

if (isExpandable) {
return createElement('span', {
className: 'json-value',
textContent: type === 'array' ? ': [' : ': {'
}, {
'data-type': type
});
}

return createElement('span', {
className: 'json-value',
textContent: `: ${formatValue(value, type)}`
}, {
'data-type': type
});
}

/**
* Renders a JSON tree structure
*/
function renderJsonTree(json, container, indent = 0) {
Object.entries(json).forEach(([key, value]) => {
const type = getValueType(value);
const isExpandable = type === 'object' || type === 'array';

const node = createElement('div', {

className: 'json-node',
role: 'treeitem'
}, {
'style': `margin-left: ${indent * 20}px;`,
'data-key': key
});

// Create toggle button for expandable values

const toggleButton = isExpandable ? createElement('button', {
className: 'json-toggle',
textContent: CONFIG.expandIcon,

Documentation: NoSQL JSON Manager 36

 type: 'button'
}, {
'aria-label': 'Toggle visibility',
'aria-expanded': 'false'
}) : null;

const keySpan = createElement('span', {

className: 'json-key',
textContent: `"${key}"`
});

const valueSpan = createValueDisplay(value);

if (isExpandable) {
const childContainer = createElement('div', {
className: 'json-children'
}, {
'style': 'display: none',
'role': 'group'
});

node.append(toggleButton, keySpan, valueSpan, childContainer);

renderJsonTree(value, childContainer, indent + 1);

const closingBrace = createElement('span', {

className: 'json-value',
textContent: type === 'array' ? ']' : '}'
});
node.appendChild(closingBrace);

toggleButton.addEventListener('click', () => {
const isCollapsed = childContainer.style.display === 'none';
childContainer.style.display = isCollapsed ? 'block' : 'none';
toggleButton.textContent = isCollapsed ? CONFIG.collapseIcon :
CONFIG.expandIcon;
toggleButton.setAttribute('aria-expanded', isCollapsed);
});
} else {
node.append(keySpan, valueSpan);
}

container.appendChild(node);
});
}

// Initialize viewer when DOM is ready

document.addEventListener('DOMContentLoaded', () => {
const jsonTreeContainer = document.getElementById('json-tree');
renderJsonTree(jsonData, jsonTreeContainer);
});
})();
</script>

</body>
</html>

Documentation: NoSQL JSON Manager 37

3. style.css (The style file for the index.html)
:root {
/* Primary theme colors */
--primary-color: #ffff; /* Firebase orange */
--hover-color: #e59203; /* Solid hover color */
--hover-bg: rgba(175, 192, 98, 0.02); /* Subtle orange background */
--background-page: #202124; /* Google dark grey */
--background-content: #292A2D; /* Slightly lighter content area */

/* If user wants Light mode they use this by uncommenting the code
--primary-color: #100d0d;
--background-page: #e0e1e6;
--background-content: #edeef0; */

/* Text colors */
--text-primary: #E8EAED; /* Light grey for primary text */
--text-secondary: #9AA0A6; /* Medium grey for secondary text */

/* Structural colors */
--border-color: #3C4043; /* Dark grey for borders */

/* Syntax highlighting */
--string-color: #81C995; /* Light green for strings */
--number-color: #8AB4F8; /* Light blue for numbers */
--boolean-color: #C58AF9; /* Light purple for booleans */
}

body {
display: flex;
min-height: 100vh;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Arial, sans-serif;
font-weight: bolder;
background-color: var(--background-page);
color: var(--text-primary);
line-height: 1.5;
font-size: 20px;
}

.container {
flex: 1;
max-width: 1200px;
margin: 24px auto;
padding: 40px;
background-color: var(--background-content);
border-radius: 8px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3),
0 4px 8px 3px rgba(0, 0, 0, 0.15);
}

h1 {
margin: 0 0 32px 0;
font-size: 32px;
font-weight: 500;
color: var(--primary-color);
letter-spacing: 0.25px;

Documentation: NoSQL JSON Manager 38

}

.json-tree {
font-family: 'Roboto Mono', 'Monaco', 'Consolas', monospace;
font-size: 20px;
font-weight: bolder;
line-height: 1.8;
letter-spacing: 0.3px;
}

.json-node {
position: relative;
margin: 4px 0;
padding: 4px 0 4px 28px; /* Added vertical padding */
border-left: 2px solid var(--border-color);
transition: all 0.2s ease;
}

.json-node:hover {
border-left-color: var(--hover-color);
background-color: var(--hover-bg);
}

.json-key {
color: var(--primary-color);
font-weight: bolder;
font-size: 20px;
}

.json-value {
color: var(--text-secondary);
font-size: 20px;
}

.json-toggle {
position: absolute;
left: -14px;
width: 24px;
height: 24px;
padding: 0;
background: var(--background-content);
border: 1px solid var(--border-color);
border-radius: 4px;
color: var(--text-secondary);
font-size: 14px;
cursor: pointer;
transition: all 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
}

.json-toggle:hover {
background: var(--hover-color);
border-color: var(--primary-color);
color: var(--text-primary);
}

.json-toggle:focus {
outline: none;

Documentation: NoSQL JSON Manager 39

 box-shadow: 0 0 0 2px rgba(229, 146, 3, 0.2);
}

.json-children {
margin-left: 6px;
padding-left: 20px;
}

/* Value Types */
.json-value[data-type="string"] {
color: var(--string-color);
}

.json-value[data-type="number"] {
color: var(--number-color);
}

.json-value[data-type="boolean"] {
color: var(--boolean-color);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
background: var(--background-page);
border-radius: 6px;
}

::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
background: #5F6368;
}

/* Selection style */
::selection {
background-color: rgba(229, 146, 3, 0.3);
color: var(--text-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
.container {
margin: 12px;
padding: 20px;
}

.json-tree {
font-size: 13px;
}
}

Documentation: NoSQL JSON Manager 40

4. database.json
{
"nosql@db": {
"users": {
"User1": {
"name": "John Doe",
"age": 32
}
}
}
}

// nosql@db : it is the root node

// users : it is the ordinary node created by API requester.

5. Operation (Append, Set Only, Get All, Get Only, Remove, Reset)
- append.py
import requests

url = 'http://127.0.0.1:5000/api/data/append/nosql@db/users'
payload = {
"value": {
"User2": {"name": "Peter Doe", "age": 12}
}
}

response = requests.post(url, json=payload)

print(response.json())
# Expected output: {"message": "Data appended at some/users!"}

- setonly.py
import requests
url = 'http://127.0.0.1:5000/api/data/set/nosql@db/users/User1/name'
payload = {"value": "Ramesh"}

response = requests.post(url, json=payload)

print(response.json())
# Expected output: {"message": "Data set at some/key!"}

- getall.py
import requests

response = requests.get('http://127.0.0.1:5000/api/data')
print(response.json())

Documentation: NoSQL JSON Manager 41

- getonly.py
import requests

response =
requests.get('http://127.0.0.1:5000/api/data/get/nosql@db/users/User1')
print(response.json()) # This will print the value at the path "some/key"

- rem.py
import requests

url = 'http://127.0.0.1:5000/api/data/remove/nosql@db/users/User1/name'
# Provide the correct path for the selected field or node
payload = {} # No need to send a value, just the endpoint for removal

response = requests.post(url, json=payload)

print(response.json())
# Expected output: {"message": "Data removed from some/key!"}

- reset.py
import requests

response = requests.post('http://127.0.0.1:5000/api/data/reset')
print(response.json())
# Expected output: {"message": "Database reset!"}

Documentation: NoSQL JSON Manager 42

Conclusion
The NoSQL JSON Manager App successfully provides a lightweight and user-friendly
platform for managing JSON-based NoSQL databases. Its design focuses on simplicity,
making it accessible to users with varying levels of technical expertise. The application
effectively handles core operations such as data retrieval, insertion, updating, and
deletion, with a clean and intuitive interface powered by Flask and Bootstrap.
Limitations
Despite its strengths, the app has several limitations:
1. Scalability:
The app uses a single JSON file (database.json) as its data store. While sufficient
for small datasets, this approach is not scalable for large or complex datasets due
to potential performance bottlenecks and file size limitations.
2. Concurrent Access:
The current implementation lacks robust mechanisms to handle concurrent access
or modifications, which could lead to data inconsistencies in a multi-user
environment.
3. Data Security:
Since the JSON file is stored locally without encryption or access controls, the app
is not suitable for handling sensitive or secure data.
4. Limited Query Capabilities:
The app's querying capabilities are basic and do not support advanced querying,
filtering, or searching, which are common requirements in more sophisticated
database systems.
Future Scope
Several areas offer opportunities for future development and enhancement:
1. Database Backend Integration:
Replacing the JSON file with a more robust database backend (such as MongoDB or
SQLite) could significantly improve scalability, concurrency handling, and querying
capabilities.
2. User Authentication and Authorization:
Implementing user authentication and role-based access control would enhance
data security, allowing for multi-user environments with controlled access to data.
3. Advanced Query Features:
Adding support for advanced querying, filtering, and sorting would make the app
more powerful, especially for users who need to work with complex datasets.
4. UI Enhancements:
Further improving the user interface with more interactive elements, real-time

Documentation: NoSQL JSON Manager 43

 updates, and additional visualization options could enhance user experience and
usability.
5. API Enhancements:
Expanding the API to include more comprehensive endpoints, such as bulk data
operations and integration with external services, would increase the app's utility
and flexibility.
Implementation
To implement these future enhancements, the following steps are recommended:
1. Switch to a Database Backend:
Integrate a database like MongoDB, which naturally aligns with the JSON data
structure and offers built-in support for scalability, concurrency, and advanced
querying.
2. Add User Management:
Implement user authentication using libraries like Flask-Login or OAuth, combined
with role-based access control to manage data access permissions.
3. Enhance the API:
Expand the API to support more complex data operations and integrate external
services for features like data import/export, analytics, or third-party tool
integration.
4. Optimize the Frontend:
Use modern frontend frameworks like React or Vue.js to create a more dynamic
and responsive user interface, allowing for real-time data updates and richer user
interactions.
5. Implement Security Measures:
Introduce data encryption, secure communication protocols (HTTPS), and regular
security audits to protect data and user privacy.
By addressing these limitations and pursuing these enhancements, the NoSQL JSON
Manager App can evolve into a more robust, scalable, and feature-rich tool, catering to a
broader audience and more complex use cases.

Documentation: NoSQL JSON Manager 44