Forem: Nada Aldubaie

Duplicated Number Remover Tool

Nada Aldubaie — Sun, 06 Apr 2025 20:52:37 +0000

Hello👋
My mother accidentally deleted her phone numbers, and when she retrieved them, most of them were duplicates, making manual deletion a cumbersome task. So, I developed a tool to easily clean duplicate numbers from her contacts.

Features of the tool:
✅ Automatic detection of all duplicate numbers
✅ Selective deletion
✅ Accurate statistics before and after cleaning
✅ Easy interface
✅ Export the cleaned file

🔗 Tool trial link:
Tool link

🛠 Technologies used:

Backend: Django REST Framework
Frontend: Next.js + Tailwind CSS

Project open source:
🔗 Project link on GitHub:
GitHub link
👉

Car Services Booking Mobile App - UX UI🪄

Nada Aldubaie — Mon, 13 Jan 2025 12:22:06 +0000

I've finished designing the Drift app!

The app is dedicated to car services, and aims to facilitate the lives of car owners by providing reliable and fast services with a few clicks.

🪄 Design details:

Modern and easy-to-use interfaces.
Colors that reflect strength and reliability (red and black with white).
Each page is carefully designed to suit the user's needs.

🌟 The most prominent features of the app:

Book maintenance appointments easily.
Special offers and discounts.
Direct contact page with branches.
Evaluate and follow up on services.

🚀 My vision for the design:

The application is not just a technological solution, but an integrated experience that helps people in their daily lives and relieves them from the trouble of searching for maintenance services. 👌

🔗You can see the full design on Behance:

Drift in Behance

If you like the design or have any comments, you can write them in the comments! 🙌

As a software engineer or UX UI, you must be good at data analysis 👌

Nada Aldubaie — Sat, 02 Nov 2024 16:38:06 +0000

Of course, if we are interested in artificial intelligence, data analysis is an essential step in understanding the nature of data and analyzing it and provides us with a strong foundation and learning magic.

As a software engineer:

•Improving performance and efficiency, for example, pages that take time to load or in analyzing operations, here it helps us identify the problem that we need to improve in the code and manage it more flexibly and integrated. 💯
•Predicting future expectations, more order in building several groups, such as the increasing number of users or data records that lead to duplication in database data due to weak data reliability and integrity.
• Enhancing improvements and technical support, as the analysis here helped us with the most important expected main factors, so we can solve them and improve the quality of work assurance in the long term.
♻️ • We can communicate with people with expertise in multiple and diverse specializations such as the user experience team or the most beautiful thing for those who are part of the work team and want to contribute to the goals in an integrated manner 🚀

As a UX UI analysis helps us in:

• Analyzing user control and measuring the success of new designs after their implementation. Knowing the extent of users' connection to the interfaces and their interaction with additional features.♻️
• Improving interaction and user experience by knowing the points where users face difficulty or difficulty.
• A/B Testing the design to know which of the designs enables us to interact better.✅
This helps us to practice thoughtfully on actual interactions with users.

Interconnected means that as an excellent software engineer, you must have comprehensive knowledge in order to achieve better performance with the highest quality. 🪄

كمهندس برمجيات او UX UI لابد تكون شاطر في مجال Data Analysis 👌

Nada Aldubaie — Sat, 02 Nov 2024 12:31:16 +0000

طبعاً اذا احنا مهتمين بالذكاء الاصطناعي فتحليل البيانات خطوة اساسية في فهم طبيعة البيانات وتنظيفها وتحليلها وبيوفر لنا اساس قوي لتطوير نماذج تعلم الآلة.

كمهندس برمجيات :

•تحسين الأداء والكفاءة مثلا الصفحات التي تاخذ وقت في التحميل او في العمليات التحليل هنا بيساعدنا نحدد المشكلة والمناطق التي تحتاج إلى تحسين في الكود وجعله أكثر مرونة وتكامل.💯
•التنبؤ بالتوقعات المستقبلية وتوسيع النظام بناء على عدة عوامل مثل تزايد عدد المستخدمين او تكرار البيانات الذي بيؤدي إلى Redundancy في بيانات ال database وبيضعف موثوقية وتكامل البيانات.
•تحسين الصيانة والدعم الفني فالتحليل هنا بيساعدنا نعرف الأخطاء المتكررة او المشكلات المتوقعة مستقبلا فنقدر نحلها ونحسن جودة ضمان العمل على المدى الطويل.
•بنقدر نتواصل مع أشخاص من خبرات في تخصصات متعددة بفعالية مثل فريق تجربة المستخدم او التسويق واجمل شيء لمن يكون ضمن Team Work لانه بيساهم بتحقيق الاهداف بشكل تكاملي.🚀

ك UX UI بيساعدنا التحليل في:

•تحليل سلوك المستخدمين وقياس نجاح التصميمات الجديدة بعد تطبيقها مثل معرفة مدى استجابة المستخدمين مع الواجهات وكيفية تفاعلهم مع الميزات الإضافية.
•تحسين التفاعل وتجربة المستخدم من خلال معرفة النقاط التي يواجه المستخدمين فيها حيرة او صعوبة.
•اختبار التصميم A/B Testing لمعرفة اي من التصاميم تؤدي إلى تفاعل افضل وهذا يساعدنا على اتخاذ قرارات مدروسة بناءً على التفاعل الحقيقي للمستخدمين.✅

لو لاحظنا من الشرح فوق بنلاقي انه تحليل البيانات وتحليل وتصميم النظم مع الوظائف الذي بتتم في دورة حياة المشروع بشكل عام مترابطة يعني كمهندس برمجيات ممتاز لابد تكون عندك معرفة شاملة من أجل تحقق عمل أفضل أداء بأعلى جودة.🪄

CRA Officially DEAD! What Can We Use Instead ?

Nada Aldubaie — Sat, 15 Jun 2024 07:26:32 +0000

CRA => Create React App
Is the easiest common way React developers use to create project, but in 2023, March React said:
"This site is no longer updated.Go to react.dev",
so they have made new Documention in their new website which they'll keep updating in.

The reason why they stopped CRA was its problems:

•Server take long time to start run.
•Slower updates during development.
•CRA takes by default 205MBs to create dependencies in node_modules whereas #Vite comes with 34MBs,
so you can see the big difference in size make it slower.

As we know React works CSR so in React Docs it's recommended to use its frameworks as best choice for:

•Support SSR which make it faster.
•Less effort and time instead of using only the library .
•Has frameworks works as full-stack React frameworks such as Next.js and Remix.🚀

But we can use React libraries without frameworks as any UI Library so here we'll need to search for the solutions some developers have made for the problems will face like routing and data fetching.

CRA comes with a lot of limitations. For instance using Tailwind library will make problem in the dependencies belong to "babel plugin ", and to solve this just install the plugin:

npm install --save-dev @babel/plugin-proposal-private-property-in-object

But the most terrible is weback problems "Before and After Middleware "📍
You'd have to do something called
Eject
and believe me you'll not love it!
Why?
Because its job drop all the configuration for the following files:
-Babel
-Webpack
-node_modules
After the strenuous ejecting, Craco come to help.

What's Craco?
"Create React App Configuration Override".
Its goal maintain for all configuration and scripts files we made Eject for them previously. ♻️

You can imagine how hard and complex situation to maintain and solve those problems.

Summary

Best choice said by "Dwaid Niegrebecki":
If you already know React. That’s great, but you need to know how to use this skill most effectively. create-react-app just doesn’t cut it anymore. The project was super important for the React ecosystem. We have to acknowledge how much it contributed.
I won’t tell you what to use instead, but I can tell you how I make choices currently.
If I need a frontend with an API. I go with NextJS.
If I need only frontend. I go with Vite with React.
You are free to use other tools highlighted here like Gatsby or Remix.

Github Trick

Nada Aldubaie — Mon, 06 May 2024 21:56:12 +0000

To open project in vscode from github instead of clone repository in to see or edit project we can do it directly😉

How?
By adding "vscode.dev/" in the link before github word.

Another thing I really like we can open working tree window to see changes🔥

Devin, First AI Software Engineer.

Nada Aldubaie — Fri, 15 Mar 2024 17:18:26 +0000

Devin is an AI tool developed by Cognition has access to all the same developer tools;
-Its own command line.
-Its own editor.
-Its own browser.

Devin has the ability to:
create code, test it, learn form its mistakes, solving problems, push the project to Github repo and can create new brushes do pull request if in need!
Not just these, also if Devin run into error it fix and go on.🚀

It's designed to help, software engineers and who can solve problems not replace them but surely it's not good news for coders.

Finally Its an AI tool it can't discern what the client want and need perfectly as humans engineers but we should be excellent in command prompts to get best results enhance our output quality goals.

Dewy Agency - UI UX Design

Nada Aldubaie — Mon, 04 Mar 2024 21:13:14 +0000

I'm happy to share with you my last UI design project I've made, which is website for space flights with many magnificent features called" Dewy Agency"🪐🔥

I hope by the following future taht will be possible in our world 🥳🚀

Tha work link in behance👇
[(https://www.behance.net/gallery/193083573/Dewy-Agency-Space-Flight-Website)]

Hello,I'm happy to share with you game in c++ I've already finished.

Nada Aldubaie — Mon, 26 Feb 2024 00:41:45 +0000

I've written this game as practice for my solving problems skill in project and games always the best choice to makes perfect when we'll talk about logic thinking 🤔.Ive published it in github with this link Github repo😁🔥

Vite Vs Create React App "CRA"

Nada Aldubaie — Mon, 08 Jan 2024 21:51:16 +0000

First of all let me give you intersting fact about Vite
Vite is French word for "fast", pronounced /vit/

1.Create Project:
CRA: npx create-react-app app-name
Vite: npm create vite@latest app-name
then you need to install npm manually,
npm i

2.Framework Support:

CRA: Designed for creating React projects.
Vite: It allows you to create in different frameworks for your instance :
Vanilla
Vue.js
React
with typescript or even javascript and can be used with various frameworks.🛠

3.Server:

Vite: Comes with a development server that supports Hot Module Replacement (HMR), enabling fast updates without a full page reload.🚀
CRA: Provides a development server with HMR support for React components, facilitating a smooth development experience.

4.Time of Create:

The total milliseconds takes to create Vite is very lower than to create CRA.

5.Build Performance:

Vite: Known for its fast development server and build times, thanks to native ESM support and optimized build processes.
CRA: Offers good performance, but Vite is the best choice of speed.

The main reason why Vite.js is faster and more simple than CRA is becuase it has less dependencies when we create React project.🎯

Conclusion:

Use Vite if: You prefer faster development servers and build times. You want a more flexible, framework-agnostic build tool. Native ESM support is essential for your project.
Use Create React App if: You prefer a zero-configuration setup for a quick project start. You are primarily working on React projects.