AhmedKhatri510 / trello-card

Problem Statement

Coding Round

Hi there!

Thank you for your interest in applying for the Frontend Developer position at IIT Bombay and welcome to the second round of the interview process. Here we’re looking to understand the candidate's thought process, coding ability, documentation and problem-solving skills.

You have 7 days(168 hours) from the receipt of this document to submit your designs through the forms here with a Gmail login.

Please Note: Contents of this document are confidential. You are not allowed to share this document with the outside world.

Problem Statement

• Implement a simple page that has 3 column lists (a simple bootstrap design is preferred).
• You can use the above image as a reference.
• Each column will contain multiple cards.
• The order of the cards should be maintained.
• The card should show a title and a description.
• The state should be maintained after refresh.
• There should be a button at the top to add a new card.
• User should be able to move a card from one column to another by drag and drop.

Add Card

• On clicking the add card button, a modal popup should be shown with a form.
• The form should contain title, description and column selection dropdown.
• Title should be validated and should only contain alphabets.
• Description should be validated and should be a minimum of 25 characters.
• On submission, the card should be added to the end of the selected column.

Edit Card

• On clicking a card, the add card modal popup should be shown with the add card form with the prefilled data.
• If the user changes the column then, the card should be added to the end of the selected column.
• There should be a button to delete the card in the popup.

Instructions

• Use simple bootstrap components (additional libraries and css can be used but does not have any weightage in the review).
• React should be used and the codebase should be AOT compilable.
• Host the resulting webpage as a simple website in a github.io page or any other free static host.
• The codebase should be hosted in a public git repo.

Deliverables

• Link to the static hosted page.
• Link to the public git repo of the codebase.
• Documentation file detailing the design approach and choices used in the code design should also to be added in the git repo.

Deliverables must be submitted in 7 days(168 hours) from the receipt of this document via the forms here.

Candidates clearing this round will be intimated via email a couple of weeks after their submissions.

Note: We take plagiarism very seriously and hence please don't directly copy-paste code from somewhere else without linking it to the source or giving the source due credit. We will run the codebase through an internal plagiarism code checker during code evaluation. We know Code LLMs exist and it might get the job done faster, but you do miss out on the fun of pure coding. Its pretty easy to make out the code output from them. It’s your unique approach to problem-solving that we’re most interested in. So, gear up, trust your abilities, and happy coding!

PS: Some of you might think this coding round is trivial and easy. That’s intentional! Our goal is to gauge your understanding of the core fundamentals before we dive deeper in the subsequent stages of the interview. Remember, being a developer isn’t about writing the most intricate code. It’s about creating solutions that are efficient, maintainable, and address real-world problems - even if they seem mundane or basic at times. So please keep this in mind as you move forward.

Good Luck!

Design

As per the problem statement, the application has similar feature of trello application.

Design for User Interface

Modal for add/edit card

React flow diagram

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: ["./tsconfig.json", "./tsconfig.node.json"],
    tsconfigRootDir: __dirname,
  },
};

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list