Git Product home page Git Product logo

hipagesexample's Introduction

hipages Full Stack Engineer Tech Challenge

Welcome to the hipages Full Stack Engineer Tech Challenge! The purpose of this challenge is to help us assess your technical skills. We know that you have limited time to devote to this task and may not be able to provide the complete solution as you would given more time, so we suggest you focus on the core requirements first, then any additional features if you have time left over.

The Task

Your task is to create a lead management UI for a tradie. This should be presented as a single page application (SPA) using a modern JS framework.

Invited Tab

The first view you need to create is the Invited tab, which contains all leads in the new status. Invited Tab

As you can see in the screenshot, each lead is a card in a list which contains the following pieces of information:

  • Contact first name
  • Date created
  • Suburb
  • Category
  • ID
  • Description
  • Price

Along with that information you can see two buttons: Accept and Decline

  • Upon clicking on Accept, the lead must be updated to the accepted status in the database
  • Upon clicking on Decline, the lead must be updated to the declined status in the database

Accepted Tab

The second view you need to create is the Accepted tab, which contains all leads in the accepted status. Accepted Tab

As you can see in the screenshot, the lead cards follow a similar format and contain some additional data:

  • Contact full name
  • Contact phone number
  • Contact email

Notes

  • For the icons in the UI, you can use something like font-awesome or SVG icons, whatever you choose.
  • There are jobs already loaded into the database

Getting Started

We have provided a bit of boilerplate code that you can use to get started. You are not required to use this boilerplate, so feel free to throw it all away and start fresh if you prefer.

The boilerplate code assumes you have Docker running on your machine. If you do not, they offer easy to install binaries (Mac) (Windows).

From the root of the project, run docker-compose up -d

  • You should now have the UI running at http://localhost:3000 and the server running at http://localhost:8080
  • You should now have a MySQL database running at localhost:3306
    • The username is root
    • The password is hipages

If at any point you want to refresh the database, you can stop the Docker containers (docker-compose down) and start them again

Submission

Please document your solution in the SOLUTION.md file. This should explain why you've made the design choices that you have and clarify anything you feel isn't obvious. Feel free to also include what else you would have done given more time.

Please include instructions on how to run your app if it is not using the boilerplate provided.

Once completed, please upload your solution to a public Github repo and share the link with [email protected]

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.