Welcome. This is my hobby journey I will work on during my spare time.

Why This Journey?

As a data hoarder I collected thousands of mp3 files, rip of originally bought CDs, over the decades.

And in those 20 years, i had many failed attempts to catalogue my growing mp3 collection.

Each time, I had to start from scratch because of changing naming formats, folder structure or tagging needs.

And despite trying numerous music cataloguing apps like Rekordbox, I was never satisfied with the result.

Many times. The app just stopped working and I lost my database after spending thousands of hours on manual work.

Other times, apps lacked certain features like filtering by tags.

That is why I decided to build an ultimate music organizer, that can help me catalog, tag and sort my music collection.

Ultimate Goals

• Create my first desktop application
• Learn new programming framework
• Build in public

Tools I Use

• ChatGPT 3.5 (Free)
• Google Gemini (Free)
• MS Copilot (Free)
• IntelliJ IDE ($169/per year)

My Strategy

• Document every step, every struggle in public. 
• Learn react native
• ???
• Profit

Background & Main Challenges

I have experience with JavaScript and Python, primarily focused on developing web applications.

However, transitioning to desktop application development presents a whole new set of challenges.

There are numerous intricacies and nuances associated with native OS development, such as file manipulation, path handling, disk access, and countless other considerations that I may not even be aware of at the moment.

Day 1

Hours worked/Total: 3/3

Day Recap

1. Installed development dependencies including Visual Studio 2022, Node, Yarn, and .NET SDK.
2. Successfully initialized a React Native project and ran a sample app.

What I Did

Attempted to install Visual Studio 2022 using PowerShell commands but encountered an error related to HTTP response.

Set-ExecutionPolicy Unrestricted -Scope Process -Force;
iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-vs2022-deps.ps1');

Modified Visual Studio 2022 installation configuration to include necessary components like .NET, C++, Windows platforms, and Node support.

Tried to install Node.js and Yarn but faced issues with npm not being found in the path.

Fixed the npm path and reinstalled Node.js, but it didn't resolve the problem.

Eventually installed npm globally to ensure it's accessible from the command line.

npm install npm -g

Successfully initialized a React Native project with the necessary Windows configurations.

npx react-native-windows-init --overwrite

Ran the React Native sample app successfully.

npx react-native run-windows

Remarks

• Had to configure Visual Studio 2022 for necessary components like .NET, C++, Windows platforms, and Node support.
• Faced npm not found error, fixed by adjusting the npm path and reinstalling npm.

Next Goals

Now I need to figure out how to style react native and start changing stuff in App.tsx.

Day 2

Hours worked/Total: 2/5

Day Recap

Outcome: I successfully set up Nativewind (Tailwind CSS for React Native) in my project and got it working with some initial styles.

What I Did

• Researched UI libraries for React Native Windows and found options like Tamagui, Nativewind, NativeBase, React Native Paper, and FluentUI
  • All looks amateurish and difficult to get started as React Native newbie. Also all projects are missing showcases meaning there are not many successful apps or web projects using these UI libraries.
• Decided to go with Nativewind since I'm already familiar with Tailwind CSS from web development
• Installed Nativewind and its dependencies

# Install Nativewind and its dependencies
npm install nativewind
npm install --save-dev [email protected]

# Initialize Tailwind config
npx tailwindcss init

• Ran into some vulnerability warnings during installation but resolved them by reverting to the latest stable versions
• Configured Nativewind by initializing it, modifying the config files, and setting up Babel plugins

// tailwind.config.js
module.exports = {
  content: [
    "./App.tsx",
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  // ...
}

 

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ["nativewind/babel"],
};

Remarks

The process wasn't entirely smooth, as I encountered some dependency issues and had to revert to stable versions. However, Nativewind seems promising for styling React Native Windows components using the familiar Tailwind CSS syntax.

Next Goals

• Explore Nativewind further and start applying styles to components
• Create layout designs using Nativewind's utilities

Day 3

Hours worked/Total: 3/6

Day Recap

Outcome: I got Nativewind set up and working with initial styles. However, I hit a roadblock when trying to customize the window title bar in React Native Windows.

What I Did

• Attempted to find a way to customize the window title bar and make the window background black
• Searched for solutions online, but couldn't find any React Native Windows components for this purpose
• Discovered that customizing the title bar can only be done in native Windows code (C++)

Remarks

Front End designers block is real.

Similarly to Writers Block, you spend hours trying to customize a simple UI element. But to no Avail.

The deeper you go, the more you might question your life choices

A seemingly straightforward goal like making a custom title bar can send you down a rabbit hole of obscure GitHub issues and unanswered Stack Overflow questions.

But here's the thing:

99% of the time. This extra effort rarely brings value to your end user.

So instead of wasting your time, you can:

• take a step back and re-evaluate your priorities.
• ditch the framework

In case of React Native, it's better to flight than fight.

Next Goals

• Stop wasting time on Windows native UI elements, give React Native another chance and start with basics

Day 4

Hours worked/Total: 2.5/8.5

Day Recap

Outcome: After deciding to give React Native another chance, I ran into multiple issues with NativeWind and had to pivot to a different approach for styling. Additionally, I faced problems with integrating file system access using React Native FS.

What I Did

• Styling
  • Decided to give React Native another chance and cleaned up the boilerplate starter project to start fresh.
  • Tried to install NativeWind v4, created a CSS file, and added Tailwind directives, but it didn’t work.
  • Fixed Metro Bundler config to merge with NativeWind, but it still didn’t work—ended up using the Tailwind CLI guide instead.
  • Realized that the color attributes and some classes (e.g., text-4xl) didn’t work. Spent way too much time trying to make it functional.
  • Did research on Reddit and found that most UI libraries for React Native are slow, outdated, or abandoned. Most recommend just styling components manually.
  • Decided to uninstall everything and reinstall the project clean, avoiding the hacky NativeWind setup.
  • Created a sidebar component using the StyleSheet approach. It works okay, but:
    • Flexbox is tricky.
    • The View component is confusing, and nothing looks the same as it does in regular web development.
• File System Integration
  • Tried to render folders dynamically based on a string path variable.
  • Installed react-native-fs
  • Attempted to use an absolute path in RNFS.readdir, but got a TypeError: RNFSManager is undefined.
  • Realized it’s probably not linked, but npx react-native link react-native-fs doesn't work since linking is no longer needed in newer versions of React Native.
  • Checked node_modules and saw some files, so manual linking shouldn’t be necessary... or so I thought.
  • Still got the same error.
  • Found React Native Windows documentation mentioning the need for autolinking:
    bash

    Copy code

    npx react-native autolink-windows

Remarks

Trying to make NativeWind work in React Native is more trouble than it’s worth.

If you find yourself wrestling with config files more than building actual features, it’s time to reassess your approach. Spending hours on this yielded little return.

As for UI styling, manually creating components with StyleSheet seems to be the better approach in React Native. It’s not as smooth as web dev (yet), but at least it works.

Integrating file system features (like folder rendering) should be straightforward, but React Native’s module linking can be a real pain.

Next Goals

• Give up on React Native

Day 5

Hours worked/Total: 1/9.5

Day Recap

Outcome: Spent the day researching options for truly native Windows development. Explored various technologies like C++, C#, .NET MAUI, WinUI3, and Avalonia, but each has its own pros and cons, making the decision tougher.

What I Did

• Researched native Windows development alternatives:
  • C++: Core language for Windows apps but steep learning curve.
  • C# with .NET:
    • MAUI: Cross-platform and modern but still uses WinUI3 under the hood.
    • WPF and WinForms: Both look dated and aren’t ideal for modern UIs.
• Looked into .NET MAUI:
  • It’s cross-platform but still runs on WinUI3 for Windows, which gives it a somewhat amateurish look, similar to Electron apps.
• Explored a list of professional apps built with WinUI3:
  • Apps like WhatsApp and Outlook use WinUI3 and look polished.
• However, according to Reddit discussions, WinUI3 isn’t stable or production-ready.
  • It uses XAML for layouts, and no one seems to fully adopt it yet.
• Investigated Avalonia:
  • Gaining a cult following, with references from companies like Honeywell and JP Morgan.
  • Still based on .NET, so it doesn’t escape the ecosystem’s baggage.

Remarks

Windows native development is fragmented.

C++ remains the core standard for native development, but it’s not beginner-friendly.

C# offers a more accessible path, but technologies like MAUI and WinUI3 don’t seem to be stable or polished enough for professional use—despite big apps like WhatsApp using them.

While Avalonia is gaining traction and industry validation, it still lives within the .NET world, which raises concerns about long-term stability and development overhead.

Next Goals

• Look into Avalonia

Day 6

Hours Total: 11.5

Day Recap

Outcome: Decided to try Avalonia, motivated by Reddit posts suggesting that it's a more future-proof option compared to WinUI3. Successfully set up the environment and learned the basics of the MVVM pattern. Made good progress with the initial project setup.

What I Did

• Committed to Avalonia based on positive feedback from Reddit—seems like a better bet for long-term project stability.
  • One downside: Avalonia has fewer tutorials and resources compared to WinUI3, but it should be faster.
• Downloaded and installed .NET 8.0 for Windows.
• Installed the Avalonia template:
  bash

  Copy code

  dotnet new install Avalonia.Templates
• Installed the Avalonia Visual Studio Extensions.
• Created a new project using the CLI:
  bash

  Copy code

  dotnet new avalonia.mvvm -o MyProject 

What I Learned

• MVVM Pattern: Explored the Model-View-ViewModel pattern, which is core to Avalonia.
  • Learned how text binding works in XAML: connected a text variable to a TextBlock in the view.
• Followed a tutorial to add a button that:
  • Prints a debug message on click.
  • Accepts input from a textbox and performs some calculation based on that input.

Remarks

Avalonia feels promising. While it’s true that there aren’t as many tutorials or guides, the structure it provides with the MVVM pattern makes building UI apps logical and scalable. The binding system is intuitive, but the learning curve for more complex components might be steep.

Next Goals

• Continue learning more about Avalonia and the MVVM architecture.
• Add more interactive components to the project and explore more complex data bindings.
• Experiment with styling in Avalonia to see how customizable the UI can get.