Introduction

It is time-consuming when you have to search for a resource and cannot find one. Domatio is here to help you find your resources for design projects, web projects, or learning programming. It has different categories and assets to search for faster and apply them in your projects.

Development

This is one of my early React practical projects to implement from my ideas. It was built with simple technologies like Context, custom SCSS and manually inputted JSON data file. I have plans to immigrate the data to a CMS system in future versions.

I designed and implemented this project for people like me who want to try different resources during learning and development for a wider view of others people's works. Sometimes we bookmarked useful things and we forget where we put the link or we may forget the name. I think this project is going to solve the problem.

Planning and preparation

The Data

Firstly, I prepared and collected data from various websites to build a resourceful tool. And I categorized and formatted the data in a JSON document for development purposes. I mainly focus on the data because I want my users to be productive and helpful using Domatio. Users can filter the data by keywords, tags, or inputted text.

What are the techs?

• React
• SCSS modules
• Context
• Line icons

Myanmar Version

Hello, developers and designers ...

ဒီနေ့ ကျွန်တော့်ရဲ့ Domatio လို့ခေါ်တဲ့ website လေးနဲ့ မိတ်ဆက်ပေးချင်ပါတယ်။

အရင်ဆုံးအနေနဲ့ Domatio δωμάτιο (do̱mátio) ဆိုတာက Greek ဘာသာစကားကဖြစ်ပြီး "Room", "အခန်း"လို့ အနက် အဓိပ္ပာယ်ရပါတယ်။ အခု project အရဆိုရင်

developer, programer နဲ့ UIUX designerတွေအတွက် အသုံးဝင်တဲ့ resource တွေကို စုစည်းပေးထားတဲ့ "အခန်း" လို့ဆိုနိုင်ပါတယ်။

Main featureကတော့ resourceတွေ၊ websiteတွေကို တနေရာထဲမှာ စုဝေးထားပြီး categoryအလိုက် စီစဉ်ထားတဲ့အတွက် ကိုယ်ရှာနေတဲ့ websiteအမျိုးအစား၊ ကိုယ်လုပ်နေတဲ့ projectနဲ့ ကိုက်ညီလောက်တဲ့ websiteကို အချိန်ခဏအတွင်း ရှာဖွေနိုင်မှာဖြစ်ပါတယ်။

Search Box မှာလည်း Keywordရိုက်ထည့်ပြီး ရှာလို့ရတဲ့အတွက်

ဥပမာ - "Programming" လို့ရှာလိုက်ရင် programmingနဲ့ သက်ဆိုင်တဲ့ websiteတွေ resourceတွေကို တွေ့မြင်နိုင်မှာဖြစ်ပါတယ်။ ကိုယ်ရဲ့ websiteမှာ background ပုံလေးတွေထည့်ချင်ရင် "background" ၊ vector ပုံတွေရှာချင်ရင် "vector" စသဖြင့် ရှာလိုက်ရုံနဲ့ resultတွေ ထုတ်ပေးသွားမှာဖြစ်ပါတယ်။

Target audience အနေနဲ့ localကိုပါ targetထားသွားမှာဖြစ်လို့ Myanmarပြည်တွင်းက ကောင်းနိုးရာရာတွေ ၊ resource တွေကိုပါ သင့်တော်သလို ထည့်ပေးထားမှာဖြစ်ပါတယ်။

ဒီproject က အသုံးပြုထားတဲ့ tech အရရော၊ conceptအရော က ရိုးရှင်းပါတယ်။ React စလေ့လာခါစက ရေးသားခဲ့တဲ့အတွက် ပေါ့ပေါ့ပါးပါးသဘောနဲ့ဘဲ ရေးသားခဲ့တာပါ။

အရင် 2020 လောက်တုန်းက ရေးထားခဲ့တဲ့ https://webtoolsroom.netlify.app/ Web Tools Roomဆိုတဲ့ projectကို ပြန်ပြီး 2021 ကုန်ခါနီးမှာ rebootလုပ်ထားခြင်းဖြစ်ပါတယ်။ တချို့အခြေအနေ တွေကြောင့် အခုမှ ချပြရခြင်းဖြစ်ပါတယ်ခင်ဗျာ။

Dataအတွက်ကို CMSမသုံးထားဘဲ json fileနဲ့ဘဲ manually data entry ပြုလုပ်ထားပါတယ်။

React

Context

SCSS

သာ အသုံးပြုထားပါတယ်။

User အနေနဲ့ သက်ဆိုင်ရာမိမိရဲ့ projectကို Developလုပ်နေချိန်အတွင်း Domatio Websiteကို အသုံးပြုတဲ့ အခါမှာ screen sizeအကြီးနဲ့ သုံးဖို့ အကြံပြုပါတယ်။ Data presentation မှာ laptop, desktop နဲ့ဆိုရင် များများမြင်နိုင်မှာဖြစ်ပါတယ်။ Mobile size device တွေနဲ့ ကြည့်ရင်တော့ အနည်းငယ် အားမရဖြစ်တတ်တဲ့ အားနည်းချက်လေးရှိပါတယ်။

Future planအနေနဲ့ data တွေ ထပ်ထည့်သွားမှာဖြစ်ပြီး လိုအပ်တဲ့ အကြောင်းအရာ၊ resourceတွေ ထည့်စေချင်တာလေးတွေ လာရောက်ပြောပြလို့ရပါတယ်ခင်ဗျ။

ကျွန်တော့်ရဲ့ အခုwebsite လေးကို အသုံးပြုတဲ့အခါ experience Feedback ကို CBမှာဖြစ်ဖြစ် commentမှာဖြစ်ဖြစ်ရေးသားနိုင်ပါတယ်။

ဖတ်ရှုပေးလို့ ကျေးဇူးတင်ပါတယ်။

English Version

First of all, Domatio δωμάτιο (do̱mátio) is derived from Greek and it is "Room" in English. According to this project, Domatio is a room of valuable resources for developers, programmers, and UIUX designers.

🔸The main feature of this project is collecting websites and resources into categories. You can search for websites in collections so that you will find your desired and appropriate website in a short time.

🔸A search box is a significant role in this project which has a feature for keyword searching. For example, if you search for "programming", the result will be related to the keyword "programming". If you are designing a webpage and it comes to adding a background image or texture, you can just type "background" and there will be some resources for backgrounds.

🔸The target audience of this project is including Myanmar, you can see some local resources and staff. Technologies and concepts used in this project are simple since it was intended to build a lightweight project when I started learning React.js.

🔸Domatio is a reboot version of WebToolsRoom https://lnkd.in/ghHjGgq8 (a project built in 2020) and I developed it in late 2021. Due to some situations, now I got a chance to present it in front of you.

🔸For data maintenance, I use only a JSON file and manually enter the data. Data entry is the most time-consuming part of this project. I care about every resource being in a right place to help reduce user time on website hunting. I might use a CMS to maintain the data in the future.

➡️ React, Context and SCSS are the techs of Domatio.

🔸From the users' perspective, I would recommend using the website on large screens like laptops and desktops for more content to be displayed. You may think it has a weak point on the mobile screens cause of less data presentation.

I have a plan for adding more data and if you have any suggestions for data and categories, feel free to contact me.

Thank you for your time.