Can you do this front-end test? We are looking for talented mid-level to senior front-end developers! Check out the job description at:
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
infinite-scroll.jpg
single-article.jpg

README.md

Front-end Test Project

Convert the following designs to HTML/CSS/JS (pure front-end).

Infinite scroll page

inifnite scroll preview

Single article page

single artivle preview

Requirements

  1. Create project using Chisel.
  2. Make it responsive using your best judgement.
  3. Use ITCSS and BEM naming convention.
  4. Create custom infinite scroll effect - use custom JavaScript (preferably the modern JS standards and APIs). Don't hesitate to use helpful NPM packages but keep the JS bundle size low.
  5. Use this API to display posts: https://stormy-shelf-93141.herokuapp.com/_page and _limit query parameters are available.
  6. You can add an animated transition between the infinite scroll page and the article page. Keep in mind it's an optional requirement though.
  7. When scrolling, the top header should scroll up to the top of the page and then stick to the top.
  8. We pay attention to both CSS and JS bundle sizes. Import just what you require and not the whole package.
  9. We appreciate a readable code.
  10. Avoid using huge commits hiding your progress. The initial commit should be a bare Chisel install. Feel free to work on a branch and use rebase to adjust your commits before submitting the final version.

Design

Design is available in Figma at https://www.figma.com/file/vt3EnhEv2BGCWtMW15tHl1/Xfive-Front-end-Test. If you haven't already, sign up for a free Figma account, so you can work with the design.

Prototype: https://www.figma.com/proto/vt3EnhEv2BGCWtMW15tHl1/Xfive-Front-end-Test

Supported browsers

Ensure that the elements work and display correctly in the following browsers:

  • Firefox (latest version)
  • Google Chrome (latest version)
  • Microsoft Edge (latest version)
  • Internet Explorer 11 – in this case we don't require all the functionalities as long as the page is readable

Coding standards

When working on the project use consistent coding style. Follow what's already in Chisel - EditorConfig, stylelint, ESLint (see Code Quality), ITCSS, etc.

Project Deadline

Ideally you'd finish the test project in 1 week. It shouldn't take you longer than 2 weeks.

Quality Assurance

Use the following checklist to ensure high quality of the project.

General

  • Are all requirements set above met?
  • Can the project be built using npm run build or yarn build without any errors and warnings?
  • Is the page working without any JS errors?

Browser check

  • Does page display and work correctly in supported browsers?

Coding Standards

  • Is coding style (for HTML/CSS/JS) consistent?