Front End Test Project

You should see this challenge as an opportunity to create an app following modern development best practices (given your platform of choice), but also feel free to use your own app architecture preferences (coding standards, code organization, third-party libraries, etc). It’s perfectly fine to use vanilla code or any framework or libraries.

Scope

1. Infinite scroll page

2. Single article page

3. Contact page

Requirements

1. Create the project using any technology of your preference. It’s perfectly OK to use vanilla JS or any front end frameworks or libraries.
2. Make it responsive using your best judgement.
3. 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.
4. Use this API to display posts: https://sample-posts.coderockr.com/api/posts, the documentation is available at https://sample-posts.coderockr.com/ui.
5. When scrolling, the top header should scroll up to the top of the page and then stick to the top.
6. We pay attention to both CSS and JS bundle sizes. Import just what you require and not the whole package.

Design

Design is available in Figma at https://www.figma.com/file/ImqUersZbn3WGyBdiEjlwKyQ/Coderockr-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/ImqUersZbn3WGyBdiEjlwKyQ/Coderockr-Front-end-Test

Deliverables

The project source code and dependencies should be made available in GitHub. Here are the steps you should follow:

1. Create a public repository on GitHub (create an account if you don't have one).
2. Create a "development" branch and commit the code to it. Do not push the code to the master branch.
3. Create a "screenshots" sub-folder and include at least two screenshots of the app.
4. Include a README file that describes:

• Special build instructions, if any
• List of third-party libraries used and short description of why/how they were used

5. Once the work is complete, create a pull request from "development" into "master" and send us the link.
6. Avoid using huge commits hiding your progress. Feel free to work on a branch and use rebase to adjust your commits before submitting the final version.

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)

Coding Standards

When working on the project be as clean and consistent as possible.

Project Deadline

Ideally you'd finish the test project in 5 days. It shouldn't take you longer than a entire week.

Quality Assurance

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

General

• First of all, it should compile and run without errors
• Are all requirements set above met?
• Can the project be built using npm run build or yarn build without any errors and warnings?

Browser Check

• Does page display and work correctly in supported browsers?

Coding Standards

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

Submission

1. A link to the Github repository.
2. Briefly describe how you decided on the tools that you used.

Have Fun Coding 🤘

This challenge description is intentionally vague in some aspects, but if you need assistance feel free to ask for help.