A Node.js guestbook application, that allows all visitors of the website to leave a public comment without any sort of user registration.
This is a guestbook application created in March 2023.
It was made using and utilizing JavaScript, JSON, Node.js, Express (server framework), and a bit of EJS, HTML and CSS alongisde the Bootstrap and Pure.css libraries (for styling and layout purposes).
You can find this project's site by clicking here (GitHub) or here (Render).
When you arrive to the site, you're directed to the landing page, titled "Home". Above the content on this page, you can see a navigation menu. In this menu, there are four pages to choose from: "Home", "Guestbook", "New Entry", and "Ajax". You can go to any one of these sites by clicking its button on the aforementioned menu at the top of the page.
Once you've navigated to the site, you'll find yourself on the main landing page - 'Home'. From there— and, indeed, from any page— you can navigate to any of the other three pages (guestbook, new entry, ajax) in the navigation bar.
The 'Guestbook' page is the page that holds all the guestbook entries left by previous users. It holds a table with the name, country, and message of the user's message, as well as the date of the new message's original entry.
(Note: the the original dummy data's dates are formatted differently from the entries that have been created from my entry form and pushed to the JSON file holding the guestbook data. I tried changing the old dates to match my new, arguably more clear formatting, but when I did that the new dates showed up as inherently invalid, so they remain unchanged.)
The 'New Entry' page, as the name suggests, is the home of an entry form. This form (titled "New Guestbook Entry") asks the user to input a name, country, and message for the guestbook.
The form will not be submitted, if one of these three fields is empty. Once fields are filled and the submit button is pressed, the user data is pushed to the guestbook user entries' JSON file, which in turn is linked to the aforementioned table that displays all user entries.
The user, upon submitting the form, is automatically sent to the Guestbook page, where they can see their own entry as a new row in the table of past users' guestbook messages.
The 'Ajax' page displays a similar form, with the only difference being that rather than the submit button posting the form, it runs a JS code that collects the user input data and sends it to the backend as an AJAX-call and shows all the messages as a response to the page under the form itself. If there's an error, the form displays the text 'An error occurred'.
This is one of the three projects I created for my University's Full Stack course. The purpose of creating this guestbook was to better learn and understand things like creating web servers, routing, and Node.js development.
P1: Guestbook
P2: REST API (no UI)
P3: the REST API's UI/front-end
The development of this project is complete for the foreseeable future. Minor edits and bug fixes may yet occur, should any pop up!