Slide 1 ----------- Part 1: It's time for your second, more comprehensive assignment. This time, we will create a blogging platform! Slide 2 ----------- Part 1: In this second assignment, you will develop a Blogging platform. The goal of the first part of this assignment is to complete the client-side functionality of a blog application. You will work with predefined structures and enhance the existing functionality. Slide 3 ----------- Part 1: To succeed, you must ensure all tests pass and be able to explain every piece of code you write. You will explain your code to your tutor, during tutorial classes. Slide 4 ----------- Part 1: Let us talk about the required functionality for clients to access your blogging platform. Part 2: Users should be able to filter posts by category. Part 3: Users should see an archive of posts sorted by month and year. Part 4: Similarly, users should be able to filter posts based on tags. Part 5: Users should be able to search for posts using keywords found in the title or description. As the user types, the list of blog posts should dynamically update based on the search query. Part 6: Users should be able to switch to dark mode. Part 7: In the list view, a user should the the title of the blog post, a short description, date the post was created, the image tags, number of likes and views. Slide 5 ----------- Part 1: The post detail page shows the same information and the list view ... Part 2: ... plus, it shows the formatted text of the post, considering that the posts are written in the Markdown format. Slide 6 ----------- Part 1: Let's discuss how you can set up this project on your computer. Part 2: This assignment is a group project, with the following roles: Part 3: Programmer is responsible for the implementation of the code and the delivery of the solution. Part 4: The product owner is responsible for ensuring the quality of the final solution. Consequently, each contribution is in the form of pull requests, with the product owner approving pull requests. The twist is, that you will play BOTH roles. Part 5: Consider this example, with three students, Bill, Jane and John. Part 6: Each student is responsible for programming the final solution in their own repository .... Part 7: But, Bill not only codes, he also is approving all pull requests from Jane in Janes repository B. Part 8: Jane, codes in repository B, but approves pull requests in John's repository C. Part 9: And John codes in repository C but approves Bill's pull requests in repository A. As you see, everyone is playing both roles. Slide 7 ----------- Part 1: Use one of the following links and create a new group in which you will host your project and the reviewer. Please use your name as the name of your group. Part 2: If one link tells you that the maximum number of groups was reached, use the other one. Part 3: Accept the assignment and clone it to your compute Part 4: Remember which link you have used to create your group, either A or B. Part 5: Once you create your group and accept the invitation, go to the other group link and join one of the projects. Meaning, if you created your project group in A, join projects in group B It is possible that yet there will be no projects, try at a later date. Part 6: It is important to note that you cannot join your reviewer's project. Meaning that if for example Jane joined my project as reviewer, I cannot join Janes project to become her reviewer. While the system will permit that, we will check for these conflicts and reassign you. Slide 8 ----------- Part 1: Let's explore the project structure after you clone it to your hardrive. It is a slightly more complex structure as you are dealing with monorepo. Part 2: In the apps directory you will find two nextJS web applications containing separate UI the client blog view and admin dashboards. Part 3: In the packages directory, you will find several packages containing database configuration and access, configuration of environment variables, shared utilities and configurations for development tools such as typescript, eslint or tailwind. Part 4: In the tests directory, you can find tools like Playwright for end-to-end tests for both client and admin and Storybook for presentation and development of components in isolation. Slide 9 ----------- Part 1: The client application comes with a predefined routing system, except for one missing route you need to implement. Part 2: The project includes an existing component structure that you will need to complete. Part 3: The admin application is more barebones, requiring you to implement most of its functionality. Slide 10 ----------- Part 1: To run the project, make sure both pnpm and turbo are globally installed. Part 2: If not, install them with npm Part 3: Before you run the project, you need to set up the environment variables. In the apps/admin project and packages/db project, duplicate the "env example" file and rename it to ".env". Then, configure the values to your liking, mainly setting the strong secret and password. Part 4: To run the project, run the turbo dev command in the root directory of your project. The client will be available on port 3001 on localhost, while admin will run on port 3002. Part 5: This assignment has three parts and you can always run related tests for that part using turbo-1, turbo-2 or turbo-3 commands. Part 6: We have also configured test runners with visual UIs and you can run them with turbo dev:test-1 and similar. Slide 11 ----------- Part 1: If you run the tests using the "turbo test" command, your tests will run in the console. This is a handy way of visualising your tests. However, with many errors, this view can become cluttered and confusing. Slide 12 ----------- Part 1: In you run the turbo dev:test command, the tests are executed in visual mode, launching several visual interfaces facilitating the view of test result in integration tests .... Slide 13 ----------- Part 1: as well as end-to-end tests. Part 2: Use the handy play buttons to execute only the tests you require. Slide 14 ----------- Part 1: Moreover, if you install the playwright and vitest extensions to Visual Studio Code, you can execute the tests directly from your code. Slide 15 ----------- Part 1: So, how to start? Part 2: Begin by implementing the blog list and detail pages. You might want to look in the packages/utils package first and implement the required functions. Part 3: Make sure search, category, tag, and date-based filtering functions as expected. Part 4: Finally, verify that all tests pass before submitting your assignment.