Overarching Project

This marks the start of the overarching project that you will work on throughout the course. The project is divided into several steps, each building upon the previous one. In this first step, you will set up the basic structure of the application, focusing on the client-side functionality of the application, and implement a simple page that lists communities.

Getting started

First, create a new walking skeleton for the overarching project, following the steps in the part on setting up a walking skeleton.

When creating the database for the overarching project, use project_database as the name of the database service and project_postgresql_database as the container name. Reflect these names in the environment variables in the project.env file. For example, the value for POSTGRES_DB should be project_database, while PGHOST should be project_postgresql_database. The host project_postgresql_database should be present also in value set to FLYWAY_URL.

When you have a walking skeleton for the project, you are ready to start implementing the first step of the overarching project.

Task

Focusing on the functionality in client, create a client-side application that displays a list of communities at the path “/communities”.

When you open the path “/communities/” in a browser, you should see a main heading (h1) with the text “Communities” and an unordered list of community names and their descriptions.

Use the following data for the communities:

let communities = [
  { id: 1, name: 'Developers Hub', description: 'A place for developers' },
  { id: 2, name: 'Design Factory', description: 'Creative minds meet here' },
  { id: 3, name: 'Startup Workshop', description: 'Where ideas become reality' }
];

When listing the communities, use a level two heading (h2) for each community name and a paragraph (p) for the description. These elements should be contained within list items (li) of an unordered list (ul).

Submission

Once ready, zip the contents of the client/src folder of your overarching project and submit the zip file below. The routes folder should be at the root of the zip file.

The submission should contain at least a +page.svelte file in the routes/communities folder. This is the entry point to the application.

In this step, you will implement a set of components for managing communities and integrate them into the application. At the end of this step, your application has the following functionality.

• Creating a community
• Listing all communities.
• Showing a single community.
• Deleting a community.

The communities shall have the following properties:

• id: A unique identifier for the community
• name: The name of the community
• description: The description of the community

Task

The task is divided into parts to help you structure your work. The division is based on individual components, each with its own responsibilities.

communityState.svelte.js

Create a file communityState.svelte.js in the src/lib/states folder. The file should provide the functionality for adding, listing, and deleting communities, combined with a function to get data of a specific community. Data about communities should be stored in local storage.

CommunityList.svelte

Create a file CommunityList.svelte in the src/lib/components/communities folder, creating any folders that are missing. The file should have the following functions:

• Displays a list of all communities using data retrieved from communityState.svelte.js. The communities should be displayed using an unordered list where the name of the community is in a level two heading (h2) and the description in a paragraph (p).
• The name of the community in the h2 element should be a clickable link to navigate to an individual community page at path /communities/[communityId] (that we’ll get to a bit later in this task).
• Each community should, in the elements in the li element of the specific community, have a button with the text “Remove”. Clicking the button should remove the community from the list, with the UI updating in real time (no page reload required).

AddCommunity.svelte

Create a file AddCommunity.svelte in the src/lib/components/communities folder. The file should have the following functions:

• Two input fields with input type of text and placeholder value of Community name and Community description for entering the name and description of the community, respectively.
• A button with the text “Add community”. When clicked, a new community is added with a unique id (based on the current number of communities), and the entered name and description will be added to the list of communities stored in the shared state.
• Clicking the “Add community” button should immediately show the newly added community in the list, with the UI updating in real time (no page reload required).

Communities page (src/routes/communities/+page.svelte)

Modify the file to import and display both CommunityList.svelte and AddCommunity.svelte components, and have a heading of “Communities”.

When you have implemented the components listed at this point, you should be able list, add, and remove communities on the /communities page.

Community.svelte

Create a file Community.svelte in the src/lib/components/communities folder. The component should have the following functionality:

• Accepts one property communityId, which is used to retrieve individual community data by using getOne(id) provided by communityState.
• Adding a loading indicator with the text “Loading…” to ensure that the page does not crash when the community data has not yet been loaded from localStorage.
• Display the community name and its description.

Individual community page (src/routes/communities/[communityId]/+page.svelte)

Create a folder named [communityId] in the src/routes/communities folder. In this folder, create the file +page.svelte that imports and displays the Community.svelte component, passing the communityId prop to it.

At this point, you should have an application that allows you to add, list, and remove communities on the /communities page, and view individual community details on their respective pages.

Submission

Once ready, zip the contents of the client/src folder of your overarching project and submit the zip file below. The routes folder should be at the root of the zip file. The expected file structure of the project is as follows.

Follow the names exactly as given, as the automated tests will check for them.

.
├── lib
│   ├── components
│   │   └── communities
│   │       ├── AddCommunity.svelte       (new)
│   │       ├── Community.svelte          (new)
│   │       └── CommunityList.svelte      (new)
│   └── states
│       └── communityState.svelte.js      (new)
└── routes
    └── communities
        ├── +page.svelte          (new) # List of communities
        └── [communityId]
            └── +page.svelte      (new) # Individual Community Page

In this step, you will implement a set of components for managing posts within communities and integrate them into the application. At the end of this step, your application has the following new functionality.

• Creating a post for a specific community.
• Listing all posts in a community.
• Showing a single post.
• Deleting a post.

Each post shall have the following properties:

• id: A unique identifier for the post within its community.
• title: The title of the post.
• content: The content of the post.

Posts shall be stored per community in a shared state object where each key is a community ID and the value is an array of post objects. Below is an example of such a structure:

let postState = $state({
  1: [
    { id: 1, title: "OOP with JavaScript" },
  ],
  2: [
    { id: 1, title: "You all know exactly who I am", content: "Say my name" },
    { id: 2, title: "He told me you .... him", content: "No, I am your father" },
    { id: 3, title: "Do not cite the deep magic to me, Witch", content: "I was there when it was written." },
  ],
});

Task

The task is divided into parts to help you structure your work. The division is based on individual components, each with its own responsibilities.

postState.svelte.js

Create a file postState.svelte.js in the src/lib/states folder. The file should provide the functionality for adding, listing, and deleting posts, combined with a function getPost(communityId, postId) to get data of a specific post. When adding, listing, and deleting posts, make sure to handle posts per community — i.e., always pass also the communityId when performing these operations. Data about posts should be stored in local storage.

PostList.svelte

Create a file PostList.svelte in the src/lib/components/posts folder, creating any folders that are missing. The file should have the following functions:

• Accept one property communityId, which is used to retrieve post data for the specific community.
• Display a list of all posts belonging to that community using data retrieved from postState.svelte.js. Each list item should show the post title and content.
• The title of each post should be a clickable link to navigate to an individual post page at path /communities/[communityId]/posts/[postId].
• Each post should, in the elements in the li element of the specific post, have a button with the text “Remove”. Clicking the button should remove the post from the list, with the UI updating in real time (no page reload required).

AddPost.svelte

Create a file AddPost.svelte in the src/lib/components/posts folder. The file should have the following functions:

• Accept one property communityId, which is used to decide what community the post belongs to when created.
• Two input fields with input type of text and placeholder value of Post title and Post content for entering the title and content of the post, respectively.
• A button with the text “Add Post”. When clicked, a new post is added with a unique id (based on the current number of posts in that community), and the entered title and content will be added to the list of posts stored in the shared state.
• Clicking the “Add Post” button should immediately show the newly added post in the list, with the UI updating in real time (no page reload required).

Updating individual community page (src/routes/communities/[communityId]/+page.svelte)

Update the existing +page.svelte file to enhance the community page with posts; import and display the PostList.svelte and AddPost.svelte components, passing the communityId prop to both.

When you have implemented the components listed at this point, you should be able to list, add, and remove posts on an individual community’s page at /communities/[communityId].

Post.svelte

Create a file Post.svelte in the src/lib/components/posts folder. The component should have the following functionality:

• Accepts two properties communityId and postId, which are used to retrieve individual post data provided by postState.
• Adding a loading indicator with the text “Loading…” to ensure that the page does not crash when the community data and the post data have not yet been loaded from localStorage.
• Display the post title and its content. Use a level one heading (h1) for the post title and a paragraph (p) for the post content.

Individual post page (src/routes/communities/[communityId]/posts/[postId]/+page.svelte)

Create a folder named posts inside the src/routes/communities/[communityId] folder. In this folder, create a subfolder [postId] and in it the file +page.svelte. The file should have the following functionality:

• +page.svelte: Import and display the Post.svelte component, passing the communityId and postId props to it.

At this point, you should have an application that allows you to add, list, and remove posts within a community, and view individual post details on their respective pages.

Submission

Once ready, zip the contents of the client/src folder of your overarching project and submit the zip file below. The routes folder should be at the root of the zip file. The expected file structure of the project is as follows.

Follow the names exactly as given, as the automated tests will check for them.

.
├── lib
│   ├── components
│   │   └── communities
│   │       └── ...
│   │   └── posts
│   │       ├── AddPost.svelte       (new)
│   │       ├── Post.svelte          (new)
│   │       └── PostList.svelte      (new)
│   └── states
│   │   ├── communityState.svelte.js
│   │   └── postState.svelte.js      (new)
└── routes
    └── communities
        ├── +page.svelte            # List of communities
        └── [communityId]
            ├── +page.svelte        (updated) # Individual community page
            └── posts
                └── [postId]
                    └── +page.svelte   (new)  # Individual post page