Forem: Dilane3

🌀 Introducing Rasengan UI Kit — 100+ React Components powered by Shadcn UI

Dilane3 — Thu, 13 Nov 2025 06:00:00 +0000

Hey everyone 👋

I'm excited to introduce the Rasengan UI Kit, a growing collection of 100+ beautifully crafted React components — all powered by the amazing Shadcn UI
library.

Whether you’re building a marketing website or a full-scale application, this kit gives you everything you need to move fast while keeping a clean, modern design.

⚡ What’s inside?

🧭 Marketing Components

Perfect for your landing pages and startup websites:

Hero sections
Teams
Pricing tables
Contact sections
Testimonials
Call-to-action blocks
And much more...

🧩 Application UI

Crafted for dashboards and internal tools:

Cards
Calendars
Toolbars
Data grids
Lists
Modals and dialogs
And much more...

Each component is well crafted meeting — simplicity, flexibility, and performance.

🚀 Why Rasengan UI Kit?

✅ Built with React + TailwindCSS
🎨 Based on Shadcn UI, giving you theme consistency and customizability
🧠 Designed to work seamlessly with Rasengan.js, but fully compatible with any React project
⚙️ Easy to customize — every component is composable and theme-friendly

🌐 Take a Tour

Explore all components live at:
👉 https://ui-kit.rasengan.dev

🚀 Rasengan v1 Stable is out! 🌀

Dilane3 — Sun, 27 Apr 2025 14:12:22 +0000

I'm excited to announce you the release of the v1 stable version of Rasengan.js the modern and performant React Framework whose I'm the author 🔥

What's new in v1:
✨ SSR & CSR modes
⚡ Updated to React 19, Vite 6 and React Router 7
🎨 TailwindCSS v4 support
📄 Full MDX integration
And more...

Dive into all the details 👉 Rasengan v1 - Blog Post

That's why wre are NINJA 🥷

🚀 Introducing the Rasengan.js CLI – Create Your React Project in Seconds!

Dilane3 — Tue, 04 Mar 2025 15:30:38 +0000

Hey everyone! 👋

I'm excited to introduce the new Rasengan.js CLI, making it easier than ever to bootstrap a new React project with Rasengan.js! 🌀

🎯 What is Rasengan.js?

Rasengan.js is a React framework designed for performance, flexibility, and developer experience. It simplifies modern web development while giving you full control over your stack.

⚡ Getting Started with the CLI

You can create a new Rasengan.js project in just one command:

npx create-rasengan@1.2.0-beta.3

🛠️ Setup Steps

Once you run the command, the CLI will guide you through these steps:

1️⃣ Name your project

2️⃣ Choose your language: TypeScript or JavaScript

3️⃣ Select a template: Blank or Tailwind

4️⃣ (If you choose Tailwind) Pick a version: Tailwind v3 or Tailwind v4

After setup, just run:

cd my-project  
pnpm i
pnpm run dev

And boom! 🎉 Your Rasengan.js app is live!

🌟 Why Use the Rasengan.js CLI?

The new CLI is designed for simplicity and speed. It removes all the boilerplate and lets you focus on building. Compared to manually setting up a project, this approach is:

⚡ Faster – No time wasted on config

💡 Beginner-friendly – Just follow the prompts

🔧 Customizable – Extend it as you need

🚀 What’s Next?

Rasengan.js is currently in BETA, but a stable version is coming soon! We're improving the framework, adding features, and refining the CLI.

💻 Check it out & contribute:

🔗 GitHub: github.com/rasengan-dev/rasenganjs

📖 Docs: rasengan.dev

🎥 Demo video: youtu.be/EU2rPwUiAxU

If you try it out, let me know your feedback! 🚀

MagPies - An Image sharing app built using Rasengan.js and Netlify CDN Image.

Dilane3 — Sun, 12 May 2024 20:54:29 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

I develop a web application similar to Pinterest or Pexels that I decided to called MagPies. In this application everyone can explore or browse images, download them in different format (PNG, JPG, WEBP, AVIF), and only the authenticated user can share their photos into the platform. 😍

Based on the challenge requirements, I used the Netlify CDN Image in order to apply some operations on images like:

Resizing the image (width and height)
Changing the quality
Changing the image fit value (cover, fill and contain)
Downloading into different format of image.

All these features are nicely implemented using Rasengan.js my own REACT FRAMEWORK 😁😁 and Tailwind CSS for styling.

Demo

Link of the app: magpies.dilane3.com

Demo video: Video

Some screenshots:

Home

Gallery

Create photo

Profile

Image Preview and transformation

Platform Primitives

To use the Image CDN, I decided to create another simple app using just and html file and hosted it on netlify. As all the websites hosted on netlify benefit from the /.netlify/images edge function to apply all the available transformation on images, I decided to use the website as an API.

Here is the code snippet that I write to integrate the Image CDN into my application.

I started working on the Netlify Blobs in order to save for example:

Recent search query of users
Photo saved by the user

But I didn't have time to finish it, that because I was dealing during the 4 first days into the integration of my React framework and Netlify in order to host any web application built with Rasengan.js to Netlify... And after 4 days, I find a way by creating a serverless function that respond to any incoming request, this because Rasengan.js is based on a SSR logic.

I'm so glad to having participated to this challenge, it was very nice. I got an opportunity to enhance my React Framework to support Netlify, I learn about how to integrate Netlify Image CDN into apps... sooo good. Thanks a lot.

I hope, what I did will impress you.

Rasengan.js 1.0.0 Beta 🚀

Dilane3 — Sun, 28 Apr 2024 13:33:39 +0000

Hello Developers 👋 My name is Dilane Kombou, I'm a JavaScript developer from Cameroon.

I'm very excited to announce you that I released the first version of my own React Framework that I called Rasengan.js 🚀

Based on React and Vite, it provides to you a great experience for developing high-quality web application.

It supports a major list of modern features of the web that you can have access of the Blog post, published on the official website of Rasengan.js.

The project if open source, so you can check the code and even contribute to it without problem 😊

Resources

Community

Follow Rasengan.js on Twitter
Github: Join the Github Discussions

Please check it out, leave me stars on Github and provide me feedback on the Github discussions to better enhance the framework.

Thanks.

Animated Sidebar made using Rasengan and Tailwind

Dilane3 — Sat, 20 Jan 2024 15:02:04 +0000

What I did

I did an animated Sidebar using my own REACT FRAMEWORK (on which I'm working actually) and Tailwind.

Demo

Links

GitHub - https://github.com/dilane3/animated-sidebar-rasengan.git
Live Demo - https://animated-sidebar-sigma.vercel.app/

I created a shapes drawing app using React called ShapX.

Dilane3 — Sun, 19 Nov 2023 04:32:47 +0000

Hello everyone 👋🏼, I'm coming here to present to you an application that I created using React that I called ShapX which aims to provide you the possibility to draw shapes like in drawing apps.

What's ShapX ?

well, ShapX is a shapes drawing app that you can use to create forms like: squares, rectangles, circles, ellipses, diamonds and hexagons...

After having drew a shape, it directly calculates some geometric properties like perimeter and area of your shape.

What are the core features ?

You will have the possibility to test it in real live (only on your computer), but globally, ShapX comes with the following features:

Creating new drawing file
Renaming the file
Adding shapes for any available types
Changing parameters of the shapes (position, width, height, radius)
Changing color of the shape
Removing and duplicating shapes
Export the file into PNG, JPG and a custom file with .shapx extension
Load a SHAPX file

These are the fundamentals 🔥

I did the whole app in just 5 days 😅😅

Let's see it in images

Welcome screen

Empty drawing screen

Adding one shape

Changing color of the shape

For managing state, I decided to use GX, a lightweight and powerful tool that helps a lot in state management.

It's my own tool that I created 😁😁, and I use it in all my React, Nextjs and React Native applications.

Check the documentation of GX: https://gx.dilane3.com

The app is available to public, and you have the possibility to test and leave comments right here, I will really appreciated it.

Link of the app: https://shapx.dilane3.com

You also have to possibility to access the code on GITHUB, please leaves stars ⭐, it helps a lot.

GITHUB: https://github.com/dilane3/shapx-client

Thanks for reading

Thanks for having read my post 😉

I published my First App on Google PlayStore 😍😍✨

Dilane3 — Mon, 31 Jul 2023 13:43:34 +0000

What I built?

Hello Devs 😁😁✨

This is an excited day 😊

I'm excited to shared with you what makes me happy today.

I published my First Mobile App on Google Play store 😍

I decided to call it Dask, and it's a mobile application that will help you manage your tasks and organized them into projects for easy manipulation ☺️.

How it works really?

There is two mode, the first one is that you can use this app for a personal use case. For example you want to realize a simple application with some features, you can create a personal project in the app and add features you want to implement as tasks 😁😁 simple.

The second one is that, if for example you have to work with some one else and assign tasks to a specific team member, you have to create a shared project instead 😁, and inside you could be able to invite people to collaborate 🙂✨

Screenshots

Which tools I used ?

Let me show you what I used to develop it.

React Native (mobile app)
Firebase (Backend, especially used to store shared projects that you will ahve with your team)
Nodejs (Express & Socket.io) for real time
Gx for state management (it's my own State Management Library 😁) check the documentation here: https://gx.dilane3.com

That's all

If you want to test 😁

Just follow the link below, and please leave feedbacks 🙏🙏 I will really appreciate it.

The link of the application is down here.

https://play.google.com/store/apps/details?id=com.dilane3.dask

Thanks for reading 😌

Robust Form - A simple and easy to use Form Builder application like Google Form.

Dilane3 — Thu, 20 Jul 2023 19:33:51 +0000

What I built

I decided to build a form builder web application by using Refine as asked and combined to NextJs and Material UI to realize the Frontend app and Supabase for the the Backend side and I decided to call it Robust Form

Category Submission:

App built using Refine + Supabase and MUI.

App Link

https://rf.dilane3.com

Screenshots

Large screen:

Mobile View:

Description

Robust Form is actually a form builder as said above. So, the application will be used to generate forms easily and share it to everyone in order to collect data for scientific researches for example, or other use cases.

Link to Source Code

https://github.com/dilane3/robustform

Permissive License

MIT Licence

Background (What made you decide to build this particular app? What inspired you?)

I was very impressed by how Google Form works, and I didn't really know how to start building this kind of application. That's why I took this possibility to create my own form builder and share the source code in an open source Licence to help others developers to know how to start, how to implement this kind of application.

How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?)

Oh yes, I learnt alot of new things.

I want to mentionne that, I didn't know what Refine and Supabase were before this Hackaton, so thank you so much for this opportunity. I read the documentation of refine, of Supabase because it was new for me. It was a great experience.

Additional Resources/Info

Demo of the application Here

Example of form generated Here

Leave Redux for a few moment and Try GX 😍😍

Dilane3 — Thu, 08 Jun 2023 21:54:46 +0000

What's GX ?

GX is Javascript library used to manage global state within a React and React Native applications like Redux and other do.

It's a Lightweight, very Performant and Easy to use library for managing state 😍.

More about GX.

GX is my library that I released on febuary (the first version) and I'm so happy for that archievement. I used it now in all my personal projects and it's well integrated into React environment (React Native, NextJs). With less configuration you can state working 😁😁

How it works ?

Well, there is some concepts that you have to know to be able to use this library.

Signal

A signal is just a particular state that can contains one resources such as products, users, current user and so on. So If you want to create a global state to save for example a list of products, you have to create a signal.

Example

In this example I create a signal to save a counter value, that can be incremented and decremented by calling actions which are defined in the actions property of the object parameter of the createSignal function.

Store

A store is the place where you have to register all your signal in order to make them available from anywhere in your application.

Example

Set the Provider

GX comes with a provider which is used to make the store accessible from anywhere in your application.

Example

Usage

Now, as the library is correctly set up, we can now consume our state (the counter value) and act to it by incrementing or decrementing its value.

Example

So easy to use 🤩🤩

Next step

You can learn more by visiting the website documentation of the npm readme.

Documentation: https://gx.dilane3.com
NPM Readme: https://www.npmjs.com/package/@dilane3/gx

The project is open source, so that you can suggest your impovement and make the libray grow with time 😊😊

Github Repo: https://github.com/react-gx/gx

Dask - Collaborative Task Manager Application for GitHub + DEV Hackathon

Dilane3 — Mon, 22 May 2023 17:04:41 +0000

What I built

In the context of the Hackathon, I decided to build a mobile application which could help everyone to:

Organize their tasks into personal projects, and their projects will be saved into the mobile phone, not in the cloud.
Work on the same project with many people like on Trello and Jira, so the application is working in realtime. In this case, projects are saved in the cloud and shared to all members of the project.

These are the two main point that my application called Dask offers to people.

Category Submission:

The project that I build enter in this following category.

Phone Friendly: Projects built for Mobile (PWA readiness, iOS/Android)

App Link

The android version of the app is available from this Google Drive folder: https://drive.google.com/drive/folders/1M-2RGXzBcHROBmSufHQ4We_Odo3-oTkz?usp=sharing

For the Ios version, I haven't generated it because I didn't have a Macbook and Iphone. But we can use the source code to generate it because it's made with a cross platform tool (React Native).

Screenshots

Sign up screen

Profile screen

Personal projects

Create a personal or a shared project

Change the status of a task

Delete a task

Shared projects screen

Tasks of a shared project

Members

Description

As said above, this project aims to help people to organize their tasks into project, it's not required to have an internet connection to starting managing Personal projects, because they are saved in the mobile phone directly.

For the Shared projects section, you have to be connected first into your accound, and after having created a shared project (so easy to do), you can invite other person to the project by searching for their profile based on their email adresses. And then, if on a specific shared project, there are 3 members actually connected, if some one for example:

Add a new task
Delete a task
Update the status of a task
The owner add a new member

The rest of members will be notify directly and see the update on their mobile phone without refreshing the application.

Link to Source Code

Mobile application source code: https://github.com/EssiJunior/Dask
Realtime Backend source code: https://github.com/ngimdock/dask-websocket

Permissive License

MIT

Background (What made you decide to build this particular app? What inspired you?)

What motivate me to realize this project was the case where we have many women (10 for example), who want to do the market, in order to organize a wedding. We all know that, one person can't do it only, so we have to be many to go quicky. And also, things that are going to be purchased can not be at the same place, then we have to go in many places to find what we want to buy.

Okay now, it is not easy to know if one thing has been bought, and if a women doesn't find what she was supposed to buy she couldn't notify the rest of women to alert them, apart of if she decide to call each women. It's problematic. There's some issues like that that motivated me to realize Dask - a Collaborative Task Manager.

In Dask, you can organize your tasks into projects, invite people to collaborate, and all members will receive notifications and see what changed into the project, it's very cool.

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

For the mobile application project, I create a GitHub Codespaces, where I configure a particular container that fit my project requirement. so, I:

Initialized a container with Nodejs + TypeScript because my React Native application is initialized on top of them.
Installed some extensions like Prettier, GitHub Copilot and so on which help me to code more faster.
I launched the development server and test the mobile app directly on my hardward device and it works very fine.

I was so happy while working on this project, I learnt many new things. Firstly I did know nothing about GitHub Codespaces before, but after having watching videos on it I learn how to use it and configure it.
Also, I learnt how to set up Firebase to React Native, something that I hadn't done yet, the result if wow.
Finally, it's my first time to set up a realtime behavior into a React Native app and it works very fine.

In conclusion, I learnt many things, thanks for this opportunity :)

Additional Resources/Info

Technologies used

React Native for mobile application
Firebase for the backend (used to saved users accound, shared projects and tasks)
Nodejs + Socket.io for the realtime behavior
SQLite for managing local database into the mobile app (used to save personal project)
GitHub, used to save the project online and collaborate easily with other people
Figma, used to realized UI Designs

Collaborators

I received help from two friends who have participated to the project.