Giter Club home page Giter Club logo

nextjs-tailwindcss-test's Introduction

fullstack-candidate-testing

Deployment public link

Instructions

  1. Clone this repo. Then clone the main branch and use the following naming convention for the new branch: firstname-lastname-YYYY-MM-DD. If your name is John Doe, and today's date is 2020-11-17, then the new branch should be called john-doe-2020-11-17.
  2. The repo has 2 folders. /data and /screenshots.
  3. In the /data folder you will find 2 .json files. This is the data you will use to build the React app. You have to build a simple REST API to consume the data in the React app.
  4. In the /screenshots folder you will find what you are required to build for this test.
  5. We strongly recommend you use Next.js and TailwindCSS for this test, since these are the frameworks we are using to build our own apps, but if you're not familiar with them, then create-react-app or Bootstrap 4 or 5 are fine.
  6. The search input on top of the page should work. The search index should be built using the /data/jobs.json file.
  7. Sort by options on top of the page should sort in 3 states per each filter: ascending, descending or remove the sorting operation.
  8. Sort by options should work simultaneously with other sort by options and with the search input if the user is searching for something. This means that the user could sort for example by Location:asc, Department:asc while searching for a Nurse in California.
  9. Ensure your code can work with unstable internet connection (see in pages/api/jobs.js)
  10. Implement unit tests for API at the server-side

After you're done:

  1. Push you branch
  2. Deploy your branch to a public url. We recommend you use Vercel, Netlify or AWS S3, but you're free to use any other service as long as the url is publicly accessible.
  3. Include a README with the installation instructions and with the publicly accessible url.
  4. Don't forget to let us know you're done to review your test.

The fine print:

  • Please keep it simple. We don't like complicated setups.
  • Try to replicate the original designs as much as possible.
  • Functional components only.
  • For interactions in the React app you're free to use reducers, individual component state or any other library, but again, please keep it simple.
  • Typescript use is OK but not required.
  • SCSS use is not required. It is OK to include compiled CSS files or CDN urls.
  • This test shouldn't take you more than 4-6 hours to complete.
  • After the invitation is sent, your acccess rights to this repo will last 48 hours.

Important

The screenshot files are for reference only. The React app you are required to build has to look like these screenshots, but we don't expect your views to be an exact clone of every single one of them. All the components in the screenshot were built in plain .jsx with Tailwind CSS, with almost no custom CSS and no additional design assets (images, svg, logos).

Good luck!

nextjs-tailwindcss-test's People

Contributors

thomsjohn avatar

Watchers

 avatar

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.