Exercise: Using UI Frameworks

Use what you've learned in this chapter to complete this coding exercise.

We'll cover the following

Problem statement

The task is to build a personal blog website using Chakra UI and Next.js. The website should allow you to write blog posts, publish them, and let other users read and comment on them. The website should also have a home page that displays a list of your most recent blog posts.

Here are the features the website should include:

  • Home page: The home page should display a list of your most recent blog posts and a button that will take you to the GitHub main page.

  • Blog post page: When a user clicks on a blog post from the home page, they should be taken to a page that displays the full blog post.

Here are the technologies you should use:

  • Next.js: Use Next.js to build the website.

  • Chakra UI: Use Chakra UI to style the website.

  • React: Use React to build the user interface.

Note: You can customize the design and layout of the website to your liking.

Try it yourself 

Please write the code in the necessary files. If you get stuck, you can see the solution.

Click the “Run” button below to execute the code. Once the execution is completed, see the output by clicking the link below.

Get hands-on with 1200+ tech skills courses.