- 2 hours (Level 1)
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.
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.
- You should have completed at least Level 1 of the Quote Server challenge before attempting this challenge.
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
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 to test your routes.
Each chat message is an object with the following properties:
| Name | Type | Example |
|---|---|---|
id |
number | 17 |
from |
string | "Neill" |
text |
string | "hi CYF! |
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
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)
For this level, your server must:
- reject requests to create messages if the message objects have an empty or missing
textorfromproperty.- In this case your server should return a status code of
400.
- In this case your server should return a status code of
(Advanced note: people don't actually agree on the best status code for this situation.)
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.
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
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.
If you want, you can also:
-
add support for the client to be able to update a message's
textorfromproperty. We'll cover this in the next week of the module, but you can research it easily. -
Your server should NOT update the
timeSenttimestamp property during an update, if the client passes it back to you.
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.
- 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.
- 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).
- You'll have to enable CORS on the express app (see note below)
- For how to post JSON, Read "Using Fetch", on MDN
- Host your react app on netlify
- Attach the link in your google classroom submission (along with your glitch server url)
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 installafter opening a terminal in the new project directory. -
Note that this repo was made by simply running
create-react-appexactly as you have done in the past. There is nothing special about it!
Here's an example of how your react app might look.
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 and in CORS in Express here.
| 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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent