You will be building a message board where users can post and view messages. This application will include the ability to:
- view all posted messages from the database
- post a new message to the database
- delete messages in the database if authenticated
You are not given any code to test your application, but we will run tests on your Pull Request. In order for these tests to run properly, please adhere to the following:
- While you are free to add any additional files you want, do not edit the file structure or delete existing files
- Likewise you can add additional HTML elements, IDs, and classes, but do not remove existing hardcoded HTML elements/attributes
- If you are told to send or display a certain string or to name a file or function a certain name, copy-paste the string exactly as it is shown. Alternate text or differing capitalization will fail the tests.
- Run your server and test out your application before submitting! Even if things are not working 100% correctly, you should be able to catch and remove any syntax or reference errors just by running your application
- You are free to edit the stylesheet as you please!
For this part you will be editing the server/server.js
file.
- Create a Node.js HTTP server that listens on port 3434. (You may use Express if you'd like, but it is not necessary.)
- When you visit
http://localhost:3434/
in the browser, it should serve theindex.html
file from theviews
folder. This is the message board. - You should also serve the CSS and JS that the html files are requesting. These are located in the
assets
folder. Make sure theContent-Type
header is getting properly set in the HTTP response. (Some methods from some frameworks infer the content type from the file extension and set the header automatically.)
Your message board application would be useless without a database to hold onto the messages between sessions.
In the server/models/MessageModel.js
file, implement a database in either MongoDB or PostgresQL (Mongoose/Sequelize optional) as follows:
- We want to store our data in a collection/table called
Message
. (Remember, this may be created as the pluralMessages
- that is fine.) - All items in the database must have a property
message
which is a string - All items must also have a property
password
which is a string - Additionally, all items should be stored with the time they were
created_at
. This should default to now
In the server/controllers/messageController.js
file, add the following functionality to the exported controller. (These will be server middleware/final handler functions, so they should take the appropriate parameters and perform the necessary callback operations.):
- Function
postMessage
should create a new item in the database - Function
getMessages
should retrieve all items from the database and send it back to the client as JSON - Function
deleteMessage
should find items in the database based on an ID number and delete themessage
if it exists. (Later, you will be asked to authenticate before deleting the message.)
You are serving index.js
to the client for use on the page, but there is not much existing functionality. Add code to achieve the following:
- After the page has initially loaded, all messages from the database should be displayed as list items in the
#message-list
element. These list items should display the message item followed by abutton
(inside the list item) with a class ofdel
and display the wordDelete
. As an example, one list item might look like<li>This is a great message!<button class="del">Delete</button></li>
- The application should poll for new messages from the database every two seconds and display them. Messages should not display in the list multiple times
- Clicking on the button to add a message should take the text from the text area and the password input field to create a new message in the database. If either field is empty, the message should not be sent to the server. (Validate on the frontend.) This message should be appear on the next poll. (Optionally, you can display the new message immediately after adding.)
- Clicking on any list item's
Delete
button should remove the item from the database. (Later, you will authenticate before deleting.) The message should be deleted from the DOM on the next poll. (Optionally, you may remove it immediately after it is deleted from the database.)
By now, your server should serve the static assets and the index page. Add additional routes to achieve the following functionality (if you haven't done so already):
- Create the routes to tie the client-side JavaScript events to the appropriate database functions
Modify your code to enforce the following authentication measures. (Use the server/controllers/authController.js
file to add any middleware functions):
- Upon successful posting of a new message with a password, the server should set a cookie on the client with a key of
pass
and a value of the provided password in plaintext. (Obviously, this should never be done in real applications.) Additional posts with different passwords will overwrite the value of the cookie on the client. - Whenever a user tries to delete a message, the server should check if the cookie contains a
pass
that matches the password stored with the given message before allowing the message to be deleted. If the password does not match or is not provided in the cookie, nothing should happen.