Hugh Francis hhff

In order to enable X-Ray Goggles on a Replit Project (or any type of website), simply add the following script before the closing </body> tag (or in the <head>, it doesn't actually matter where).

Script

<script src="https://x-ray-goggles.mouse.org/webxray.js" class="webxray" data-lang="en-US" data-baseuri="https://x-ray-goggles.mouse.org"></script>

Example

For this interview we'll be building a lightweight CRUD app. We'll start by creating some system diagrams and wireframes then build out a server and client.

The application is called Pokedéx.io (we use .io because it's a brilliant startup).

We have some basic functional requirements for this application:

We will list Pokémon on a page. We'll pull from the Pokeapi (https://pokeapi.co/) to get this list.
Users can create an account and login. They can authenticate using email & password, Oauth with Google, or the slick new magic link strategy! Up to you!
Once authenticated, users can capture Pokémon. Next to each Pokémon in the list, there will be a capture button. When capturing a Pokémon, the user will be given the oppurtunity to name the capture and add a note. A user can retroactively update this name and note. Captures must be persisted and users cannot capture a Pokémon more than once.

We also have some fun features that we'd like to diagram (but not build):

	FROM alpine:latest

	EXPOSE 80/tcp
	EXPOSE 34343/udp

	COPY ./bin/start-urbit /bin/start-urbit
	COPY ./bin/get-urbit-code /bin/get-urbit-code
	COPY ./bin/reset-urbit-code /bin/reset-urbit-code

	RUN apk add --no-cache curl bash libcap libc6-compat

	Using https://pokeapi.co/

	1. User navigates to / (homepage)
	2. User sees a clickable list of Pokemon names
	3. User clicks a Pokemon, and they are linked to `/:pokemonName` (/ditto)
	4. The Pokedex shows basic information about the Pokemon that the user selected (weight, height, id, and other basic attributes)
	5. Nice to Have: The Pokedex enders an image of the pokemon.
	6. Nice to Have: Add a button to the Pokemon show page that allows you to "capture" a pokemon if you have not already caught it, and this state should persist over page refresh.

	(function($){
	var map = {
	pickup: 1,
	driver: 2,
	fare: 3,
	car: 4,
	city: 5,
	payment_method: 6
	};

	The implementation should:
	- Implement an endpoint that mirrors swapi.co
	- Make a request to the appropriate resource in swapi.co
	- Reshape the swapi.co data structure to that described at jsonapi.org (ignoring the "links" keyword)

	We look for:
	- A functional approach to the code style
	- The makings of an approach (or at least a solid plan) around testing

	const TimeDisplay = withTime(props => (
	<Eink
	mode={Modes.DU}
	render={memo(() => (
	<Layout width={12}>
	<UIText variant="copy" align="center" lineHeight={FONT_SIZES['copy']}>
	{props.time}
	</UIText>
	</Layout>
	))}

	import * as Sentry from '@sentry/browser';

	import {
	SOME_IGNORED_ACTION,
	} from 'state/actions/usersActions';

	function isPromise(value) {
	if (value !== null && typeof value === 'object') {
	return value && typeof value.then === 'function';
	}

	module.exports.init = function (swig) {
	/* ...Snip */

	/* Paste this at the end of the file */
	let oldGoogleImageSize;
	[googleImageSize, oldGoogleImageSize] =
	require(`${__dirname}/contentful/decorators/googleImageSize`)(googleImageSize);

	/* This is all the same... just here for context */
	swig.setFilter('upper', upper);

	WEBHOOK_SITE_NAME=playlab
	NETLIFY_DNS=www.playlab.org
	CONTENTFUL_SPACE_ID=XXXXXXXX
	CONTENTFUL_PERSONAL_ACCESS_TOKEN=CFPAT-XXXXXXXXXXXXXXXXX