BeastScan Frontend Developer Technical Test

🧪 BeastScan – Frontend Developer Test Task

We’re excited that you’re interested in joining the BeastScan team! This test task is designed to help us understand your skills as a frontend developer and your ability to create polished, dynamic user interfaces.

Completing this task will give you a practical insight into the challenges and opportunities you’ll encounter at BeastScan. It’s not just about getting the job – it’s a chance to show off your creativity and technical skills. You can even take what you learn here to other projects!

Feel free to submit this task along with your application. We’ll evaluate your coding style, problem-solving skills, and attention to detail to see how well you fit into our growing team. Good luck – we’re looking forward to seeing your work!

If you’ve found your way here, chances are you’re interested in working with us – and that’s great!

This test is designed to showcase your skills, not necessarily as a direct step toward a job offer. Think of it as a chance to demonstrate your abilities and gain experience you can use in future interviews.

If you’re keen to move forward, that’s fantastic. We’re simply looking for the right fit to join our growing team.

🗳️ The Upvote Challenge: Dynamic Voting Widget

Context:
You’ve just joined the vibrant and innovative team at BeastScan as a frontend developer. As you step into this new role, you’re welcomed with a challenge that perfectly blends creativity and technical prowess.

Your mission? To craft a dynamic voting widget that not only showcases ideas but also encourages interaction and feedback. Picture this: a series of cards, each representing an idea, neatly laid out on the screen. Users can express their opinions by upvoting or downvoting the ideas, and when a change is needed, they can easily edit the card content through a sleek, responsive modal.

At BeastScan, we believe that design should be both smooth and intuitive. We expect you to demonstrate not only technical expertise but also a keen eye for detail, bringing your ideas to life in a way that feels natural and engaging.

The technologies you’ll be using reflect our focus on performance and maintainability:

Twig / HTML for structuring the dynamic content.
Stimulus / Alpine / Vanilla JS for building interactivity and responsive features.
CSS to ensure the widget looks crisp and modern, adapting seamlessly to any screen size.

But most importantly, remember to enjoy the process. Coding is more than just solving problems – it’s a form of expression and creativity. At BeastScan, we see code as an art form driven by passion. So, dive in, have fun, and let your creativity take center stage!

🛠️ Your Mission:

Build a dynamic voting widget that fetches and displays a series of cards from our API. Each card should include the following elements:

Title
Description
Image
Upvote and Downvote Buttons
Button with a Label and Link

Core Features:

Dynamically generate cards based on API data.
Allow users to upvote and downvote, with the count updating in real-time.
Make the content editable via a modal, with changes persisting after a page reload.

API Endpoint:
https://my.beastscan.com/test-kit

💡 Bonus Features (Optional):

Implement drag-and-drop functionality to rearrange the cards.
Add a feature to sort cards based on the number of votes.
Include a Reset All button to restore the original API data.
Allow users to add new ideas to the grid with basic CRUD operations.
Package the widget as a reusable component that can be embedded on any website.

🚀 Why This Matters:

This challenge helps us evaluate your ability to work with dynamic data, build interactive UI components, and maintain a smooth user experience. We’re excited to see how you approach this challenge!

📝 Evaluation Criteria:

Clean and modern HTML/Twig templating.
Responsive and intuitive CSS styling.
Proper JavaScript implementation and API handling.
Robust handling of edge cases (e.g., loading states, error handling).
Code quality, including readability, structure, and maintainability.
User experience (smooth transitions and interactivity).

📤 How to Submit

Upload your solution as a ZIP, GitHub repo, or CodePen
Include a brief README or comment section that explains:
- What tools you used
- Any decisions or assumptions you made
Try to keep the total time under 3 hours

We are really looking forward for your input at hello@beastscan.com with your solution.

✨ Final Tip:

Remember, this task is not just about finding the right answer but about demonstrating your problem-solving approach. Have fun and let your skills shine!