We are a web app company building a new front end for our established timesheet app. This project is to build our new style and some basic functionality for our new front end using Google's Material Design Light style framework ([url removed, login to view]).
We are going to award several developers to create their own version of this project and pay all awarded developers who complete their work. Once the project is complete, we will compare each developer's works and choose the result we like the best as our new front end template.
We will welcome successful developers in this project to bid on our future front-end projects, which includes building out all of the pages of our new front end. We are looking to eventually turn one developer from this project into a full time front end dev. If you are not looking to be full time, that is ok and we welcome you to compete for our business, but please specify that in your proposal.
What is the "best" result for this project? Building this interface with MDL is easy, so the majority of our preference will be based on code style and architecture. We believe less is more, and we want any future projects to be completed as easily as possible. This template will be a foundation for our future front end development and we encourage you to think long term in your coding choices.
How will this project eventually be used in our web app? We are looking for this project to create a style template that our developers can use to copy and paste code into our web app pages. Our web app is powered by our JSON REST API back-end.
2) You only need to implement one page in the pop-open menu at the left, accessible via the “hamburger button” at the top left.
3) Make all reused colors easily changeable at the top of the CSS file. This includes all button states, link states, and so on.
4) The column-row “grid” in the center of our example screenshots is the main way our app organizes data. We display details of grid rows on the darker bar at the right of each page; we call that bar the “info bar.” The grid we are working on for this front end streams large amounts of data (hundreds of thousands of rows) to the front end. As this grid scrolls, it loads new data. Bonus points if you make some callbacks and loading animations for this scroll loading.
5) The info bar is closed by default. Clicking a grid row opens the info bar. Additionally, the (i) icon at the top center toggles the info bar.
6) At screen width of 1440px and smaller the info bar “pops over” the grid view. At larger resolutions, the info bar attaches to the side of the grid.
7) The info bar scrolls independently of the grid. Reference Google Drive for similar functionality.
8) The minimum width of the page is 1000px. Ensure that on smaller screen devices, zooming out does not effect formatting (eg, the viewport scale is appropriate and the page does not have hanging whitespace).
If you have any questions about the project details or otherwise need clarification to create your proposal, ask away. I will be available GMT timezone business hours. We are looking to working with you!