Coding - React: Next News

The repository you downloaded contains a React starter project. You can start the development server by running npm run dev. Your job is to create a simple news website. A designer on our team has already created the design for the website, and the backend team has created an API for fetching news articles. Your job is to create the frontend for the website.

1. The landing page (design)

The landing page has a header, a featured news article on top, a list of other news articles, and a footer. The API (url below) returns a list of articles. You can show the first one as the featured article, and the rest as standard news articles below it.

You should create several React components, so that the code is organized and easy to understand. At the very least, you should create a component for the header, a component for the featured news article, a component for a standard news article, and a component for the footer (which is the same on all pages, so you can render it in the root.tsx file - where you can also define the classes on the body element).

Important links:

• The landing page design
• The API url - https://api.next.code-camp.org/news-posts
• The types (created by our backend team)

Remember: Just open the design link in your browser and view the source code (or use the browser's Inspect tool) to copy the necessary HTML structure. You don't need to design anything!

2. The article page (design)

The article page is used to display a single news article. The API (url below) returns a single article (in addition to the basic information, each article has content, which is a list of strings defining the paragraphs of text; and a list of similar articles which are displayed on the right side of the page).

Important links:

• The article page design
• The API url - https://api.next.code-camp.org/news-posts/:slug (see example)

Linking the pages

Instead of using the "a" tag for links, you should use Link from react-router (example: <Link to="/article/123">Article 123</Link>). This allows the application to update the URL and change the content without a full page reload, making the navigation feel more seamless.