Senior Front End Engineer Exercise

Greetings! 👋, what follows is a coding challenge similar to the work you would do at Schmiede. We've structured it to require approximately 4-6 hours to complete.

Once you've finished, please submit your solution to us for review. Our team will evaluate your work and provide feedback. If we like what we see, we'll invite you to proceed to the technical interview stage.

⛳️ Objective

This exercise evaluates your problem-solving approach, coding proficiency, and design thinking through a task that is similar to a real-world scenario at Schmiede. We seek clean, maintainable code that demonstrates your thoughtful problem-solving abilities.

🍎 Assignment

You need to develop a compelling machine list page that effectively displays equipment information, showcasing their performance specifications, operational capabilities, and more data that you'll find in the json that we provide.

• Display the list of machines with their image, name, type, location, specifications, and other information.
• Users should be able to search by name and filter by type. You can include more filters according to the data that you'll have.
• The page should be responsive and should be optimized for both mobile and desktop.
• The design is up to you, use the design of the existing Schmiede.one site as an inspiration, but do not feel limited by it. We encourage you to be creative while staying true to Schmiede’s core values and brand.
• Users can see the machine details in the same page or add an additional page showing more information about the selected machine.
• Add animations where you feel it enhances the user experience.
• You are welcome to add additional features if you feel they would improve the experience.

⚙️ Technical requirements

• Please use Next.js, TypeScript and TailwindCSS, as that is our main stack, other than that, you are fully flexible in how you can approach the task.
• Keep additional dependencies to a minimum - use your judgment to determine what's essential
• Make regular git commits throughout development to demonstrate your workflow and decision-making process
• Machine data is available in the machines.json file, with corresponding images in the machines-images directory.
• Add simulated API delays to mimic real-world data loading behavior.
• Add tests around key functionality to ensure reliability and prevent regressions.

☂️ How to complete the exercise

We'll assess your solution holistically across these key areas - perfection isn't expected, but thoughtful execution is valued:

• Complete, stable functionality with thoughtful edge case handling.
• Clean, readable code with clear commit history showing your process.
• Strong TypeScript usage for type safety.
• Responsive design with accessibility and SEO best practices.
• Well-structured components that are easy to understand and navigate.
• A strong folder structure that promotes scalability and maintainability.
• Cohesive design with delightful details (showcase your design thinking).

📤 How to submit the exercise

• Create a zip file of your project directory.
• Upload the zip file to a public drive (e.g. Google Drive, Dropbox).
• Share the link with us via email.

We look forward to reviewing your submission! All the best!

The Schmiede.one team.