Create an app that renders pages for the routes below using the provided wireframes.
We recommend working on the pages in the order the routes are listed.
Work on the nav bar (listed in More Comfortable below) in the wireframes after finishing other Base requirements.
Render HTML using EJS templates server-side.
Store data in JSON files on the backend.
Style the app with Bootstrap or an equivalent CSS library.
Make pages responsive, i.e. usable and attractive in mobile and desktop layouts. Work on mobile layouts first to avoid clutter in mobile layouts.
Render a form that will create a new sighting.
Accept a POST request to create a new sighting.
Render a single sighting.
Render a list of sightings.
Render a form to edit a sighting.
Accept a request to edit a single sighting
Accept a request to delete a sighting.
Render a list of sighting shapes.
Render a list of sightings that has one shape.
No GET Route for Delete Form
We will not implement a GET route to render a delete form because the delete form is integrated into the root (/) route. In the list of sightings, we will include a form with a single button on each row to delete that sighting.
Use the following wireframes as starting points for page layouts. Feel free to get creative!
Create sighting, view individual sighting, and view sighting list pages.
Edit sighting, view list of sighting shapes, and view list of sightings by shape pages.
Note that sighting report create time is distinct from the alleged sighting time.
Sighting Data Validation
When creating and editing sightings, run server-side logic that validates user input and rejects invalid input.
Abstract data validation functions so they can be reused for both creating and editing sightings.
Only Server-Side Validation Possible For Now
We have yet to learn how to run arbitrary logic on form input fields, meaning any data validation needs to happen server-side. In Module 4 we will learn about client-side validation, where we can validate form values before they are sent to the server.
Implement a navbar using Bootstrap or a similar CSS library to navigate between pages in our app.
Use a combination of server response data, EJS conditionals, and Bootstrap validation CSS classes to implement validation UI.
JSON File Storage Delete
Abstract the DELETE HTTP method's logic into a delete function in our JSON file storage module. GET, POST, and PUT methods' logic should already be handled by read, add, and edit functions in jsonFileStorage respectively.
Validate the user can't submit a sighting on a date in the future.