diff --git a/app/soapbox/features/developers/developers_challenge.js b/app/soapbox/features/developers/developers_challenge.js
new file mode 100644
index 000000000..fe150e2ea
--- /dev/null
+++ b/app/soapbox/features/developers/developers_challenge.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+import Column from '../ui/components/column';
+import { SimpleForm, TextInput } from 'soapbox/features/forms';
+import { changeSetting } from 'soapbox/actions/settings';
+import snackbar from 'soapbox/actions/snackbar';
+
+const messages = defineMessages({
+ heading: { id: 'column.developers', defaultMessage: 'Developers' },
+ answerLabel: { id: 'developers.challenge.answer_label', defaultMessage: 'Answer' },
+ answerPlaceholder: { id: 'developers.challenge.answer_placeholder', defaultMessage: 'Your answer' },
+ success: { id: 'developers.challenge.success', defaultMessage: 'You are now a developer' },
+ fail: { id: 'developers.challenge.fail', defaultMessage: 'Wrong answer' },
+});
+
+export default @connect()
+@injectIntl
+class DevelopersChallenge extends React.Component {
+
+ static propTypes = {
+ intl: PropTypes.object.isRequired,
+ dispatch: PropTypes.func.isRequired,
+ }
+
+ state = {
+ answer: '',
+ }
+
+ handleChangeAnswer = e => {
+ this.setState({ answer: e.target.value });
+ }
+
+ handleSubmit = e => {
+ const { intl, dispatch } = this.props;
+ const { answer } = this.state;
+
+ if (answer === 'buzzfizz') {
+ dispatch(changeSetting(['isDeveloper'], true));
+ dispatch(snackbar.success(intl.formatMessage(messages.success)));
+ } else {
+ dispatch(snackbar.error(intl.formatMessage(messages.fail)));
+ }
+ }
+
+ render() {
+ const { intl } = this.props;
+
+ const challenge = `function fizzbuzz() {
+ return 'fizz|buzz'.split('|').reverse().join('');
+}`;
+
+ return (
+
+
+
+ fizzbuzz() }}
+ />
+
+ {challenge}
+
+
+
+
+
+
+