nanostores VS vite

use a shared state manager like nanostores

I retrieved access to files the directory of words using the Astro.glob() function super easily (too bad I couldn't talk about how powerful this function is; how glad I am it existed out-the-box in Astro and how much ease it brought into the flow of getting this search engine up and running) and plugged the returned array of word objects into a $dictionary state (maybe I should call this a store) powered by nanostore (another beautiful stuff right there)

In its docs, Astro recommends nanostores, but I’ve used effector in the past. And LOVED IT. So I’ve used it for this project as well.

Nanostores explanation

vidstack is very light on technical details but starts with a concise intro and a screenshot, as well as relevant links: https://github.com/vidstack/player

payload is well-structured in general: https://github.com/payloadcms/payload

nanostores starts out with an intro and telling code examples, followed by lots of technical details: https://github.com/nanostores/nanostores

Nanostores and Reatom are also great, fast atomic libs

Astro handles multi-framework components (React, Vue, etc) and they recommend using the nanostores library for shared state.

Checkout Nanostore it's what Astro.build recommends for sharing state across different ui libraries.

All of these are valid ways of fixing the state management issue, but it's clear that we need to find a common solution that works for all the UI libraries. This is where nanostores comes into play! The description they provide on their GitHub page is simply perfect:

The application scaffold was created using the Vite build tool (https://vite.dev/).

vite handles it really well but run via bunx

Frontend Vue with Vite, PrimeVue for components, unDraw for illustrations

I used Spring Initializr to generate the starting point of my Spring Boot application, using their MySQL guide to set up a database in Docker. I also created a React+Vite app to consume the API I plan on creating.

Why are there so many JavaScript build tools? Gulp, Grunt, Webpack, Laravel Mix, Rollup.js, and now Vite. And these are just the ones that I've worked with. Haven't we solved this problem? And why build a new tool? Why not improve existing tools?

Vite Documentation Next.js Documentation React Docs

Vite + React for the frontend

When I first set up my project, I chose TailwindCSS 3.4.17 because it was stable, reliable, and packed with all the utilities I needed to build a sleek, responsive design. Paired with Vite 6.3.2 for its blazing-fast development server and autoprefixer 10.4.21 to handle browser compatibility, my workflow felt smooth and efficient. However, as the web development landscape evolves, so do the tools we rely on. Recently, TailwindCSS 4.1 was released, and after reading through the official announcement , I realized it’s time to take my project to the next level.

I’m always on the lookout for tools that can make my workflow faster, more efficient, and enjoyable. Recently, I decided to integrate Vite into my existing TailwindCSS CLI project, all-things-digital. My goal was to modernize my build process while keeping the simplicity of my current setup intact. In this blog post, I’ll walk you through the entire process—from creating a backup branch, integrating Vite into my current codebase and modularizing my code to take advantage of what Vite has to offer. By the end of this journey, you’ll have a clear understanding of how to upgrade your own project with Vite while maintaining modularity and performance.