Scribd
Upload
12 views2 pages

Nextjs Live Coding

The document outlines a live coding assessment with a 20-minute duration focused on developing a single-page interface for creating and viewing posts. The application must include a form for new posts with validation, display all existing posts, and update the list dynamically without a page refresh. Technical guidelines emphasize using React Hooks for state management and API interactions, with a deliverable of a functional application hosted on GitHub.

Uploaded by

Osama Shata
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views2 pages

Nextjs Live Coding

The document outlines a live coding assessment with a 20-minute duration focused on developing a single-page interface for creating and viewing posts. The application must include a form for new posts with validation, display all existing posts, and update the list dynamically without a page refresh. Technical guidelines emphasize using React Hooks for state management and API interactions, with a deliverable of a functional application hosted on GitHub.

Uploaded by

Osama Shata
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Live Coding Assessment​

Duration: 20 minutes

Objective

Develop a single-page interface with the following core functionalities:

●​ Create a new post


●​ View all existing posts
●​ See newly submitted posts appear instantly without a page refresh

Functional Requirements

New Post Form

●​ Fields Required:
○​ Title – Single-line text input (required)
○​ Content – Multi-line textarea input (required)
●​ Validation:
○​ Inline validation must be displayed for both fields if they are left empty
●​ On Submission:​

A POST request should be sent to the following endpoint:​


​

Unset
POST /api/posts

Unset
{
"title": "Post title here",
"content": "Post content here"
}
Post List Section
On initial page load, all existing posts should be fetched from:​

Unset
GET /api/posts

●​ Each post in the list should display:​

○​ The Title
○​ The Content​

●​ After a successful submission of a new post, the post should be immediately displayed
at the top of the list without requiring a page reload.​

Technical Guidelines
●​ Use React Hooks (useState, useEffect) for state and lifecycle management
●​ Use either fetch or axios for API interactions
●​ Prioritize correct data handling and clean, readable logic
●​ Styling is optional; focus on functionality​

Deliverable

By the end of the session, your GitHub repository should include:

●​ A functional single-page application that:


○​ Displays a working post submission form
○​ Fetches and displays posts from the API
○​ Dynamically updates the list after a new post is created

You might also like