CrossVerse.art

This project was inspired by -Bible Cross-References - The main idea is to make the artwork a real/interactive application. Each book of the Bible, from both the Old and New Testaments, is displayed as a clickable node under the arc. When you click on a book, it expands to reveal all its chapters. Clicking on a chapter opens a modal that displays the verses within that chapter. You can then click on any verse to view its cross-references with verses from other books and chapters.

Approximately 340,000 cross-references highlight commonalities across different sections of the Bible, connecting themes, words, events, or people through arc lines in the diagram. The thickness and darkness of each line represent the number of cross-references, with thicker and darker lines indicating more connections. The diagram is highly customizable—you can modify the color of references for individual books and chapters, highlight specific book(s), and focus on references for the expanded book only. You can also switch between two Bible versions, King James Version (KJV) and Book Of Life. After customizing the diagram, you can save your settings for future use.

Despite all the differences in the journey of writing the bible from distant authors, places, languages, and time periods, the Bible is very interconnected and contains all these intersections (cross-references).

Challenges Faced

Data Processing & Formatting: The raw data files were large and unstructured, making them difficult to use directly in the application. To solve this, I used a Node.js server to parse and reformat the data into a clean, usable JSON structure tailored to the app’s requirements.
Performance-Oriented Data Splitting: Attempting to render ~340,000 cross-references all at once caused serious performance issues and long load times. I overcame this by designing a chunk-based rendering strategy where each book and its chapters were loaded and rendered separately, drastically improving responsiveness and load performance.
Efficient Rendering Approach: Rendering all content client-side led to delays in user interaction, while server-only rendering limited interactivity. To balance performance and UX, I implemented a hybrid strategy using both server-side and client-side rendering and utilizing routing strategies like parallel routing and routing interceptors in Next.js, enabling faster initial loads and interactive features.
Client-Side Optimization: With large amounts of data being processed on the client, performance bottlenecks like UI freezes and high memory usage became a challenge. I addressed this by using techniques like memoization, caching server responses, and batch updates with D3.js to reduce re-renders, avoid crashes, and ensure a smooth user experience.

Future Improvements

In the future, I plan to enhance the application by adding more features and improving its performance. Some of the improvements I have in mind are:

Implement an authentication mechanism and allow more personalized features.
Adding features to enable more personalized user experience such as save favorite verses or cross-reference, add notes and highlight text.
Implementing a search feature to allow users to quickly find specific verse or cross-references.
Enhance the application UI by adding animations and transitions, to boost application smoothness and user experience (I'm planing to use Motion library for this purpose).
Include more versions of the bible and add verses comparison feature.
Extend PWA capabilities and enable offline support.

Technologies Used

The project initially developed using Next.js 14 then upgraded to Next.js 15, TypeScript, D3.js, Motion.dev, next-pwa, and next-intl. It is a highly customizable and interactive web application that allows users to explore the interconnectedness of the Bible's content. The use of D3.js enables the creation of 2D arc representation of the references, enhancing the user experience. Additionally, users can download the application as a PWA (Progressive Web App) on any smart phone or desktop device for easy access.

CrossVerse.art

Challenges Faced

Data Processing & Formatting: The raw data files were large and unstructured, making them difficult to use directly in the application. To solve this, I used a Node.js server to parse and reformat the data into a clean, usable JSON structure tailored to the app’s requirements.

Performance-Oriented Data Splitting: Attempting to render ~340,000 cross-references all at once caused serious performance issues and long load times. I overcame this by designing a chunk-based rendering strategy where each book and its chapters were loaded and rendered separately, drastically improving responsiveness and load performance.

Efficient Rendering Approach: Rendering all content client-side led to delays in user interaction, while server-only rendering limited interactivity. To balance performance and UX, I implemented a hybrid strategy using both server-side and client-side rendering and utilizing routing strategies like parallel routing and routing interceptors in Next.js, enabling faster initial loads and interactive features.

Client-Side Optimization: With large amounts of data being processed on the client, performance bottlenecks like UI freezes and high memory usage became a challenge. I addressed this by using techniques like memoization, caching server responses, and batch updates with D3.js to reduce re-renders, avoid crashes, and ensure a smooth user experience.

Future Improvements

In the future, I plan to enhance the application by adding more features and improving its performance. Some of the improvements I have in mind are:

Implement an authentication mechanism and allow more personalized features.

Adding features to enable more personalized user experience such as save favorite verses or cross-reference, add notes and highlight text.

Implementing a search feature to allow users to quickly find specific verse or cross-references.

Enhance the application UI by adding animations and transitions, to boost application smoothness and user experience (I'm planing to use Motion library for this purpose).

Include more versions of the bible and add verses comparison feature.

Extend PWA capabilities and enable offline support.

Technologies Used