Strive Messaging Frontend Coding Challenge

Front End Developer/UX Designer Coding Challenge: Member Editing Form Arrangement

Our application supports permissioned access by organizer users, organizers who work with a given campaign, to the fields of each member, people who are messaged by a given campaign. Member information may include fields such as firstName, lastName, email, etc.

Given a few arrays of field permissions of type:

interface FieldPermission {
    key: string
    edit: boolean
}

and field input definitions:

interface FieldDefinition {
    key: string
    label: string
    type: 'text' | 'number' | 'date' | 'email' | 'boolean' | 'option'
    options?: string[]
    rowSpan?: number
}

Please put some form inputs in a box in the provided order and in the specified sizes. For any vagaries in instructions, please document whatever is under-specified then make your own best judgment. We're excited to hear what decisions you made and why.

Use of tailwind-based styles is preferred.

Questions

• What variety of different "types" of inputs are supported?
• What changes would you make, if any, to the field permission type, the field definition type, or how each are stored?

---

• 🚀 Next.js 12
• ⚙️ Tailwind CSS 3 - A utility-first CSS framework
• 🍓 Styled Components - Styling React component
• 📏 ESLint — Pluggable JavaScript linter
• 💖 Prettier - Opinionated Code Formatter
• 🐶 Husky — Use git hooks with ease
• 🚫 lint-staged - Run linters against staged git files
• 🗂 Absolute import - Import folders and files using the @ prefix

🚀 Getting started

Please clone this repository and run the following commands inside the project folder:

1. npm install or yarn;
2. yarn dev;

To view the project open http://localhost:3000.

🤝 Submit Your Solution

1. Fork this repository or create a feature branch off of master.
2. Do all excercise related work on said branch.
3. Submit a PR.

📝 License

This project is licensed under the MIT License - see the LICENSE.md file for more information.