React Website UI Optimize
Budget: $30 – $250 USD
# Seeking a Development Team for Long-Term Collaboration
This job is designed to find a developer for long-term cooperation; therefore, this task is not difficult. We simply want to test if you are suitable for long-term collaboration. Our company currently employs several engineers from various countries with whom we have been cooperating for several years. However, as our business grows, we are planning to expand our development team.
## Our Team
We are in search of a dependable team for long-term outsourcing projects, emphasizing stability in quality, scheduling, and pricing. Our organization is ISO27001 certified, with stringent project specifications. Interested teams must comply with our standards for collaboration. [View our certification](https://www.iafcertsearch.org/certified-entity/00522bad-28f0-51ce-a86a-86b27ffac5ca).
## Please provide your personal information for the interview.
1. Are you a team player or an individual worker?
2. Past projects involving React and TypeScript.
3. Link to your GitHub profile.
4. Have you used Figma before?
---
# Project Overview
## Objective
This job involves repairing the presentation of an existing website, including adjustments to the Header's RWD (Responsive Web Design) and optimizing the display of message windows.
## Task
### RWD correction of header
- Please fix header RWD for all sizes here
### Optimize Display of Notifications in InfoCenter
We are experiencing an overlap issue and a presentation issue in our InfoCenter notifications, which need to be addressed to enhance user satisfaction and readability.
<img width="1440" alt="image" src="https://github.com/eGroupAI/infocenter-client/assets/108116583/86e53801-7785-4cd7-bceb-cb43135deb7b">
1. **Text Overlap with Notification Dot:**
- When the notification text reaches a certain length, it overlaps with the blue notification dot.
- **Expected Behavior:** Ensure that there is a consistent spacing between the notification text and the blue dot.
2. **Presentation of `messageInfoType`:**
- Currently, the `messageInfoType` received from the backend is displayed directly in English on the webpage.
- **Expected Behavior:** Instead of displaying the raw English text, utilize a `wordLibrary` to map and display these types in a more user-friendly manner.
### Deadline
- Within 12HR after accepting the job.
- Late submissions will not be considered.
### Budget
- **Fixed Rate:** USD 50 for this project.
- It is estimated that a junior engineer will need 3 hours to complete, while a senior engineer can complete it in 1.5 hours.
- **Payment Release:** Upon satisfactory review by our UI and FT Teams.
### Skills Required
- ReactJS
- TypeScript
- Experience with implementing auto-fill functionalities
- Knowledge of data formatting and validation techniques
# Acceptance
## Function Review
- Fulfilling requirements.
- UI consistency with designs.
- Complete code and functionality delivery.
- Successful integration and update of the UI for this issue.
## Fool-proof Design
- **API:** No unnecessary triggers; data updates trigger the process's API.
- **UI:** Proper disabling and enabling of buttons; loading icons during API calls; default process messages post-API response.
- **RWD:** Compatibility checked through Viewport Resizer.
## Code Review
- Adherence to development specifications and completion of revisions.
This job is designed to find a developer for long-term cooperation; therefore, this task is not difficult. We simply want to test if you are suitable for long-term collaboration. Our company currently employs several engineers from various countries with whom we have been cooperating for several years. However, as our business grows, we are planning to expand our development team.
## Our Team
We are in search of a dependable team for long-term outsourcing projects, emphasizing stability in quality, scheduling, and pricing. Our organization is ISO27001 certified, with stringent project specifications. Interested teams must comply with our standards for collaboration. [View our certification](https://www.iafcertsearch.org/certified-entity/00522bad-28f0-51ce-a86a-86b27ffac5ca).
## Please provide your personal information for the interview.
1. Are you a team player or an individual worker?
2. Past projects involving React and TypeScript.
3. Link to your GitHub profile.
4. Have you used Figma before?
---
# Project Overview
## Objective
This job involves repairing the presentation of an existing website, including adjustments to the Header's RWD (Responsive Web Design) and optimizing the display of message windows.
## Task
### RWD correction of header
- Please fix header RWD for all sizes here
### Optimize Display of Notifications in InfoCenter
We are experiencing an overlap issue and a presentation issue in our InfoCenter notifications, which need to be addressed to enhance user satisfaction and readability.
<img width="1440" alt="image" src="https://github.com/eGroupAI/infocenter-client/assets/108116583/86e53801-7785-4cd7-bceb-cb43135deb7b">
1. **Text Overlap with Notification Dot:**
- When the notification text reaches a certain length, it overlaps with the blue notification dot.
- **Expected Behavior:** Ensure that there is a consistent spacing between the notification text and the blue dot.
2. **Presentation of `messageInfoType`:**
- Currently, the `messageInfoType` received from the backend is displayed directly in English on the webpage.
- **Expected Behavior:** Instead of displaying the raw English text, utilize a `wordLibrary` to map and display these types in a more user-friendly manner.
### Deadline
- Within 12HR after accepting the job.
- Late submissions will not be considered.
### Budget
- **Fixed Rate:** USD 50 for this project.
- It is estimated that a junior engineer will need 3 hours to complete, while a senior engineer can complete it in 1.5 hours.
- **Payment Release:** Upon satisfactory review by our UI and FT Teams.
### Skills Required
- ReactJS
- TypeScript
- Experience with implementing auto-fill functionalities
- Knowledge of data formatting and validation techniques
# Acceptance
## Function Review
- Fulfilling requirements.
- UI consistency with designs.
- Complete code and functionality delivery.
- Successful integration and update of the UI for this issue.
## Fool-proof Design
- **API:** No unnecessary triggers; data updates trigger the process's API.
- **UI:** Proper disabling and enabling of buttons; loading icons during API calls; default process messages post-API response.
- **RWD:** Compatibility checked through Viewport Resizer.
## Code Review
- Adherence to development specifications and completion of revisions.