diff --git a/README.md b/README.md
new file mode 100644
index 0000000..cececf2
--- /dev/null
+++ b/README.md
@@ -0,0 +1,148 @@
+# Cat Bookmarker
+My submission for the software developer assessment consumes JSON
+representations of cat images accessible via the [Cataas](https://cataas.com)
+API, the links to which can be permanetly stored in a bookmark database.
+
+## Details
+The form submits four pieces of data:
+ - `category`: The name of the category the bookmark will be stored under
+ - `notes`: Any extra details, stored as a single string
+ - `remote_id`: The ID of the resource accessible via Cataas' API
+ ` `creator`: A pseudo-anonymous integer ID representing the actor bookmarking the image
+
+The first two are literally HTML input elements. The third is selected randomly by repeatedly pressing the "Show New Cat" button. The third is represented by a route both in Phoenix and using React Router.
+
+The tech stack for this project is as follows:
+ - Elixir, the back-end programming language
+ - Phoenix, which is the Ruby On Rails of Elixir
+ - PostgreSQL as the database
+ - React for the front-end
+
+The front-end of this project is a single-page app that uses React Router to navigate between the two "pages."
+
+All of the API endpoints are under the `/api/v1/` route, and since this project only really does bookmarking, all of them ended up being under `/api/v1/bookmark`. The three required routes are as followes, followed by the other routes I added for convenience:
+ - POST /api/v1/bookmark - Accepts a JSON payload with keys `remote_id`, `notes`, and `category` and stores it in the database.
+ - GET /api/v1/bookmark/single/:id - Returns a single bookmark with the given ID. If The user doesn't have any bookmarks with that ID, the server returns an error with a 404 status code.
+ - GET /api/v1/bookmark - Returns all of the user's bookmarks.
+ - DELETE /api/v1/bookmark/:id - Deletes the bookmark
+ - GET /api/v1/bookmark/category/:category - Returns all bookmarks in `:category`
+ - GET /api/v1/bookmark/categories - Returns an array of strings, each representing the name of a category that has at least one bookmark
+
+### Rudimentary authentication
+Accounts are generated in the same way some conferencing software gives users semi-private meeting rooms represented by a random string of words. That way, anyone with the link can access it, but it's not particularly easy to find a given room without knowing the string of words in advance.
+
+I didn't feel like putting together a large dictionary of words, so I just used JavaScript's pseudo-random number generator to generate a probably-unique user ID (or at least, there's only a one in a million chance of a clash).
+
+The user's page is accessible by accessing the `/u/:id` route, where `:id` is the user's ID number
+
+When making calls to the API, the client passes an `Authorization` header to their request including their ID, such as `Authorization: Basic 1234...`. If this header is omitted or malformed, the server returns a 401 status code. Not production-grade by any meanse, but not bad for a cat bookmarking app.
+
+## Running the server
+To run the server, you'll need Elixir installed on your device, which depends
+on Erlang. Detailed instructions on how to install Elixir and Erlang can be
+found on [the Elixir website](https://elixir-lang.org/install.html). In most
+cases, installing Elixir will get you a copy of Erlang as well.
+
+Additionally, you'll need to have PostgreSQL installed and running. You can
+find information on installing PostgreSQL on
+[it's website](https://www.postgresql.org/download/) as well. This project is
+set up to assume that the database username is "postgres" and the password is
+"postgres"
+
+```bash
+$ cd bookmarker
+$ mix deps.get # Install Elixir dependencies
+$ mix ecto.migrate # Set up the database
+$ cd assets
+$ npm install # Install Node dependencies
+$ cd ..
+$ mix phx.server # Run the server
+```
+
+You can then navigate to localhost:4000 to find the front end of the
+application.
+
+## Reading the code
+Phoenix automatically generates a lot of stuff that isn't really relevant to
+this project, so there's really only a few places you need to focus on.
+
+ - bookmarker/
+ - lib/ - All of the back-end code
+ - bookmarker/bookmarker.ex - the description of the database entries
+ - bookmarker_web/
+ - router.ex - The routes for the API and UI
+ - controllers/app_controller.ex - The functions that control what
+ happens when a client accesses a route in the UI
+ - controllers/api_controller.ex - The functions that control what
+ happens when a client accesses a route in the API
+ - assets/ - All of the front-end code
+ - js/app.js - The main JavaScript file containing the root React
+ component and routing information
+ - js/home.js - The home page component
+ - js/bookmarks.js - The component for the page used to bookmark cats
+ and review bookmarks by category
+ - css/app.css - All of the application's styles
+
+
+## Possible improvements
+
+### Security
+In some places, API requests to resources not owned by the user will return a
+message along the lines of "you cannot access other people's resources." It
+would probably be a better practice to simply return a 404 status code and tell
+the client the resource cannot be found in these places, as implying that the
+client has stumbled upon another user's resources could potentially be
+compromising.
+
+The decision to use integers to represent users was arbitrary. I very well could
+have used alpha-numeric strings or, even better, a series of four or five random
+words. With a large enough dictionary, using a string of words would improve
+security and memorability.
+
+That being said, the biggest issue with using Authorization headers is that if
+the connection isn't being made over HTTPS, then confidential information is
+being traded in plaintext. Either additional steps would have to be taken to
+prevent snooping or an alternative, more rigorous method of user-management
+would have to be put into effect to ensure the security of everyone's cat
+bookmarks.
+
+### Efficiency
+The front-end being a single-page app presents some issues. Particularly, you
+can't directly access `localhost:4000/u/:id` without confusing Phoenix, because
+`/u/:id` isn't a real route. To get around this, I made the hack-ish decision
+to redirect that route to `/?u=:id` and then have the Home component listen for
+query parameters before redirecting the client again to the page they're looking
+for. While this works, it's kind of gross and inefficient. There isn't really
+any need for this project to be a single-page app. It'd perhaps do even better
+with a separate page for the two routes.
+
+In a production environment, more thought would need to go into how many
+connections to the database ought to be pooled to prevent a bottleneck.
+
+React is a fairly big blob of JavaScript to use in such a simple project. I
+could probably do away with it entirely if I was willing to put up with vanilla
+JS, or use a lightweight alternative like Preact. Alternatively, I could have
+also chosen to do more on the server-side instead of leaving everything short of
+the API up to the client.
+
+### Functional improvements
+Some functions that control what happens when a client navigates to a route do
+dangerous actions, such as ignoring potential errors that seem unlikely instead
+of handling them. This code should be replaced with better error-handling
+mechanisms on the off-chance that they do actually come up.
+
+There should be more custom error pages implemented, particularly in the case
+of the user-facing interface. The user should never be presented with a complete
+stack trace, for example.
+
+## Deployment considerations
+Elixir is well known for being able to accomplish quite a bit with limited
+resources. Many Phoenix projects run just as well on a Raspberry PI as they do
+on any other device. However, as someone who's tried to self-host services built
+using the Phoenix framework, I find that managing the dependencies can be a bit
+of a nightmare. That's one major advantage that the Express/Node pairing has
+over Phoenix and Elixir: it's everywhere. You'd be hard pressed to find a
+developer who doesn't have Node installed on their computer.
+
+In cases like this, I like to look for containerized versions of the services,
+usually through Docker. It's much easier to manage that way.
diff --git a/bookmarker/.formatter.exs b/bookmarker/.formatter.exs
new file mode 100644
index 0000000..8a6391c
--- /dev/null
+++ b/bookmarker/.formatter.exs
@@ -0,0 +1,5 @@
+[
+ import_deps: [:ecto, :phoenix],
+ inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs}"],
+ subdirectories: ["priv/*/migrations"]
+]
diff --git a/bookmarker/.gitignore b/bookmarker/.gitignore
new file mode 100644
index 0000000..a618305
--- /dev/null
+++ b/bookmarker/.gitignore
@@ -0,0 +1,34 @@
+# The directory Mix will write compiled artifacts to.
+/_build/
+
+# If you run "mix test --cover", coverage assets end up here.
+/cover/
+
+# The directory Mix downloads your dependencies sources to.
+/deps/
+
+# Where 3rd-party dependencies like ExDoc output generated docs.
+/doc/
+
+# Ignore .fetch files in case you like to edit your project deps locally.
+/.fetch
+
+# If the VM crashes, it generates a dump, let's ignore it too.
+erl_crash.dump
+
+# Also ignore archive artifacts (built via "mix archive.build").
+*.ez
+
+# Ignore package tarball (built via "mix hex.build").
+bookmarker-*.tar
+
+# Ignore assets that are produced by build tools.
+/priv/static/assets/
+
+# Ignore digested assets cache.
+/priv/static/cache_manifest.json
+
+# In case you use Node.js/npm, you want to ignore these.
+npm-debug.log
+/assets/node_modules/
+
diff --git a/bookmarker/README.md b/bookmarker/README.md
new file mode 100644
index 0000000..775a717
--- /dev/null
+++ b/bookmarker/README.md
@@ -0,0 +1,19 @@
+# Bookmarker
+
+To start your Phoenix server:
+
+ * Install dependencies with `mix deps.get`
+ * Create and migrate your database with `mix ecto.setup`
+ * Start Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server`
+
+Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
+
+Ready to run in production? Please [check our deployment guides](https://hexdocs.pm/phoenix/deployment.html).
+
+## Learn more
+
+ * Official website: https://www.phoenixframework.org/
+ * Guides: https://hexdocs.pm/phoenix/overview.html
+ * Docs: https://hexdocs.pm/phoenix
+ * Forum: https://elixirforum.com/c/phoenix-forum
+ * Source: https://github.com/phoenixframework/phoenix
diff --git a/bookmarker/assets/babel.config.js b/bookmarker/assets/babel.config.js
new file mode 100644
index 0000000..7e6d346
--- /dev/null
+++ b/bookmarker/assets/babel.config.js
@@ -0,0 +1,14 @@
+module.exports = function (api) {
+ api.cache(true);
+
+ const presets = [
+ "@babel/preset-env'",
+ "@babel/preset-react",
+ ];
+ const plugins = [];
+
+ return {
+ presets,
+ plugins
+ };
+}
diff --git a/bookmarker/assets/css/app.css b/bookmarker/assets/css/app.css
new file mode 100644
index 0000000..c1a51d0
--- /dev/null
+++ b/bookmarker/assets/css/app.css
@@ -0,0 +1,202 @@
+/* This file is for your main application CSS */
+/*@import "./phoenix.css";*/
+
+.inline { display: inline; }
+.center-text { text-align: center; }
+.center-box-inner {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+body {
+ font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+h1,h2,h3,h4,h5,h6 {
+ font-family: "Lucida Console", Monaco, monospace;
+}
+
+h2 { font-size: 2em; }
+
+img {
+ height: 50vh;
+}
+
+button {
+ padding: 10px;
+ margin: 5px;
+ background-color: #bde0fe;
+}
+
+button:hover { background-color: #a2d2ff; }
+
+button.active { background-color: #ffc8dd; }
+button.active:hover { background-color: #ffafcc }
+
+.main-container {
+ width: 70%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.random-image {
+ display: block;
+}
+
+.form-container {
+ width: 500px;
+ max-width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.form-label {
+ margin-bottom: 5px;
+}
+
+input {
+ font-family: "Lucida Console", Monaco, monospace;
+ width: 100%;
+ padding: 10px;
+}
+
+button.form-submit-button {
+ min-width: 40%
+}
+
+img.collection-image {
+ height: auto;
+ max-width: 75%;
+}
+
+p.collection-note {
+ font-style: italic;
+}
+
+.collection-item-caption {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-top: 5px;
+ margin-bottom: 20px;
+}
+
+/* Alerts and form errors used by phx.new */
+.alert {
+ padding: 15px;
+ margin-bottom: 20px;
+ border: 1px solid transparent;
+ border-radius: 4px;
+}
+.alert-info {
+ color: #31708f;
+ background-color: #d9edf7;
+ border-color: #bce8f1;
+}
+.alert-warning {
+ color: #8a6d3b;
+ background-color: #fcf8e3;
+ border-color: #faebcc;
+}
+.alert-danger {
+ color: #a94442;
+ background-color: #f2dede;
+ border-color: #ebccd1;
+}
+.alert p {
+ margin-bottom: 0;
+}
+.alert:empty {
+ display: none;
+}
+.invalid-feedback {
+ color: #a94442;
+ display: block;
+ margin: -1rem 0 2rem;
+}
+
+/* LiveView specific classes for your customization */
+.phx-no-feedback.invalid-feedback,
+.phx-no-feedback .invalid-feedback {
+ display: none;
+}
+
+.phx-click-loading {
+ opacity: 0.5;
+ transition: opacity 1s ease-out;
+}
+
+.phx-loading{
+ cursor: wait;
+}
+
+.phx-modal {
+ opacity: 1!important;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgba(0,0,0,0.4);
+}
+
+.phx-modal-content {
+ background-color: #fefefe;
+ margin: 15vh auto;
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%;
+}
+
+.phx-modal-close {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+.phx-modal-close:hover,
+.phx-modal-close:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.fade-in-scale {
+ animation: 0.2s ease-in 0s normal forwards 1 fade-in-scale-keys;
+}
+
+.fade-out-scale {
+ animation: 0.2s ease-out 0s normal forwards 1 fade-out-scale-keys;
+}
+
+.fade-in {
+ animation: 0.2s ease-out 0s normal forwards 1 fade-in-keys;
+}
+.fade-out {
+ animation: 0.2s ease-out 0s normal forwards 1 fade-out-keys;
+}
+
+@keyframes fade-in-scale-keys{
+ 0% { scale: 0.95; opacity: 0; }
+ 100% { scale: 1.0; opacity: 1; }
+}
+
+@keyframes fade-out-scale-keys{
+ 0% { scale: 1.0; opacity: 1; }
+ 100% { scale: 0.95; opacity: 0; }
+}
+
+@keyframes fade-in-keys{
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+
+@keyframes fade-out-keys{
+ 0% { opacity: 1; }
+ 100% { opacity: 0; }
+}
diff --git a/bookmarker/assets/css/phoenix.css b/bookmarker/assets/css/phoenix.css
new file mode 100644
index 0000000..0d59050
--- /dev/null
+++ b/bookmarker/assets/css/phoenix.css
@@ -0,0 +1,101 @@
+/* Includes some default style for the starter application.
+ * This can be safely deleted to start fresh.
+ */
+
+/* Milligram v1.4.1 https://milligram.github.io
+ * Copyright (c) 2020 CJ Patoilo Licensed under the MIT license
+ */
+
+*,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{color:#000000;font-family:'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:1.6}blockquote{border-left:0.3rem solid #d1d1d1;margin-left:0;margin-right:0;padding:1rem 1.5rem}blockquote *:last-child{margin-bottom:0}.button,button,input[type='button'],input[type='reset'],input[type='submit']{background-color:#0069d9;border:0.1rem solid #0069d9;border-radius:.4rem;color:#fff;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:700;height:3.8rem;letter-spacing:.1rem;line-height:3.8rem;padding:0 3.0rem;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}.button:focus,.button:hover,button:focus,button:hover,input[type='button']:focus,input[type='button']:hover,input[type='reset']:focus,input[type='reset']:hover,input[type='submit']:focus,input[type='submit']:hover{background-color:#606c76;border-color:#606c76;color:#fff;outline:0}.button[disabled],button[disabled],input[type='button'][disabled],input[type='reset'][disabled],input[type='submit'][disabled]{cursor:default;opacity:.5}.button[disabled]:focus,.button[disabled]:hover,button[disabled]:focus,button[disabled]:hover,input[type='button'][disabled]:focus,input[type='button'][disabled]:hover,input[type='reset'][disabled]:focus,input[type='reset'][disabled]:hover,input[type='submit'][disabled]:focus,input[type='submit'][disabled]:hover{background-color:#0069d9;border-color:#0069d9}.button.button-outline,button.button-outline,input[type='button'].button-outline,input[type='reset'].button-outline,input[type='submit'].button-outline{background-color:transparent;color:#0069d9}.button.button-outline:focus,.button.button-outline:hover,button.button-outline:focus,button.button-outline:hover,input[type='button'].button-outline:focus,input[type='button'].button-outline:hover,input[type='reset'].button-outline:focus,input[type='reset'].button-outline:hover,input[type='submit'].button-outline:focus,input[type='submit'].button-outline:hover{background-color:transparent;border-color:#606c76;color:#606c76}.button.button-outline[disabled]:focus,.button.button-outline[disabled]:hover,button.button-outline[disabled]:focus,button.button-outline[disabled]:hover,input[type='button'].button-outline[disabled]:focus,input[type='button'].button-outline[disabled]:hover,input[type='reset'].button-outline[disabled]:focus,input[type='reset'].button-outline[disabled]:hover,input[type='submit'].button-outline[disabled]:focus,input[type='submit'].button-outline[disabled]:hover{border-color:inherit;color:#0069d9}.button.button-clear,button.button-clear,input[type='button'].button-clear,input[type='reset'].button-clear,input[type='submit'].button-clear{background-color:transparent;border-color:transparent;color:#0069d9}.button.button-clear:focus,.button.button-clear:hover,button.button-clear:focus,button.button-clear:hover,input[type='button'].button-clear:focus,input[type='button'].button-clear:hover,input[type='reset'].button-clear:focus,input[type='reset'].button-clear:hover,input[type='submit'].button-clear:focus,input[type='submit'].button-clear:hover{background-color:transparent;border-color:transparent;color:#606c76}.button.button-clear[disabled]:focus,.button.button-clear[disabled]:hover,button.button-clear[disabled]:focus,button.button-clear[disabled]:hover,input[type='button'].button-clear[disabled]:focus,input[type='button'].button-clear[disabled]:hover,input[type='reset'].button-clear[disabled]:focus,input[type='reset'].button-clear[disabled]:hover,input[type='submit'].button-clear[disabled]:focus,input[type='submit'].button-clear[disabled]:hover{color:#0069d9}code{background:#f4f5f6;border-radius:.4rem;font-size:86%;margin:0 .2rem;padding:.2rem .5rem;white-space:nowrap}pre{background:#f4f5f6;border-left:0.3rem solid #0069d9;overflow-y:hidden}pre>code{border-radius:0;display:block;padding:1rem 1.5rem;white-space:pre}hr{border:0;border-top:0.1rem solid #f4f5f6;margin:3.0rem 0}input[type='color'],input[type='date'],input[type='datetime'],input[type='datetime-local'],input[type='email'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='url'],input[type='week'],input:not([type]),textarea,select{-webkit-appearance:none;background-color:transparent;border:0.1rem solid #d1d1d1;border-radius:.4rem;box-shadow:none;box-sizing:inherit;height:3.8rem;padding:.6rem 1.0rem .7rem;width:100%}input[type='color']:focus,input[type='date']:focus,input[type='datetime']:focus,input[type='datetime-local']:focus,input[type='email']:focus,input[type='month']:focus,input[type='number']:focus,input[type='password']:focus,input[type='search']:focus,input[type='tel']:focus,input[type='text']:focus,input[type='url']:focus,input[type='week']:focus,input:not([type]):focus,textarea:focus,select:focus{border-color:#0069d9;outline:0}select{background:url('data:image/svg+xml;utf8,
+
+
+
+);
diff --git a/bookmarker/assets/js/bookmarks.js b/bookmarker/assets/js/bookmarks.js
new file mode 100644
index 0000000..da1e083
--- /dev/null
+++ b/bookmarker/assets/js/bookmarks.js
@@ -0,0 +1,243 @@
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+
+const cataas = (endpoint) => "https://cataas.com" + endpoint;
+const bookmarker = (endpoint) => "http://localhost:4000/api/v1" + endpoint;
+
+const Bookmarks = (props) => {
+ // This gives us access to the :id in /u/:id
+ const { id } = useParams();
+
+ // For standard headers in all Bookmarker requests
+ const headers = {
+ "Authorization": "Basic " + id,
+ };
+
+ // The object describing the randomly fetched cat image
+ const [randomCat, setRandomCat] = useState(null);
+
+ // The state of the CreateNewBookmark form
+ const [formState, setFormState] = useState({
+ category: "",
+ notes: "",
+ });
+
+ // The list of all categories that exist in the database
+ const [categories, setCategories] = useState([]);
+
+ // The collection of which posts are being shown
+ const [activeCategory, setActiveCategory] = useState(null);
+ const [categoryCollection, setCategoryCollection] = useState([]);
+
+ // This gets run once and then never again, doing initial setup for our
+ // component
+ useEffect(() => {
+ // Fetch and render a random cat picture
+ showNewCat();
+
+ // Fetch the list of categories with more than one bookmark
+ getAllCategories();
+ }, []);
+
+ // When the active collection is changed, do this
+ useEffect(() => {
+ (async () => {
+ // This should only be run if an activeCategory has been selected
+ if (activeCategory != null) {
+ const req = await fetch(
+ bookmarker("/bookmark/category/" + activeCategory),
+ { headers }
+ );
+
+ // Update the state with the resultant JSON object
+ setCategoryCollection(await req.json());
+ }
+ })();
+ }, [activeCategory]);
+
+ const showNewCat = async () => {
+ // First, reset the cat picture. This will briefly rerender the
+ // paragraph saying that the image is loading
+ setRandomCat(null);
+
+ const req = await fetch(cataas("/cat?json=true"));
+ setRandomCat(await req.json());
+ };
+
+ const getAllCategories = async () => {
+ const req = await fetch(
+ bookmarker("/bookmark/categories"), { headers });
+ setCategories(await req.json());
+ };
+
+ const chooseCategory = (category) => {
+ setActiveCategory(category);
+ }
+
+ const bookmarkCat = async () => {
+ const req = await fetch(bookmarker("/bookmark"), {
+ method: "POST",
+ headers: {...headers,
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify({ ...formState, remote_id: randomCat.id })
+ });
+
+ // Update the category list in case a new one was added
+ await getAllCategories();
+
+ // Reset the form fields
+ setFormState({
+ category: "",
+ notes: "",
+ });
+
+ // Show a new cat
+ await showNewCat();
+ };
+
+ const removeBookmark = async (id) => {
+ const req = await fetch(bookmarker("/bookmark/" + id), {
+ headers,
+ method: "DELETE",
+ });
+
+ // Filter out the deleted bookmark and then reload the component
+ setCategoryCollection(categoryCollection.filter(c => c.id != id));
+ };
+
+ return (
+
+
Random Cat
+
+
+
+
+ Show New Cat
+
+
+
+
+
+ Like this cat? Bookmark them.
+
+
+
Browse your collections
+
+
+ { activeCategory != null && categoryCollection.length > 0
+ ?
+ : <>
+ }
+
callback(category) }>
+ { category }
+
+ )
+ : Nothing to show
+ }
+
+ );
+};
+
+// Renders a list of photos followed by their notes
+const BookmarkCollection = ({
+ bookmarks,
+ removeCallback
+}) => bookmarks.map((b, i) =>
+
+
+
+
removeCallback(b.id) }>
+ 🗑️
+
+ { b.notes != null && b.notes.length > 0
+ ?
{ b.notes }
+ : <>
+ }
+
+
+
Welcome to Cat Bookmarker
+
+ Cat Bookmarker is a tool that serves random cat images from
+ the Cataas (Cat As A Service)
+ API and invites you to bookmark the ones you like so that you
+ can come back to them later. You can categorize your cat photos
+ with user-generated tags and you can leave a note to remind
+ yourself why you liked the cat so much in the first place.
+
+
+
+ Cat Bookmarker features a very rudimentary user authentication
+ system using randomly generated user IDs and HTTP Authorization
+ headers. Every number that won't cause an integer overflow is
+ a valid user that has its own bookmarks and categories.
+
+
+ { /* Only render the new URL once it's generated */ }
+ { randomURL != null
+ ?
+ Don't already have an account? Try:
+ : <>
+ }
+
diff --git a/bookmarker/lib/bookmarker_web/templates/layout/app.html.heex b/bookmarker/lib/bookmarker_web/templates/layout/app.html.heex
new file mode 100644
index 0000000..169aed9
--- /dev/null
+++ b/bookmarker/lib/bookmarker_web/templates/layout/app.html.heex
@@ -0,0 +1,5 @@
+
+ <%= get_flash(@conn, :info) %>
+ <%= get_flash(@conn, :error) %>
+ <%= @inner_content %>
+
diff --git a/bookmarker/lib/bookmarker_web/templates/layout/live.html.heex b/bookmarker/lib/bookmarker_web/templates/layout/live.html.heex
new file mode 100644
index 0000000..a29d604
--- /dev/null
+++ b/bookmarker/lib/bookmarker_web/templates/layout/live.html.heex
@@ -0,0 +1,11 @@
+
+ <%= live_flash(@flash, :info) %>
+
+ <%= live_flash(@flash, :error) %>
+
+ <%= @inner_content %>
+
diff --git a/bookmarker/lib/bookmarker_web/templates/layout/root.html.heex b/bookmarker/lib/bookmarker_web/templates/layout/root.html.heex
new file mode 100644
index 0000000..ed2120d
--- /dev/null
+++ b/bookmarker/lib/bookmarker_web/templates/layout/root.html.heex
@@ -0,0 +1,15 @@
+
+
+
+