A tiny weather app
🚀 Demo ● 📊 Results

This is a simple weather app, built in Solid.js (as well as also 10 other frontend frameworks) in order to review, compare and benchmark frontend web frameworks.

• 🌦️ Live weather conditions
• 📅 7-day weather forecast
• 🔍 City search functionality
• 📍 Geolocation support
• 💾 Persistent location storage
• 📱 Responsive design
• ♿ Accessible interface
• 🎨 Multi-theme support
• 🧪 Fully unit tested
• 🌐 Internationalized

Task	Status
Test - Executes all e2e and unit tests
Lint - Verifies code style and quality
Build - Builds and deploys the app

First, follow the repo setup instructions. Then cd apps/solid and use the following commands:

npm run dev    # Start dev server (vite)
npm test       # Run tests
npm run lint   # Run lint checks
npm build      # Build for production (vite build)
npm start      # Serve built prod app (from ./dist)

For troubleshooting, use npm run verify from the root of the project.

The weatherStore.js uses SolidJS's createSignal() for fine-grained reactivity. Unlike React, changes only update specific DOM nodes, not entire component trees.

SolidJS uses JSX syntax but compiles to real DOM operations. No virtual DOM overhead - changes are tracked at the signal level and update the DOM directly.

Signals return getter/setter pairs: const [count, setCount] = createSignal(0). The store exposes both getter functions and signal accessors for flexible consumption patterns.

The store implements request ID tracking (latestRequestId) to prevent race conditions when multiple async operations are in flight simultaneously.

SolidJS automatically tracks dependencies, so reactive computations only re-run when their actual dependencies change, not when the entire component re-renders.

Solid looks like React on the surface but skips the virtual DOM, updating the DOM directly with fine-grained reactivity. This makes it blazing fast and efficient. It has a smaller community but a lot of buzz among developers chasing performance. If you like React’s syntax but hate its runtime overhead, Solid is refreshing.

Solid feels like React, but actually reactive. It looks like JSX, but underneath it's magic. While React re-renders entire component trees, Solid surgically updates only the exact DOM nodes that need to change. The result is performance that makes other frameworks look sluggish.

The mental shift from React is subtle but profound. Instead of thinking about re-renders and memoization, you think about signals and reactivity. createSignal returns a getter and setter - call temperature() to read, setTemperature(25) to update, and everything that depends on it automatically updates.

Our weather app showcases this, as the temperature display, the weather icon, the styling - they all react independently when the weather data changes. No useEffect, no dependency arrays, no useMemo - just pure reactive programming that actually works.

The JSX looks familiar, but <Show> and <For> components replace your typical {condition && <div>} patterns. These aren't just syntactic sugar - they're compiled into efficient conditional rendering that only updates when necessary.

createResource handles async data elegantly, giving you loading states, error handling, and refetching without the usual ceremony. For our simple weather app, we didn't need Solid's more advanced features like stores or effects, but for something complex, the fine-grained reactivity becomes essential.

Since the weather app is very simple, it may be helpful to see a more practical implementation of a Solid.js app. So, checkout:

Chief Snack Officer - Office snack management app
🐙 Get it on GitHub at github.com/Lissy93/cso
🌐 View the website at lissy93.github.io/cso

Weather-Front is licensed under MIT © Alicia Sykes 2025.
View Attributions for credits, thanks and contributors.