Enhance React Web application (long term: reuse most of the code for mobile)
Budget: $250 – $750 USD
I am looking for a strong senior React/Typescript/Javascript/CSS developer to enhance my web application. During changes, I'd like to hear ideas on how to build it or enhance it in a way most of the code can be reused.
We will provide very detailed requirements - here is the first draft version :
This is to improve the layout of existing web application (please see screenshot "ExistingWebApp.png" ) and add or change some existing functionality in a React Web Application. Below are some of the requirements and will be broken down into milestones. (subject to change before the project starts, may have minor changes after project starts):
0. Make changes to maximize React code reuse for developing mobile app in the future - this applies to all changes below.
1. Improve the single page application's look & feel to match Google Shopping screenshot attached to match the border colors, margins, box shapes, top menu bar, with the exception of the logo which will be ours.
2. The menu bar needs to float at the top when scrolling is done and content needs to go under the menu bar.
3. Left pane menu needs to have a scrollbar (similar to Bing Shopping screenshot) of its own and should not scroll when the right pane is being scrolled,
4. Left pane menu's scrollbar and the browser's scrollbar should be smaller in width (about 70% of what you see in Bing Shopping) than the scrollbar shown in the Bing Shopping screenshot.
5. All sliders with text fields should be replaced with either radio button or checkboxes and a text field for entering minimum and maximum. Similar to the highlighted section in Bing shopping screenshot. (more details on which search filters should be radios and checkboxes will be provided)
6. The floating search and reset buttons will be removed and the search happens everytime a change to a left pane search filter is made but this behavior is only on Web and not when the left menu is hidden by default.
7. The website Pricewired.com is currently responsive and it should remain responsive on mobile and tablet.
8. On smaller screens the left menu is hidden by default and appears upon click of the icon.
9. When the sliding left menu exists(in smaller screens) the search should not happen for every change to search filter but should happen when the slider is closed.
10. Provide grid and list view (list view will be the same as what we have). Default is grid view. User's preference should be saved in cookies or other local storage even if the user is not logged in.
11. Grid view will show the name, price and image.
12. The grid columns will be less on a phone (minimum 2) than on a tablet than on a desktop, but grow as the screen size grows.
13. Mouse over will show specs of a laptop.
14. Account Features support
- quick login
- ability to mark favorite laptops
- ability to request for price alerts for a given set of specs.
Coding guildeines:
All best practices must be followed, some of the notable are:
1. Using proper indentation
2. Using appropriate level of code comments for complex logic
3. Using generous variable names so the purpose is obvious, and using Hungarian notation
NOTES:
1. To avoid CORS issue, we will provide a dummy API server with instructions to install it in your Tomcat or similar web server in order to allow you to test your changes.
2. GitHub access is provided and your pull request will need to be reviewed and approved by us to merge your code.
3. the above work will be divided into milestones and if we are not satisfied with the work, we may have to end the project before all milestones are completed.
Ideal Skills and Experience:
- Strong proficiency in React and JavaScript
- Experience in UI/UX design and implementing design guidelines
- Familiarity with optimizing performance and enhancing user experience
- Ability to reuse code and adapt it for the mobile version
If you are a talented React developer with a keen eye for UI/UX improvements and the ability to create a mobile version using existing code, I would love to discuss this project further with you.
We will provide very detailed requirements - here is the first draft version :
This is to improve the layout of existing web application (please see screenshot "ExistingWebApp.png" ) and add or change some existing functionality in a React Web Application. Below are some of the requirements and will be broken down into milestones. (subject to change before the project starts, may have minor changes after project starts):
0. Make changes to maximize React code reuse for developing mobile app in the future - this applies to all changes below.
1. Improve the single page application's look & feel to match Google Shopping screenshot attached to match the border colors, margins, box shapes, top menu bar, with the exception of the logo which will be ours.
2. The menu bar needs to float at the top when scrolling is done and content needs to go under the menu bar.
3. Left pane menu needs to have a scrollbar (similar to Bing Shopping screenshot) of its own and should not scroll when the right pane is being scrolled,
4. Left pane menu's scrollbar and the browser's scrollbar should be smaller in width (about 70% of what you see in Bing Shopping) than the scrollbar shown in the Bing Shopping screenshot.
5. All sliders with text fields should be replaced with either radio button or checkboxes and a text field for entering minimum and maximum. Similar to the highlighted section in Bing shopping screenshot. (more details on which search filters should be radios and checkboxes will be provided)
6. The floating search and reset buttons will be removed and the search happens everytime a change to a left pane search filter is made but this behavior is only on Web and not when the left menu is hidden by default.
7. The website Pricewired.com is currently responsive and it should remain responsive on mobile and tablet.
8. On smaller screens the left menu is hidden by default and appears upon click of the icon.
9. When the sliding left menu exists(in smaller screens) the search should not happen for every change to search filter but should happen when the slider is closed.
10. Provide grid and list view (list view will be the same as what we have). Default is grid view. User's preference should be saved in cookies or other local storage even if the user is not logged in.
11. Grid view will show the name, price and image.
12. The grid columns will be less on a phone (minimum 2) than on a tablet than on a desktop, but grow as the screen size grows.
13. Mouse over will show specs of a laptop.
14. Account Features support
- quick login
- ability to mark favorite laptops
- ability to request for price alerts for a given set of specs.
Coding guildeines:
All best practices must be followed, some of the notable are:
1. Using proper indentation
2. Using appropriate level of code comments for complex logic
3. Using generous variable names so the purpose is obvious, and using Hungarian notation
NOTES:
1. To avoid CORS issue, we will provide a dummy API server with instructions to install it in your Tomcat or similar web server in order to allow you to test your changes.
2. GitHub access is provided and your pull request will need to be reviewed and approved by us to merge your code.
3. the above work will be divided into milestones and if we are not satisfied with the work, we may have to end the project before all milestones are completed.
Ideal Skills and Experience:
- Strong proficiency in React and JavaScript
- Experience in UI/UX design and implementing design guidelines
- Familiarity with optimizing performance and enhancing user experience
- Ability to reuse code and adapt it for the mobile version
If you are a talented React developer with a keen eye for UI/UX improvements and the ability to create a mobile version using existing code, I would love to discuss this project further with you.