Create our web-app's front end with Material Design Light (Need Multiple Devs!)

Closed Posted 6 years ago Paid on delivery
Closed Paid on delivery

Welcome Freelancers!

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 ([login to view URL]).

The deliverable for this project is a single html file, javascript file, css file, and any required images. Using MDL, the html file should look like the attached images. Once you are complete, we will use the files you create as a template to implement most of the pages of our new interface.

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.

Detailed requirements:

1) All dynamic data must be set with a mock-API call to show how your template handles the animations required for loading data (please use google apps to reference your decisions). The real API calls will be developed in later projects, so the functionality you develop for this project just needs to act like it loading data so we can see how your template structures its javascript callbacks and animations.

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!

Graphic Design HTML PHP Website Design

Project ID: #14519393

About the project

14 proposals Remote project Active 6 years ago

14 freelancers are bidding on average $147 for this job

tarekahmed

On time and On budget I can do all what you want .... I did 311 projects with a rate of 5/5 .... please check https://www.freelancer.com/u/tarekahmed.html Relevant Skills and Experience I have a Professional team for More

$155 USD in 3 days
(175 Reviews)
7.8
ayushi6214

Hi, I read your proposal carefully and completely understood your requirement.  I am working from almost 3 years in this domain and recently completed few projects which are almost same as yours.  I also assure you abo More

$100 USD in 8 days
(16 Reviews)
5.7
lbansal22

I possess 6+ years of experience in Mean Stack Development (NodeJS, AngularJs, Mongo DB), SEO/SMM, SQL/Non-SQL DB, Javascript, jQuery, HTML5, CSS3, Bootstrap, PHP, Wordpress,Mobile App Development Relevant Skills and More

$111 USD in 3 days
(12 Reviews)
4.8
pije76

A proposal has not yet been provided

$30 USD in 14 days
(11 Reviews)
3.2
nileshpujara90

As I can see here you want to make website I go through you description so I understood your requirement and concept features which are required Relevant Skills and Experience I am Nilesh 6+ years of experience in sof More

$155 USD in 13 days
(5 Reviews)
3.1
Zoftcast

Hello, My name is Josh, I am a specialist CMS developer. My expertise includes website development using Drupal, Wordpress and Django. My skills include: -- Drupal Website development -- Wordpress site More

$235 USD in 10 days
(3 Reviews)
0.8
ssalony

I have carefully reviewed your job description. I will fulfill all the requirement for this job and unlimited revision until you are fully satisfied. Relevant Skills and Experience I have more than 6 years of experien More

$110 USD in 3 days
(0 Reviews)
0.0