Frontend Interview Challenge

Requirements

• You must use Next.js and Tailwind CSS to build the project.

• You may use any additional libraries, but UI libraries that do not integrate with Tailwind CSS are not allowed.

• The project should follow the same theme as the Venue theme.

  • Images are not important—you may use placeholder images. however, the product page should have a product image which we have provided in the assets folder.

• Product data will be provided in the assets folder.

• While this is a frontend-focused challenge, you should write backend code if necessary (e.g., for SSR/SSG or handling API requests).

• Deploy the project to a publicly accessible URL.

• Extra features that go beyond the requirements and impress us are encouraged!

Project Description

This is a minimalistic e-commerce project built using Next.js and Tailwind CSS.

Task 1: E-Commerce Website

Build an e-commerce website that includes the following pages:

• Home page
• Product page
• Collection page

Bonus Task: A/B Test Recommendation Engine

Create an A/B test recommendation engine that suggests the best recommendations for users.

• The implementation should replicate the functionality of Weblens AI.

• Concrete system flow:

  • Implement a system to scrape a your website which you built in the first task.
  • Utilize AI to determine if there are any elements suitable for A/B testing.
  • Develop an effective method to present the results.

• You may implement this using a CLI tool, scripts, APIs, or any other method.

We highly recommend you complete this task.

Evaluation criteria

Requirement Fulfillment

• Does the project meet all the listed requirements?
• Are there any extra features that go above and beyond what we asked for?

Code readability

• Are variable and function names meaningful and descriptive?
• Are naming conventions consistent throughout the project?
• Are comments clear and useful?
• Is the code properly formatted and structured?

Code quality

• Are best practices followed in the project structure?
• Is the code efficient and maintainable?
• Are performance optimizations applied where necessary?
• Is the styling clean and consistent?
• Is the documentation clear and well-written?

Code maintainability

• Does the project follow a consistent style guide?
• Is there clear documentation explaining the code?

Code performance

• Does the project pass performance tests? (You can check using PageSpeed Insights)
• While there is no minimum performance score, you should optimize the website as much as possible.

Documentation

• Is there a well-structured README file?
• Does the documentation explain setup, usage, and key functionalities?
• Are installation and deployment instructions clear?
• Are API endpoints (if any) well-documented?

Communication

• Can you explain your project clearly and concisely?
• Are questions or clarifications raised in a timely and professional manner?
• Are interactions with the point of contact clear and effective?

Submission

Please submit the following to talent@abconvert.io.

1. A public GitHub repository with your project code.
2. A live URL.
3. A demo video showcasing your project

There is no strict deadline for this project; please submit it when you believe it is ready for review. Good luck :)