This content originally appeared on DEV Community and was authored by Syakir
Hey guys 👋, Syakir here!
Its been a while since my last post. I skipped my weekly blog posts because i have been busy working on a new project since a couple weeks ago. And now i want to share it with you.
I'm currently building AlternateOSS, a website directory that sharing free, open-source alternatives to popular softwares.
I am interested in the open source world, and started looking for open source alternatives for the tools i have used. Then, im thinking about creating directory for someone like me. I found similar existing projects on the internet, but i want to do it in more organized, and relevancy-oriented list.
I collected 100+ softwares so far and share them with category organization.
The Stacks
The stacks i used are simple. For now, it's fully static. I might convert them full-stack project later when the project become too big.
- ✅ Astro
- ✅ TailwindCSS
- ✅ Shadcn / Radix
- ✅ Markdown
- ✅ Fully-static, NO Database
- ✅ Cloudflare pages
Highlighted Features
Some hightlighted features that i think its cool, and you might interested to implement them to your project as well.
Smooth Navigation with View Transition
The View Transition API enables smooth animated transitions between pages/states in web applications.
- It captures the "before" and "after" states of elements
- Automatically creates animations between these states
- Works with both same-origin navigations and DOM updates
It makes the website really smooth. If it implemented in static website, it feel like it has no loading at all.
I implemented it easily with Astro View Transition. I just need to add a <ViewTransition /> tag and transition:name directives in every element i want to animate.
*Note that the View Transition API is only working on Chromium based browsers. It currently not supported by Firefox.
Static, Instant Search
I build a fully static instant search with:
- Astro Static Endpoint, where i store all search data in formatted json array: https://alternateoss.com/api/search.json
-
LocalStorage, the search.json will only loaded once, and then stored to local storage, until the new version is available. From there, i simple use javascript array
.filtermethod for search - cmdk & Shadcn Command for search input UI
Of course, This static instant search feature is not scalable. But, with the help of ChatGPT, i calculated that this method will still reliable until i reach 10k rows in search.json, with file size around 2MD.
It will takes years to reach that number if i just input the softwares manually
Ranked Alternatives Based on Relevancy & Feature completeness
Last, but not least. This might be the important feature that distinguish AlternateOSS with other similar project. I ranked every tools not based on its github stars or popularity, but mainly based on use cases / category relevancy and manual review for feature completeness / tool quality.
For instance, we have some Google Analytics alternatives:
- Posthog: Category -> Product Analytics, Web analytics
- Umami: Category -> Web analytics
- Plausible: Category -> Web analytics
- Matomo: Category -> Web analytics
Google analytics itself fall under 'Web analytics' category.
The alternatives rank will put the main tools with main category Web Analytics first before other categories.
So, in this case, Posthog will rank lower even though it has more complete features than other tools in the list. While Umami, Plausible, and Matomo will be ranked based on manual review by myself.
What do you think about this project?
If you have any feedback, please dont hesitate to put it in the comment below.
Thanks, happy coding!
This content originally appeared on DEV Community and was authored by Syakir
Syakir | Sciencx (2024-11-06T14:12:07+00:00) I Built AlternateOSS, A Directory of Free, Open-source Alternatives to Popular Software 🚀🔥. Retrieved from https://www.scien.cx/2024/11/06/i-built-alternateoss-a-directory-of-free-open-source-alternatives-to-popular-software-%f0%9f%9a%80%f0%9f%94%a5/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.