@iamsrijitbanerjee

It took a lot of time just to adjust with the file directory and to switch from react to vite. I built a local Node.js server using Express to securely handle my API requests in the future. For now, this backend is loaded with mock data and simulated network delays to perfectly mimic live telemetry without needing actual credentials yet. On the frontend, I established a strict CSS Grid layout. Early on, a manually created, empty package file caused a JSON parsing crash on the backend, which I quickly resolved by letting Node generate a properly formatted blueprint. On the frontend, I initially faced turbulence by applying a standard backend initialization, which left me without a bundler to actually run the React code. I quickly pivoted, cleared the deck, and installed Vite system to compile and serve the user interface. My final challenge was a strict lesson in mapping. Vite is highly case-sensitive, and it threw a red screen of import errors because the folder names (like “Components” with a capital C) didn’t perfectly match the lowercase names in my code. By simply aligning the map and renaming the files in the sidebar to match the exact casing, Vite’s hot module replacement instantly caught the changes and the website was running in the browser.

It took a lot of time just to adjust with the file directory and to switch from react to vite. I built a local Node.js server using Express to securely handle my API requests in the future. For now, this backend is loaded with mock data and simulated network delays to perfectly mimic live telemetry without needing actual credentials yet. On the frontend, I established a strict CSS Grid layout. Early on, a manually created, empty package file caused a JSON parsing crash on the backend, which I quickly resolved by letting Node generate a properly formatted blueprint. On the frontend, I initially faced turbulence by applying a standard backend initialization, which left me without a bundler to actually run the React code. I quickly pivoted, cleared the deck, and installed Vite system to compile and serve the user interface. My final challenge was a strict lesson in mapping. Vite is highly case-sensitive, and it threw a red screen of import errors because the folder names (like “Components” with a capital C) didn’t perfectly match the lowercase names in my code. By simply aligning the map and renaming the files in the sidebar to match the exact casing, Vite’s hot module replacement instantly caught the changes and the website was running in the browser.

To finish off on an interesting note, I focused on easter eggs, adding more details to the story and fixing the user interface problems. I made the main database bigger to include over 80 characters from all the seasons of The Mentalist. I also improved the Evidence Pinboard to show eight suspects, including the list of people who could be Red John. The technical problem I had during this time was getting the HTML5 Canvas layers to work right for the red strings. At first the canvas was getting in the way. People could not click on the red pins underneath it. To fix this I had to set up the z-index stacking right and use a special code on the canvas layer to ignore the mouse clicks while also making sure the pins themselves would work with mouse clicks. I also fixed the problem of pictures being cut off on the roster by using some properties in the CSS code. To finish everything up I added a drive, for the Blake Association that people can access from the Terminal and I made the digital FBI Badge generator work perfectly so it can make real pictures.

To finish off on an interesting note, I focused on easter eggs, adding more details to the story and fixing the user interface problems. I made the main database bigger to include over 80 characters from all the seasons of The Mentalist. I also improved the Evidence Pinboard to show eight suspects, including the list of people who could be Red John. The technical problem I had during this time was getting the HTML5 Canvas layers to work right for the red strings. At first the canvas was getting in the way. People could not click on the red pins underneath it. To fix this I had to set up the z-index stacking right and use a special code on the canvas layer to ignore the mouse clicks while also making sure the pins themselves would work with mouse clicks. I also fixed the problem of pictures being cut off on the roster by using some properties in the CSS code. To finish everything up I added a drive, for the Blake Association that people can access from the Terminal and I made the digital FBI Badge generator work perfectly so it can make real pictures.

Guys, hope you go through the video walkthrough. The audio player now has four tracks (Choices: Sacramento Rain, Late Night Office Hum, Lo-Fi Vinyl Crackle, and Teletype).I also updated the FBI/CBI Badge Creator, it uses HTML5 Canvas. People can type in their name and field of work, then they can get a special consultant badge. The old Evidence Pinboard was not very exciting. Now, the user can drag strings between the red pins on the suspect cards. This makes it look like the suspects are all connected and people can see how they are related to each other. The CBI ID credential and the Evidence Pinboard are great tools that make the experience feel more real.

The search bar on website is really good now. It can find over 80 people like characters, suspects and agents from The Mentalist. You can use it like you use the search on your computer. If you want to find someone like Virgil Minelli or Lorelei Martins you can just type their name. It will show you what they are doing and what group they are part of, with clearance level. I also made the Devlog tool better. Now you can write a lot of information about what you’re working on. You can use the editor to write many paragraphs about your investigation or what you are developing.

The search bar on website is really good now. It can find over 80 people like characters, suspects and agents from The Mentalist. You can use it like you use the search on your computer. If you want to find someone like Virgil Minelli or Lorelei Martins you can just type their name. It will show you what they are doing and what group they are part of, with clearance level. I also made the Devlog tool better. Now you can write a lot of information about what you’re working on. You can use the editor to write many paragraphs about your investigation or what you are developing.

The core was rewritten to support window management. This means users can now manage their windows in a way. I added a taskbar at the bottom of the screen. This taskbar is like a dock where users can minimize their windows into icons that glow. When they want to use the window they can restore it and it will go back to how it was before.

I also made a system that lets users change the size of their windows. They can do this by dragging the edges of the window. There are handles on the right, bottom and bottom right of the window that they can grab onto to make the window bigger or smaller. If they drag a window to the right side of the screen it will automatically move to fill half of the screen. This makes it easy for users to have two windows at the same time one on each side of the screen, with each window taking up exactly half of the space. The core and the window management system are designed to work seamlessly with the core supporting the professional window management features.

The core was rewritten to support window management. This means users can now manage their windows in a way. I added a taskbar at the bottom of the screen. This taskbar is like a dock where users can minimize their windows into icons that glow. When they want to use the window they can restore it and it will go back to how it was before.

I also made a system that lets users change the size of their windows. They can do this by dragging the edges of the window. There are handles on the right, bottom and bottom right of the window that they can grab onto to make the window bigger or smaller. If they drag a window to the right side of the screen it will automatically move to fill half of the screen. This makes it easy for users to have two windows at the same time one on each side of the screen, with each window taking up exactly half of the space. The core and the window management system are designed to work seamlessly with the core supporting the professional window management features.

The last update was about finishing up things and sending it out. I looked at all the code carefully finding every broken link changing the last bits of fake text with real final words and checking for any problems that might happen. I spent a lot of time making sure that the global search engine, custom playlists and native PDF reader all work well on every page. When the tests in my computer were approved I put the files online and made the site live. Bookly is now officially online and ready to help students, over the world.

The last update was about finishing up things and sending it out. I looked at all the code carefully finding every broken link changing the last bits of fake text with real final words and checking for any problems that might happen. I spent a lot of time making sure that the global search engine, custom playlists and native PDF reader all work well on every page. When the tests in my computer were approved I put the files online and made the site live. Bookly is now officially online and ready to help students, over the world.

This update was about making Bookly real. I did a data change removing the fake items and putting real textbooks and real cover images in their place. The library now. Feels like a real and working platform! Along with the books I connected the social media links and changed the sites main details to show our real brand. Now that the structure and system are all set the hard work is done. From on the plan is simple: the rest of the work is mostly about making the user interface better and adding more books to the JSON database for the community. We are, near the end!

This update was about making Bookly real. I did a data change removing the fake items and putting real textbooks and real cover images in their place. The library now. Feels like a real and working platform! Along with the books I connected the social media links and changed the sites main details to show our real brand. Now that the structure and system are all set the hard work is done. From on the plan is simple: the rest of the work is mostly about making the user interface better and adding more books to the JSON database for the community. We are, near the end!

I just finished making the platform feel really alive. It does not need me to fix it all the time. I worked on the Featured Book section on the Home page. Before I had to change the code by hand to show a book. Now it uses a JavaScript loop that runs automatically. I made a function that figures out what week of the year it is. The script uses math to switch between a list of book IDs from our database every 7 days. It puts the book cover, description and other details into the PDF reader and the UI Modal perfectly. The Featured Book section is. Changing all the time and it is ready for students to use. The platform is working dynamically. The Featured Book section is automatically updated. I made the Featured Book section feel alive. It is ready, for the students.

I just finished making the platform feel really alive. It does not need me to fix it all the time. I worked on the Featured Book section on the Home page. Before I had to change the code by hand to show a book. Now it uses a JavaScript loop that runs automatically. I made a function that figures out what week of the year it is. The script uses math to switch between a list of book IDs from our database every 7 days. It puts the book cover, description and other details into the PDF reader and the UI Modal perfectly. The Featured Book section is. Changing all the time and it is ready for students to use. The platform is working dynamically. The Featured Book section is automatically updated. I made the Featured Book section feel alive. It is ready, for the students.

I am trying to expand Booklys library putting every saved book into one “Favorites” list just wasn’t working. Students study for subjects and exams at the same time. First I improved our localStorage structure from a flat array to a dictionary object. This let me include a custom dropdown inside the Book UI Modal where users can make their folders right away (like “Term 1 Finals” or “Weekend Reading”). Lastly I redesigned the Library page swapping the favorites grid for a lively tabbed dashboard. Users can now move through their custom folders easily. To finish I created a migration script so anyone who had books stored in the system had them moved to a default “Favorites” folder without losing any information. I am trying to expand Booklys library putting every saved book into one “Favorites” list just wasn’t working. Students study for subjects and exams at the same time. Todays update adds a Spotify-style “Collections” feature to the platform. First I improved our localStorage structure from a flat array to a dictionary object. This let me include a custom dropdown, inside the Book UI Modal where users can make their folders right away (like “Term 1 Finals” or “Weekend Reading”). Lastly I redesigned the Library page swapping the favorites grid for a lively tabbed dashboard. Users can now move through their custom folders easily. To finish I created a migration script so anyone who had books stored in the system had them moved to a default “Favorites” folder without losing any information.

I am trying to expand Booklys library putting every saved book into one “Favorites” list just wasn’t working. Students study for subjects and exams at the same time. First I improved our localStorage structure from a flat array to a dictionary object. This let me include a custom dropdown inside the Book UI Modal where users can make their folders right away (like “Term 1 Finals” or “Weekend Reading”). Lastly I redesigned the Library page swapping the favorites grid for a lively tabbed dashboard. Users can now move through their custom folders easily. To finish I created a migration script so anyone who had books stored in the system had them moved to a default “Favorites” folder without losing any information. I am trying to expand Booklys library putting every saved book into one “Favorites” list just wasn’t working. Students study for subjects and exams at the same time. Todays update adds a Spotify-style “Collections” feature to the platform. First I improved our localStorage structure from a flat array to a dictionary object. This let me include a custom dropdown, inside the Book UI Modal where users can make their folders right away (like “Term 1 Finals” or “Weekend Reading”). Lastly I redesigned the Library page swapping the favorites grid for a lively tabbed dashboard. Users can now move through their custom folders easily. To finish I created a migration script so anyone who had books stored in the system had them moved to a default “Favorites” folder without losing any information.

This time, I focused on enhancing the user experience. First, I expanded our central books.json database, populating it with a wider variety of texts and injecting new metadata—like author names, page counts, and synopses. To display this rich data without cluttering the main grid, I built a custom, glass-morphism UI Modal. Now, clicking “View Book” triggers a sleek pop-up rather than aggressively forcing a download. The biggest technical win, however, is the new “Read Online” integration. By leveraging the target=”_blank” attribute paired with the raw PDF URL, Bookly now securely hands off the file to the browser’s native PDF viewer. This bypasses the need for heavy third-party libraries, ensuring students get a hardware-accelerated, lag-free reading experience right in their current window.