Overarching Project
At this point, the overarching project has an API and a UI. The API is built with Deno, Hono, and PostgreSQL, and the UI is built with Svelte. To summarize, the API endpoints and the UI functionality at this point are as follows:
API Endpoints
The API endpoints are divided into course endpoints and question endpoints. The course endpoints are responsible for managing courses, while the question endpoints are responsible for managing questions related to courses. The API endpoints validate the request contents and are as follows.
Course endpoints
- GET /api/courses
Returns a JSON document with courses retrieved from the database. The document structure is as follows:
[
{ "id": 1, "name": "Web Software Development" },
{ "id": 2, "name": "Device-Agnostic Design" }
]- GET /api/courses/:id
Returns a JSON document with a single course from the database identified by the path variable. The document structure is as follows (where “:id” corresponds to the id of the course):
{ "id": :id, "name": "Course Name" }- POST /api/courses
Creates a course and returns a JSON document with the created course. The sample document structure is as follows:
{ "id": 3, "name": "Course Name" }- DELETE /api/courses/:id
Deletes the course from the database that corresponds to the id and returns the deleted course as a JSON object. The sample document structure (where :id corresponds to the id of the deleted course) is as follows:
{ "id": :id, "name": "Course Name" }Question endpoints
- GET /api/courses/:id/questions
Returns a JSON document with the list of questions for the course identified with ‘:id’. The sample document structure (where :id corresponds to the id of the course) is as follows:
[
{ "id": 1, "title": "Question 1 title", "text": "Question 1 text", "upvotes": 0, "courseId": ":id" },
{ "id": 2, "title": "Question 2 title", "text": "Question 2 text", "upvotes": 0, "courseId": ":id" }
]- POST /api/courses/:id/questions
Adds a new question to the course identified with ‘:id’ and returns the added question. The sample document structure (where :id corresponds to the id of the course) is as follows:
{ "id": 3, "title": "Question title", "text": "Question text", "upvotes": 0, "courseId": ":id" }- POST /api/courses/:id/questions/:qId/upvote
Updates the database to increase the “upvotes” count of the question identified by the course id “:id” and the question id “:qId” by one, and returns the question as a JSON document. The sample document structure (where :id corresponds to the id of the course and :qId corresponds to the id of the question) is as follows:
{ "id": :qId, "title": "Question title", "text": "Question text", "upvotes": 1, "courseId": ":id" }- DELETE /api/courses/:id/questions/:qId
Removes the question identified by the course id “:id” and the question id “:qId” from the database, and returns a JSON document that contains the removed question. The sample document structure (where :id corresponds to the id of the course and :qId corresponds to the id of the question) is as follows:
{ "id": :qId, "title": "Question title", "text": "Question text", "upvotes": 1, "courseId": ":id" }UI Functionality
The UI currently has the following functionality, where all the functionality focuses on the questions related to courses and where all of the functionality is shown on the same page:
- The UI shows a list of questions.
- The UI shows a form to add a new course and allows adding a new question.
- The UI allows upvoting a question.
- The UI allows deleting a question.
The functionality works with an earlier version of API endpoints. That is, the current UI is not up-to-date with the latest API endpoints.
Next steps
In this part, there are two steps to the overarching project. First, you update the UI to work with the latest API endpoints, and add add page-specific functionality to the application. Then, in the second step, you add styles to the application.
Once you are ready with the page-specific functionality, you can move on to adding styles to the application. The next step is as follows.