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.

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.

🔸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.

GitHub Repo - https://github.com/T-N9/domatio-react

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?

• Front-end - React
• Styling - SCSS
• Stage management - Context
• Icons - Line icons

Operational Requirements

1. Data Collection
2. Data Specification
3. I/O Information
4. Single Page Application

Functional Requirements

• Data Research
• Categorized Information

Non-functional Requirements

• Efficiency - Live searching
• Usability - Simple Data Presentation
• Maintainability - Updating Data
• Development - Front-end developement
• Portablity - Responsive design

Designing

Domatio is designed to be an easy-to-use tool. There are only three main components in this project. A sidebar, a grid view and a navigation bar. The navigation bar has an input field to search keywords and item names. The interactive side menu is playing a major role in this project.

I use Gradient Magic for non-image thumbnails. This gradient tool is totally amazing and you can play with colors when generating one.

The design is mobile friendly and as I have mention on above that . You may find a weak point on the mobile screens cause of less data presentation. I will try to solve this issue in future.

---

Conclusion

Overall, I designed and developed this website and its brand from a scratch to deployment. This project gave me the vision to promote and provide underrated tools but applicable things in front of users. I hope that I could collect more and more information and improve project usability in the near future.