Frontend Developer Assignment: Responsive Snap Grid System using
Remix
Objective:
To assess your ability to build a feature that requires a well-thought-out user experience,
strong front-end development skills, and practical knowledge of Remix's key concepts like
Loaders and Actions.
Project Overview:
You are tasked with building a responsive snap grid system where an element can be
dragged from a left-side navigation drawer and dropped onto a grid canvas. The system
will support two modes:
1. Admin View - This allows admins to build and configure quiz questions by dragging
components (like a progress bar, timer, question text, image, etc.) onto the grid.
2. User View - Users can interact with the grid, view the quiz question, and answer it.
Feature Requirements:
1. Snap Grid System:
● A grid canvas where components snap to predefined positions when dropped.
● Elements include: Progress Bar, Question Number, Timer, Question Text, Image, 4
Options.
● Once the element is dropped, the position and component details should be saved to
the backend.
2. Admin View:
● A left-side navigation drawer containing draggable elements (progress bar, timer,
question text, etc.).
● Ability to drag and drop components onto the grid.
● Once an admin arranges components and configures a quiz question, the structure
should be saved in the backend via Remix Actions.
3. User View:
● The grid setup by the admin should be fetched via Remix Loaders.
● The user can interact with the quiz by answering questions.
● Provide an option to test whether the submitted answer is correct.
4. Backend Integration:
● Use a mock or actual backend for fetching quiz components for both views.
● Save the state of the grid and quiz configuration in the backend.
5. Responsive Design:
● Ensure the grid system is responsive across devices (mobile, tablet, and desktop).
● The navigation drawer should adapt accordingly for different screen sizes.
Technical Requirements:
● Remix Loaders & Actions:
○ Utilize Remix Loaders for fetching quiz questions and configurations.
○ Use Remix Actions to handle saving the grid state and quiz question
configurations to the backend.
● TypeScript & CSS Modules:
○ Use TypeScript to ensure type safety.
○ Utilize Tailwind CSS approach for styling.
● Validations:
○ Include your own validations and UX enhancements for how this grid system
works.
● Accessibility Considerations:
○ Implement keyboard navigation and focus management for better
accessibility.
Evaluation Criteria:
● Technical Skills in Remix:
We want to see a deep understanding of Loaders, Actions, and how they facilitate
data fetching and server-side logic.
● Problem-Solving & UX Research:
How well do you think through challenges and propose innovative solutions for
user experience? Bonus points for explaining your thought process in a README. ●
Code Structure & Quality:
Your code should be clean, well-documented, and easy to follow. Consider how you
would structure this in a production-level application.
● Responsive Design & Accessibility:
We expect the UI to be fully responsive and accessible. Show how you handle these
aspects in your implementation.
● Backend Interaction:
Demonstrate how you integrate frontend and backend logic to manage the state and
interaction of the quiz.
Submission Instructions:
1. Create a GitHub repository for this project and include a README explaining your
approach.
2. Ensure the app runs with minimal setup (provide instructions if necessary). 3.
Submit your repository link along with any additional notes or insights you wish to
share.
Bonus (Optional):
● How would you extend this system for other types of content beyond quizzes (e.g.,
forms or lessons)?
● Implement lazy loading for fetching additional components as the admin scrolls
through the navigation drawer.
We look forward to seeing your approach and how you balance the user experience with a
robust technical solution using Remix.
Good luck!
Following is an example of the how the frame would look like
Admin:
User:
