RESTfulness

Objective

1. Creating APIs using Next.js (opens in a new tab) and the app router.
2. Next.js routing fundamentals and route definition.
3. Next.js route handlers and file conventions.
4. Testing APIs using Postman (opens in a new tab).

An application programming interface (API), like a RESTful services. It serves as a secure means for two computer systems to exchange information over the internet, and is commonly employed to communicate with internal and external systems to execute diverse tasks.

The key abstraction of information in REST is a resource. Any information that can be named can be a resource: a document or image, a temporal service (e.g. “today’s weather in Los Angeles”), a collection of other resources, a non-virtual object (e.g. a person), and so on. In other words, any concept that might be the target of an author’s hypertext reference must fit within the definition of a resource. A resource is a conceptual mapping to a set of entities, not the entity that corresponds to the mapping at any particular point in time. — Roy Fielding, Representational State Transfer (REST) (opens in a new tab), 2000

1 Task Tracker

RESTful API

Develop an API using Next.js for managing a collection of tasks.

1. Create a Next.js application using the CLI tool create-next-app (opens in a new tab): npx create-next-app@latest. You can use ESLint (opens in a new tab) and Tailwind CSS (opens in a new tab) but do not use TypeScript or the src/ directory. The application can be created non-interactively using:

   npx create-next-app@latest 01-task-tracker --turbopack --api --javascript --eslint --no-src-dir --import-alias "@/*"

   Run your application using npm run dev.

2. Create a CRUD data repository, repo/tasks.js, that implements methods to get/add/update/remove tasks. Use repo/data/tasks.json to store the tasks. This file will be used when reading/writing task data.

3. Create a test/repo.spec.js and test the methods of the repository using Mocha (opens in a new tab) + Chai (opens in a new tab).

4. Create all the required routing directories files under app/api to define and implement the following API routes. The route handlers should use the methods from the data repository.

   Method	URL	Description
   GET	/api/tasks	returns all tasks
   POST	/api/tasks	adds a new task and returns it
   GET	/api/tasks/:id	returns the task having id
   PUT	/api/tasks/:id	updates the task having id and returns it
   DELETE	/api/tasks/:id	deletes the task having id and returns it

   1. Task identifiers are unique and are generated by the API using Nano ID (opens in a new tab).
   2. Use try...catch statements to handle server errors for every request.
   3. Return a HTTP status code using return new Response(..., { status: code, ... }) for every route.
   4. Set the correct status code for every response and, when a request fails, include a meaningful message.
   5. Include an optional catch-all, [[...all]], route to handle invalid routes.

5. Test the API routes and methods using Postman (opens in a new tab).

Client Application

Update the application from 7.1 Task Tracker to use the the web API from RESTful API.

2 Bank Accounts

RESTful API

Develop an API using Next.js for managing a collection of bank accounts and their associated transactions.

1. Create a Next.js application using the CLI tool create-next-app (opens in a new tab): npx create-next-app@latest. You can use ESLint (opens in a new tab) and Turbopack (opens in a new tab), but do not use TypeScript or the src/ directory. The application can be created non-interactively using:

   npx create-next-app@latest 02-bank-accounts --turbopack --api --javascript --eslint --no-src-dir --import-alias "@/*"

   Run your application using npm run dev.

2. Create CRUD data repositories, repo/accounts.js and repo/transactions.js, that implement methods to get/add/update/delete accounts and to get/add transactions, respectively. When adding a transaction make sure to update the corresponding account balance.

   Use repo/data/accounts.json and repo/data/transactions.json to store the accounts and transactions, respectively. These files will be used when reading/writing account and transaction data.

3. Create a test/repo.spec.js and test the methods of the repositories using Mocha (opens in a new tab) + Chai (opens in a new tab).

4. Create all the required routing directories files under app/api to define and implement the following API routes. The route handlers should use the methods from the data repositories.

   Method	URL	Description
   GET	/api/accounts/?type=type	returns accounts by type; returns all accounts when type is not provided
   POST	/api/accounts	adds a new account and returns it
   GET	/api/accounts/:id	returns the account having id
   PUT	/api/accounts/:id	updates the account having id and returns it
   DELETE	/api/accounts/:id	deletes the account having id and returns it
   GET	/api/accounts/:id/transactions	returns all transactions for the account having id
   POST	/api/accounts/:id/transactions	adds a new transaction for the account having id and returns the transaction

   1. Account identifiers are unique and are generated by the API using Nano ID (opens in a new tab).
   2. Use try...catch statements to handle server errors for every request.
   3. Return a HTTP status code using return new Response(..., { status: code, ... }) for every route.
   4. Set the correct status code for every response and, when a request fails, include a meaningful message.
   5. Include an optional catch-all, [[...all]], route to handle invalid routes.

5. Test the API routes and methods using Postman (opens in a new tab).

Client Application

Develop a client-side (front-end) application that uses the web API from RESTful API and allows the end-user to manage a collection of accounts and their associated transactions.

1. The application has a single page that displays a list with all accounts information and provides an element to filter them by type. Accounts with zero balance can be deleted using a button.
2. Each account has all their transactions displayed, with their type, amount, and date, and an element to filter them by type.
3. Provide a form to create a new account, specifying the type. A message should be displayed when account creation succeeds or fails.
4. Provide another form, for each account, to create a new transaction, specifying the type and amount. A message should be displayed when a transaction succeeds or fails, for example, if the balance is insufficient to perform a withdrawal.

Resources

• Next.js: Getting Started (opens in a new tab), Routing Fundamentals (opens in a new tab), Defining Routes (opens in a new tab), Route Handlers (opens in a new tab), File Conventions (opens in a new tab), Building APIs with Next.js (opens in a new tab)
• RESTful: Introduction to RESTful Web services (opens in a new tab), What is a REST API? (opens in a new tab), Best practices for REST API design (opens in a new tab), REST API Design - Resource Modeling (opens in a new tab)
• MDN: HTTP response status codes (opens in a new tab), HTTP request methods (opens in a new tab)
• Getting Started in Postman (opens in a new tab)
• Understanding RPC vs REST for HTTP APIs (opens in a new tab)
• What’s the Difference Between RPC and REST? (opens in a new tab)
• http-decision-diagram (opens in a new tab)
• OpenAPI Specification (opens in a new tab), Orval (opens in a new tab)