<center> # Monadical Applicant Study Guide *Originally published 2017-02-13 on [docs.sweeting.me](https://docs.sweeting.me/s/blog).* Some resources and example projects for developers thinking about applying to Monadical. </center> :::success Want to apply to Monadical? Go to our [team page](https://monadical.com/team#join) and click `Apply Now` at the bottom. ::: Here's some documentation links for things we use in the Monadical stack. Whether you're brushing up on your skills to [apply to Monadical](https://monadical.com/apply) or just interested in what technology we use, these are the resources to get started. [TOC] ## Stack Documentation Make sure to read our other technical [blog posts](https://monadical.com/blog) to learn about our design philosophies and approach to software architecture! ### Backend - Python Language - Beginner: https://learnxinyminutes.com/docs/python/ - Beginner: https://wiki.python.org/moin/BeginnersGuide - Beginner: https://docs.python.org/3/tutorial/index.html - Docs: https://docs.python.org/3/ - Itermediate & Advanced: http://intermediate-and-advanced-software-carpentry.readthedocs.io/en/latest/day1.html - PEP8: http://dcjtech.info/wp-content/uploads/2015/12/Python-Syntax-Checker-Codes-Cheatsheet.pdf - django - https://docs.djangoproject.com/en/1.11/ - https://docs.djangoproject.com/en/1.11/intro/ - https://docs.djangoproject.com/en/1.11/intro/overview/ ### Frontend - Javascript Language - https://learnxinyminutes.com/docs/javascript/ - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode - https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript - https://www.toptal.com/javascript/javascript-es6-cheat-sheet - https://hackernoon.com/javascript-es6-exploring-the-new-built-in-methods-b62583b0a8e6 - redux - http://redux.js.org/ - https://www.scribd.com/document/311967613/Redux-Cheat-Sheet - react-redux - http://redux.js.org/docs/basics/UsageWithReact.html - https://github.com/uanders/react-redux-cheatsheet - react - https://facebook.github.io/react/docs/ - https://facebook.github.io/react/docs/hello-world.html - https://facebook.github.io/react/tutorial/tutorial.html - redux-time - https://github.com/Monadical-SAS/redux-time - https://monadical-sas.github.io/redux-time/#documentation - react-bootstrap - https://react-bootstrap.github.io/components.html - font-awesome - http://fontawesome.io/icons/ ## Practice Projects ### Design Guidelines #### The Frontend The frontend must be written in ES6 or ES7 Javascript, you may use React, or no framework at all, but don’t use Angular, Vue, or another large JS framework (Lodash/jQuery/etc are fine). We use the prettier.io JS style with no semicolons in our codebase. We’re not strict about any specific code style, but be consistent with whatever you choose. Javascript build environments can be ticky to set up, if you haven’t done it before, many browsers now natively support most ES6 features so don’t worry about setting up a build environment since we don’t require supporting older browsers for this task. Browsers do not supprot JSX though, so if you plan to use React, you may use npx create-react-app to set up a standard React build environment with everything working out-of-the-box. #### The Backend The backend must be written in Python 3.7. You may use any backend framework or ORM such as Django, Flask, Bottle, Pyramids/Pylons, etc. All state must be stored in the backend in append-only fasion. This is a design pattern we use frequently at Monadical, so we’d like to make sure you’re comfortable working with immutable, append only data structures. The key idea is that any database can be abstracted as a log of changes to some initial state, such as game moves or canvas clicks. You should store the full log and a function that transforms that log into whatever state the frontend needs. For example, for a banking app you would store a list of the transactions in and out of a users wallet, and use a function to add up the credits & debits to display their total balance. To become more familiar with append-only log-structured data, read this article: https://engineering.linkedin.com/distributed-systems/log-what-every-software-engineer-should-know-about-real-time-datas-unifying The frontend and backend may interact via REST API, or websocket. You can choose how to implement it, but real-time streaming can be tricky, so you may choose to send drawing strokes or board moves when a user clicks a button instead of sending events continuously. If you’re familiar with websockets, then we recommend using them instead. ### Trivial https://www.interviewzen.com/apply/bhYF3z #### FizzBuzz Standard FizzBuzz, Google it. #### Snake Game Find the hidden bug in the code, and change the behavior to make the snake die when hitting a wall instead of wrapping around the screen. ### Easy #### Multiplayer Game Build a multiplayer game frontend & backend with django-channels and redux-time. An example would be a drawing game where one player's canvas drawing is synced to another person's scree, and they have to guess which work the user is drawing out of a selection, within a certain amount of time. It should use websockets to transmit the connection state in real time between players, but it can be anything realtime, it doesn't have to be a drawing game. Games with moving characters are harder because collision physics over a connection with latency is difficult to syncronize. #### Simple Database App Write a small React redux application that displays a simple list of key:values in the frontend as a table with two columns (keys and values). It should store data in the redux store, and allow the user to add a new key : value, or delete an existing one. When you come in you can work on adding one or more of these features: - ability to filter the table using a search box - persist the table in localStorage - ability to download the table as JSON or CSV You should try to make the table look reasonably nice with CSS, you may use a CSS framework like bootstrap or material design, or hand-code the CSS, although don't over-engineer it. ### Intermediate #### Leaderboard UX Requires creativity, UX design, user & competitor research, and honing in loose design requirements come up with a good experience. Design an interactive leaderboard & player ranking interface in React that encourages players to earn more chips and improve their skills. It should balance showing stats & info with remaining clean and encouraging users to take actionable steps to play against more people or learn more theory. #### Tic Tac Toe game Write a program that lets two humans play a game of Tic Tac Toe in a terminal. The program should let the players take turns to input their moves. The program should report the outcome of the game. When you come in, we will pair on adding support for a computer player to your game. We can start with random moves and then work on making the AI smarter after that. #### Lisp parser Write code that takes some Lisp code and returns an abstract syntax tree. The AST should represent the structure of the code and the meaning of each token. For example, if your code is given "(first (list 1 (+ 2 3) 9))", it could return a nested array like ["first", ["list", 1, ["+", 2, 3], 9]]. When you come in, we will pair on writing an interpreter to run the AST. We can start by implementing a single built-in function (for example, +) and add more if we have time. #### Space Invaders Write a game of Space Invaders that has computer-controller enemies that move left and right automatically and a human-controlled player that you can move left and right with the arrow keys. When you come in, we can add the ability to shoot bullets at the enemies and track your score. ### Advanced #### Video conference app Requires researching a complex API and implementing a redux-based store to manage a stateful API in a functional deterministic manner. Build a video conferencing app with WebRTC that has clean management of connection state and an easy UX to video chat with other people by sharing a websocket link. #### Shared Whiteboard This is a two-person shared chalkboard/whiteboard, where there is a canvas that both peoplecan draw on, each person’s stokes are visible in a color specific to that person. The take-home task is to start by allowing a single person to draw on a canvas, and download their drawing from the server as TXT, CSV, or JSON file. The drawing should be saved continously to the server, as an append-only log of strokes, so that if the user refreshes it is displayed without any data loss. Then, during the interview we will pair on adding the ability for a second user to share the canvas in real-time and color each persons strokes with a color unique to that user. #### Pictionary Game https://en.wikipedia.org/wiki/Pictionary This is a game where one player draws a picture, and the other player tries to guess which word the person is trying to draw out of a selection. The objective is to guess the word as soon as possible, before the person has drawn the entire thing (a popular app that did this is Words with Friends), so you should display a timer to both users once they start drawing. The take home task is to allow a single person’s drawing to be displayed on another person’s screen in real-time. the pairing task is to add the words for the first person to draw, and build a system for the second person to select the right word and display whether they won or lost. #### Magnetic-cave Game This is essentially connect-four, but the pieces stack on either side of the board instead of bottom-up. Two players see a board, which is a grid of 7 rows and 7 columns. They take turn adding pieces to a row, on one of the sides. The pieces stack on top of each other, and the game ends when there are no spaces left available, or when a player has four consecutive pieces on a diagonal, column, or row. For example, the board might look like this: 0 [ _ _ _ _ _ _ _ ] 1 [ o x _ _ _ _ o ] 2 [ x _ _ _ _ _ x ] 3 [ x _ _ _ _ _ o ] 4 [ o _ _ _ _ _ _ ] 5 [ _ _ _ _ _ _ _ ] 6 [ _ _ _ _ _ _ _ ] in this case, it is x’s turn. If x plays (2, R), the board will look like this: 0 [ _ _ _ _ _ _ _ ] 1 [ o x _ _ _ _ o ] 2 [ x _ _ _ _ x x ] 3 [ x _ _ _ _ _ o ] 4 [ o _ _ _ _ _ _ ] 5 [ _ _ _ _ _ _ _ ] 6 [ _ _ _ _ _ _ _ ] The take-home task is to implement the 2-player version of this game, where each player sees the board in their frontend and can place moves that the other player sees, and the game should display “player 1 won” “player 2 lost” when the game is complete. The pairing task is to implement a single-player mode, starting with the computer placing random moves, and moving on to implementing an AI that’s a little smarter with some basic heuristics.