Domatio
All in one resources for developers, learners and designers.
front-end
![Domatio project](https://cdn.sanity.io/images/dm3kiwds/production/18b4f7dc59578d7ea2667021f28ceb6b1dd3f2a4-1388x898.png?w=3840&q=100&fit=clip&auto=format)
Status
production
Type
personal
Role
front-end
Period
late 2021
Challenge
- Data collection
- Data classification
- State management
- Usability
The challenge is to organize and classify collected data to deliver an appropriate result for user searching. As the project is one of my earliest experiments when learning React, state management, and life cycle concepts were major things to focus on.
Result
- Easy to use
- Reduce browsing time
- Brand identity
This project is helping targeted learners, designers, and developers to hunt products and tools in a short time.
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
![mockup](https://cdn.sanity.io/images/dm3kiwds/production/159c3a96be0684ad86e0148623c5b49f99e289d8-1700x1100.png?w=3840&q=100&fit=clip&auto=format)
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
- Data Collection
- Data Specification
- I/O Information
- 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.
![mockup](https://cdn.sanity.io/images/dm3kiwds/production/248a29dd9179ca7463da7c75ac1b2f50f7a733ed-738x576.png?w=1920&q=100&fit=clip&auto=format)
Palette
Trinidad
Kabul
Eastbay
Pastel
Bluewood
Typo
![Typo](https://cdn.sanity.io/images/dm3kiwds/production/1a80f2318c250aebf59aeedeae3035aecfe867ed-1080x600.png?w=3840&q=100&fit=clip&auto=format)
Logo
![logo](https://cdn.sanity.io/images/dm3kiwds/production/e26ad136ebdd5c812eaf9456cc5eed3c38b412a6-1080x300.png?w=3840&q=100&fit=clip&auto=format)
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.