IXM Developer Skill Assessment

Objective:

This assessment aims to evaluate your expertise in both frontend and backend Drupal development, as well as your general web development skills. You'll be tasked with developing a landing page that incorporates several key features often encountered in our projects.

Project Design

The design for the landing page is available on Figma: 👉 ImageX Skill Assessment Design

To inspect design elements and access all features, you'll need a Figma account. You can sign up for a free account here: https://www.figma.com

Requirements:

• The project must be built using Bootstrap.
• We expect a fully responsive theme.
• Feel free to use any Drupal modules or make any architectural decisions you deem necessary.
• Implement small, frequent commits with clear and descriptive commit messages. Each commit should address a single feature.
• You should not spend more than 16 hours on this assignment. Please indicate the total time spent on each of the features in your README.md.
• Provide a copy of the database including the content used for the landing page. Add it in the database folder with the name skill-assesment.sql

Landing Page Features:

Header:

The header should include the following elements:

• Company Logo: Display the company logo on the left side of the header.

• Customizable Menu: Implement a Drupal menu that is manageable through the Drupal admin interface. Site administrators should be able to easily update the menu items (e.g., change labels, add/remove links, reorder items).

• CTA (Call to Action) Button: Include a CTA button on the header.

  • The button's text and URL should be fully customizable.
  • You can implement the button as:
    • A dedicated menu item within the Drupal menu system OR
    • A separate custom block that allows editors to configure the button label and link.
  • Choose the implementation that fits best with your theme structure, but ensure flexibility for content editors.

Make sure the header is responsive and adapts well to different screen sizes.

Hero Banner:

• A custom block that can be placed on any page.
• Users should be able to add a title, description, image, and CTA button.

Desktop

Mobile

Team Section:

This section should display a list of team members using data retrieved from an external API.

• API Integration

  • Fetch data from the DummyJSON Users API.
  • The request must include authentication (e.g., by passing a token in the request headers).
  • Use the following fields from the API response to populate each user card:
    • firstName and lastName: combined to display the user's full name.
    • image: used as the user's profile picture.
    • company.title: displayed as the user's job title or role.
    • address.city and address.stateCode: used to display where the user lives.
    • university: displayed as the user's educational background.

• Configurable Block

  • Implement a custom Drupal block that displays the team members.
  • The block must provide a configuration form in the UI to allow site administrators to set the number of users to display (e.g., display 3, 6, or 9 members).

Evaluation Criteria:

• The focus is not just on functionality but also on code quality.
• Your implementation will be reviewed for:
  • Clean, maintainable code.
  • Use of Drupal best practices.
  • Good use of abstractions, services, and configuration.
  • Clear and modular organization.

💡 You don't need to overengineer—keep it simple but structured. Thoughtful decisions, even in small implementations, are key to a strong submission.

Desktop

Mobile

Footer:

• The company logo.
• A customizable menu.
• A list of social media links.
• Copyright information.

Desktop

Mobile

Additional Notes:

• Focus on clean, maintainable code.
• Ensure the website is responsive and optimized for both desktop and mobile.

---

Getting Started

The project includes the foundational setup commonly used in IXM projects.

Here are the steps to get started with the project:

Docker and DDEV

We use Docker and DDEV for local development. Make sure you have both installed on your machine.

Here you can find the installation instructions for Docker

Here you can find the installation instructions for DDEV. DDEV is a tool that simplifies Docker container management for web development projects.

Once you install both Docker and DDEV, you can verify the installation by running:

docker --version && ddev --version

After DDEV is installed you can continue to Project Setup:

Frontend

The project uses SDC and in case you have any additional questions please consult the FRONTEND.MD

Project Setup

1-) Start the DDEV environment

ddev start

2-) Install the project dependencies using composer within the container.

ddev composer install

3-) Import the provided database dump.

ddev import-db --file=database/db.sql

4-) Run Drush deploy to update the database and clear caches

ddev drush deploy

4-) Install frontend packages and build frontend assets using yarn

ddev exec swat frontend:install

If you want to build or watch for changes in a frontend component package.

ddev exec swat frontend:build

Once it's finished, you should be able to open https://ixm-skill-assesment.ddev.site/

Good luck!

Trhoubbleshooting

If you find any issues when commiting your code, try to removing .git hooks by running the command below:

rm -rf .git/hooks

Workflow

To complete this assessment, you will need to work on your own copy of the repository and submit your solution via a pull request (PR). Follow the steps below carefully.

1. Create a Bitbucket Account

If you don't already have a Bitbucket account, you can create one for free at: 👉 https://bitbucket.org/account/signup/

2. Fork the Repository

Create a fork of this repository under your own Bitbucket account. This will allow you to work on the project independently.

To fork this repository:

1. Go to the original repository URL: 👉 https://bitbucket.org/ixm/ixm-skill-assesment/src/master/
2. Click the “More options” menu (•••) in the top right.
3. Select “Fork this repository”.
4. Choose your personal Bitbucket workspace.
5. Click “Create fork”.

3. Clone Your Fork Locally

Once your fork is created, clone it to your local development environment:

git clone https://bitbucket.org/your-username/ixm-skill-assesment.git
cd ixm-skill-assesment

4. Create a Branch

Create a new branch using your name. This will help us track submissions individually.

git checkout -b your-name

Example:

git checkout -b john-doe

5. Set Up the Project

Follow the instructions in the Getting Started section below to spin up the environment using Docker/DDEV and install dependencies.

You’ll also need to import the database and build frontend assets as described.

6. Work on the Assignment

• Develop the landing page as specified in the requirements.
• Make small, meaningful commits with descriptive messages.
• Ensure that each commit addresses a single feature or task.

7. Push Your Changes

Once you're happy with your progress, push your local branch to your forked repository:

git push origin your-name

8. Open a Pull Request

Submit your work by creating a pull request (PR) from your fork to our original repository.

To open a PR:

1. Go to your forked repo on Bitbucket.
2. Click “Create pull request”.
3. Set the source to your branch and the destination to master on the original repository.
4. Add a clear title and detailed description.
   • Include the total time spent on each feature.
   • Mention modules used, any challenges, technical decisions or assumptions.
   • List any known issues or limitations (if applicable).

9. Notify Us

After submitting your pull request, send us an email or message to let us know it’s ready for review.