CodeYourFuture · bazmurphy · Aug 24, 2022 · Aug 24, 2022 · Aug 24, 2022 · Aug 29, 2022
diff --git a/README.md b/README.md
@@ -1,194 +1 @@
-# Challenge: A Chat Server
-
-### How long will this take?
-
-- 2 hours (Level 1)
-
-## Overview: what is this challenge?
-
-In this challenge you must make an Express app which provides an API to manage a list of chat messages, in JSON format.
-
-A simple front-end has been provided to allow you to test _some_ of the functionality.
-
-In the optional 'React' part of this challenge, you also make a React app which allows you to read, add and delete messages, backed by your new server.
-
-## Solution
-
-You can find the solution to this challenge here:
-
-https://github.com/CodeYourFuture/node-challenge-chat-server-solution
-
-Please ask your mentors for access to this repository.
-
-## Pre-reqs
-
-- [ ] You should have completed at least Level 1 of the Quote Server challenge before attempting this challenge.
-
-## Want to run your code on the internet?
-
-If you want to share your server with other people the easiest way to do this is to use Glitch
-
-- [ ] Make sure you're logged in to https://glitch.com/
-- [ ] Remix https://glitch.com/~cyf-chat-start
-- [ ] Name your new server `yourname-chat-server`
-- [ ] Make sure you're logged in so that it saves
-- [ ] Check that it is working by making a request to `/`
-- [ ] Take time to read the comments
-- [ ] Copy the code you've written to Glitch
-
-## Level 1 Challenge - make the chat server
-
-At this first level, your API must allow a client to:
-
-- [ ] Create a new message
-- [ ] Read all messages
-- [ ] Read one message specified by an ID
-- [ ] Delete a message, by ID
-
-* [ ] All message content should be passed as JSON.
-
-* [ ] Your routes should match the patterns established in class (RESTful). See the later spoiler section "Correct Routes" if you need the answer.
-
-You can use [this chat tester client](https://cyf-chat-tester.netlify.com/) to test your routes.
-
-### Data model
-
-Each chat message is an object with the following properties:
-
-| Name   | Type   | Example  |
-| ------ | ------ | -------- |
-| `id`   | number | 17       |
-| `from` | string | "Neill"  |
-| `text` | string | "hi CYF! |
-
-## Go ahead!
-
-If you think you know how to do that, go ahead!
-
-Try to use what you know to do this challenge on your own. It does not require any new knowledge.
-
-You may find useful the [express cheatsheet](https://github.com/nbogie/express-notes/blob/master/express-cheatsheet.md)
-
-## End of Level 1 challenge!
-
-Well done!
-
-What to do now:
-
-- [ ] _Don't_ post on slack, unless there's a thread announced specifically for it.
-- [ ] Instead, attach the URLs as links when you "mark done" your assignment in Google Classroom.
-- [ ] You might want to download your project for safekeeping. (Tools: Git, Import, and Export: Download Project)
-
-## Level 2 - simple validation
-
-For this level, your server must:
-
-- [ ] _reject_ requests to create messages if the message objects have an empty or missing `text` or `from` property.
-  - [ ] In this case your server should return a status code of `400`.
-
-(Advanced note: people don't actually agree on the best status code for this situation.)
-
-### A note on security
-
-There is intentionally no security or ownership of messages - anyone can delete one or all messages on your server.
-
-This is a big topic for further study. We won't try to cover it in this challenge.
-
-## Level 3 - more "read" functionality
-
-For this level your API _must_ also allow a client to:
-
-- [ ] Read _only_ messages whose text contains a given substring: `/messages/search?text=express`
-- [ ] Read only the most recent 10 messages: `/messages/latest`
-
-## Level 4 - Optional - add a timestamp, `timeSent`
-
-For this level, the server must:
-
-- [ ] store a timestamp in each message object, in a field called `timeSent`.
-- [ ] This should be set to the current time when the server first receives the message. This should be a DateTime object, which can be created with `new Date()`. It will NOT be submitted by the client.
-
-## Level 5 - Optional - add message _update_ functionality
-
-If you want, you can also:
-
-- [ ] add support for the client to be able to _update_ a message's `text` or `from` property. We'll cover this in the next week of the module, but you can research it easily.
-
-- [ ] Your server should NOT update the `timeSent` timestamp property during an update, if the client passes it back to you.
-
-## Challenge: Advanced: Add a React app as a front-end
-
-Note: only do this if you have done all other Node homework this week - including Levels 1-3 of this challenge. The priority during the node module is _node_!
-
-- [ ] Make a very simple React app called chat-react-app
-
-Note: Do not use `create-react-app` if you want your React code to be code-reviewed! Instead, you should:
-
-- [ ] fork our starting repo. See "How should I start my React app", below.
-
-#### Your UI should at least:
-
-- [ ] Display the latest messages on load
-- [ ] Provide a "see latest" button to fetch and display the latest messages
-- [ ] Provide a "delete" button or a clickable icon next to each message.
-  - [ ] When clicked this should delete the message from the server and then from the local display.
-
-#### Optionally, your UI may also:
-
-- [ ] Load and re-display the latest messages every 30 seconds.
-- [ ] Allow the user to use as much as possible of the back-end that you developed in levels 1-4 (e.g. message search).
-
-#### Don't forget:
-
-- [ ] You'll have to enable CORS on the express app (see note below)
-  - For how to post JSON, Read ["Using Fetch", on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
-- [ ] Host your react app on netlify
-- [ ] Attach the link in your google classroom submission (along with your glitch server url)
-
-#### How should I start my React app?
-
-To make code review easier for us, please:
-
-- [ ] fork our starting repo. (You can later create a PR when you want a code review.)
-
-The repo is here: https://github.com/CodeYourFuture/cyf-chat-react
-
-- [ ] Follow the "Making a Pull Request" guide on https://codeyourfuture.github.io/syllabus-master/others/making-a-pull-request.html
-
-- [ ] Then run `npm install` after opening a terminal in the new project directory.
-
-- Note that this repo was made by simply running `create-react-app` exactly as you have done in the past. There is nothing special about it!
-
-### Example screenshot of Simple React app
-
-Here's an example of how your react app might look.
-
-![Example Screenshot of React App](./screenshots/example_react_chat_app.png)
-
-#### Enabling CORS on the Express app
-
-You'll have to install and enable CORS on your server in order to allow your JSON to be loaded from a different server than your React app has been loaded from.
-
-(Your react app has probably been loaded from the `netlify.com` domain and your server is at `glitch.me`).
-
-On your express project on glitch, edit your `package.json` to add a dependency for the latest version of cors (e.g. `"cors": "^2.8.5"`)
-
-Then in your `server.js` add...
-
-`const cors = require('cors')`
-
-and
-
-`app.use(cors())`
-
-Read more or CORS [here](https://codeyourfuture.github.io/syllabus-master/others/cors.html)
-and in CORS in Express [here](https://expressjs.com/en/resources/middleware/cors.html).
-
-### Spoiler: Correct Routes
-
-| method | example path   | behaviour              |
-| ------ | -------------- | ---------------------- |
-| GET    | `/messages`    | return all messages    |
-| GET    | `/messages/17` | get one message by id  |
-| POST   | `/messages`    | create a new message   |
-| DELETE | `/messages/17` | delete a message by id |
+<a href="https://cyf-bazmurphy-chat-server.glitch.me" target="_blank">https://cyf-bazmurphy-chat-server.glitch.me</a>
diff --git a/index.html b/index.html
@@ -1,26 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <title>Welcome to CYF Chat</title>
-  </head>
-  <body>
-    <h1>
-      CYF Chat
-    </h1>
-    <h2>
-      Send a message
-    </h2>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="index.css">
+  <title>Chat Server</title>
+</head>
+<body>
+  <div id="container">
+    <div class="header">
+      <span class="header-emojis">👥💬</span>
+      <h1 class="header-title">Chat Server</h1>
+    </div>
+    <div id="routes">
+        <span class="route-heading">Method</span><span class="route-heading">Route</span><span class="route-heading">Result</span><span class="route-heading">Example</span>
+        <span>GET</span><span>/</span><span>get this page (index.html)</span><a href="/">/</a>
+        <span>GET</span><span>/messages</span><span>get all messages</span><a href="/messages" target="iframe">/messages</a>
+        <span>GET</span><span>/messages/id</span><span>get one message by its ID</span><a href="/messages/0" target="iframe">/messages/0</a>
+        <span>GET</span><span>/messages/search?text=_____</span><span>get only messages which contain the search text</span><a href="/messages/search?text=hello" target="iframe">/messages/search?text=hello</a>
+        <span>GET</span><span>/messages/latest</span><span>get only the ten most recent messages</span><a href="/messages/latest" target="iframe">/messages/latest</a>
+        <span>POST</span><span>/messages</span><span>add one message to the data</span><span>use form below</span>
+        <span>DELETE</span><span>/messages/:id</span><span>delete one message by its ID</span><span>/messages/1<br>use postman</span>
+        <!-- <span>PUT</span><span>/messages/:id</span><span>update one message by its ID</span><span>/messages/1<br>use postman</span> -->
+    </div>
     <form action="/messages" method="post">
-      <p>
-        Name: <input type="text" name="from" placeholder="Your Name" /> <br />
-        Message: <input type="text" name="text" placeholder="The message..." />
-        <br />
-      </p>
-      <button type="submit">
-        Send
-      </button>
+        <h2>Send A Message</h2>
+        <label for="from">Name:</label>
+        <input type="text" name="from" placeholder="Your Name" />
+        <!-- removed "required" from input^-->
+        <label for="text">Message:</label>
+        <input type="text" name="text" placeholder="The Message..." />
+        <!-- removed "required" from input^-->
+        <button type="submit">Send Message</button>
     </form>
-
-    <a href="/messages">See all messages</a>
-  </body>
-</html>
+    <iframe name="iframe"></iframe>
+    <div>
+        <!-- info -->
+    </div>
+  </div>
+</body>
+</html>
diff --git a/GRADING.md → instructions/GRADING.md b/GRADING.md → instructions/GRADING.md
diff --git a/HOW-TO-GET-HELP.md → instructions/HOW-TO-GET-HELP.md b/HOW-TO-GET-HELP.md → instructions/HOW-TO-GET-HELP.md
diff --git a/HOW-TO-SUBMIT.md → instructions/HOW-TO-SUBMIT.md b/HOW-TO-SUBMIT.md → instructions/HOW-TO-SUBMIT.md
diff --git a/HOW_TO_MARK.md → instructions/HOW_TO_MARK.md b/HOW_TO_MARK.md → instructions/HOW_TO_MARK.md