DEV Community: Chris Siku

How to Structure a REST API the Professional Way

Chris Siku — Sat, 07 Mar 2026 19:56:35 +0000

Your API Works. But Does It Slap?

So you've been vibing. You prompted your way into a backend, Cursor autocompleted half the routes, and somehow the thing actually works. Respect. Genuinely.

Most developers don't actually design REST APIs, they just return JSON and call it done. But professional API design is about more than making things work. It's about consistency, scalability, predictability, and developer experience.

This guide walks through the 10 most common REST API mistakes and how to fix each one with real code examples.

1. Use Resource-Based URLs (No Verbs)

Be honest. You have endpoints that look like this:

GET  /getUsers
POST /createUser
PUT /updateUser/4
DELETE /deleteUser/5

It feels natural! It reads like English! It is also wrong.

REST is about resources, not actions. Your HTTP method already defines the action, so don't repeat it in the URL.

❌ Wrong

GET    /getUsers
POST   /createUser
DELETE /deleteUser/5

✅ Correct

GET    /users
POST   /users
DELETE /users/5

The HTTP method tells you what to do. The URL tells you what resource you're acting on.

Method	Meaning
GET	Retrieve
POST	Create
PUT / PATCH	Update
DELETE	Remove

Rule: URLs are nouns. HTTP methods are verbs.

2. Use The Right HTTP Status Codes Correctly

This one hurts to see. An API that returns 200 OK even when things go wrong:

Returning 200 OK for everything, including errors, is a common anti-pattern. Status codes are part of your API contract.

❌ Wrong

HTTP 200 OK
{
  "status": "error",
  "message": "User not found"
}

✅ Correct

// Resource found
HTTP 200 OK

// Resource created
HTTP 201 created

// Bad Request
HTTP 400 Bad request

// Validation error
HTTP 422 Unprocessable Entity

// Not authenticated
HTTP 401 Unauthorized

// Authenticated but not allowed
HTTP 403 Forbidden

// Resource doesn't exist
HTTP 404 Not Found

// Server error
HTTP 500 Internal Server Error

Example in Node.js (Express)

app.get('/users/:id', async (req, res) => {
  const user = await User.findById(req.params.id);

  if (!user) {
    return res.status(404).json({
      error: { code: 404, message: 'User not found' }
    });
  }

  return res.status(200).json({ data: user });
});

3. Keep JSON Naming Consistent

Mixing camelCase, snake_case, and lowercase across endpoints forces front-end developers to guess the format and that slows everyone down.

❌ Wrong

// Endpoint A
{ "userName": "alice", "user_email": "alice@example.com" }

// Endpoint B
{ "username": "bob", "userEmail": "bob@example.com" }

✅ Correct — pick one and stick to it

snake_case (common in Laravel/Python APIs):

{
  "user_name": "alice",
  "user_email": "alice@example.com",
  "created_at": "2024-01-15T10:00:00Z"
}

camelCase (common in Node.js APIs):

{
  "userName": "alice",
  "userEmail": "alice@example.com",
  "createdAt": "2024-01-15T10:00:00Z"
}

Rule: It doesn't matter which you choose. What matters is that you use it everywhere.

4. Version Your API from Day One

Skipping versioning feels harmless until you need to change a response structure and suddenly every client breaks.

❌ Wrong

/users         ← you change this and everything breaks

✅ Correct

/api/v1/users  ← stable
/api/v2/users  ← new version when needed

Future you is begging present you to do this one thing.

Example: Express Router with versioning

const v1Router = require('./routes/v1');
const v2Router = require('./routes/v2');

app.use('/api/v1', v1Router);
app.use('/api/v2', v2Router);

Old clients keep using v1. New clients adopt v2. No broken production systems.

5. Implement Pagination

Returning 10,000 records in a single response will slow your server, waste bandwidth, and hurt user experience.

❌ Wrong

GET /users  ← returns all 8,700 users
             ← your server starts crying
             ← your users leave

✅ Correct

GET /users?page=1&limit=10

Expected response structure

{
  "data": [
    { "id": 1, "name": "Alice" },
    { "id": 2, "name": "Bob" }
  ],
  "meta": {
    "current_page": 1,
    "per_page": 10,
    "total": 1000,
    "last_page": 100
  }
}

Example in Node.js

app.get('/users', async (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const limit = parseInt(req.query.limit) || 10;
  const offset = (page - 1) * limit;

  const { rows: users, count: total } = await User.findAndCountAll({
    limit,
    offset
  });

  res.status(200).json({
    data: users,
    meta: {
      current_page: page,
      per_page: limit,
      total,
      last_page: Math.ceil(total / limit)
    }
  });
});

6. Separate Authentication from Authorization

A lot of vibe code treats these like they're the same. They're not.
These are two different things and mixing them creates security gaps.

Concept	Question it answers
Authentication	Who are you? (identity)
Authorization	What are you allowed to do? (permissions)

✅ Correct approach in Node.js (JWT)

// Middleware: Authentication
const authenticate = (req, res, next) => {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) return res.status(401).json({ error: 'Unauthorized' });

  try {
    req.user = jwt.verify(token, process.env.JWT_SECRET);
    next();
  } catch {
    res.status(401).json({ error: 'Invalid token' });
  }
};

// Middleware: Authorization
const authorize = (role) => (req, res, next) => {
  if (req.user.role !== role) {
    return res.status(403).json({ error: 'Forbidden' });
  }
  next();
};

// Usage
app.delete('/users/:id', authenticate, authorize('admin'), deleteUser);

Never rely on front-end validation alone. Hidden buttons don't protect endpoints. Security must be enforced on the server.

7. Return Structured Error Responses

Vague error messages like "Something went wrong" are useless for front-end developers, for logging, and for debugging.

❌ Wrong

HTTP 500
{ "message": "Something went wrong" }

This tells nobody anything. What went wrong? Where? Why? Your front-end team can't handle it properly. You can't debug it. It's just vibes in JSON form.

✅ Correct

HTTP 404
{
  "error": {
    "code": 404,
    "message": "User not found",
    "field": null
  }
}

HTTP 422
{
  "error": {
    "code": 422,
    "message": "Validation failed",
    "fields": {
      "email": "The email field is required.",
      "password": "Password must be at least 8 characters."
    }
  }
}

Reusable error helper in Node.js

const errorResponse = (res, statusCode, message, fields = null) => {
  return res.status(statusCode).json({
    error: { code: statusCode, message, ...(fields && { fields }) }
  });
};

// Usage
errorResponse(res, 404, 'User not found');
errorResponse(res, 422, 'Validation failed', { email: 'Email is required' });

8. Use Query Parameters for Filtering and Sorting

Creating a new endpoint for every filter combination doesn't scale.

❌ Wrong

GET /getActiveUsersSortedByName
GET /getInactiveUsersSortedByDate
GET /getUsersByRole

✅ Correct

GET /users?status=active&sort=name&order=asc
GET /users?status=inactive&sort=created_at&order=desc
GET /users?role=admin

Example in Node.js

app.get('/users', async (req, res) => {
  const { status, sort = 'created_at', order = 'asc', role } = req.query;

  const where = {};
  if (status) where.status = status;
  if (role) where.role = role;

  const users = await User.findAll({
    where,
    order: [[sort, order.toUpperCase()]]
  });

  res.status(200).json({ data: users });
});

9. Enforce Security from Day One

Security is not something you add after deployment. It's built in from the start.

Common mistakes to avoid

Mistake	Risk
No rate limiting	Brute force & abuse
No input validation	SQL injection, XSS
No HTTPS	Data interception
Exposing sensitive fields	Token/password leakage

Rate limiting in Express

const rateLimit = require('express-rate-limit');

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100,
  message: { error: { code: 429, message: 'Too many requests' } }
});

app.use('/api/', limiter);

Input validation (using Joi)

const Joi = require('joi');

const userSchema = Joi.object({
  name:     Joi.string().min(2).max(50).required(),
  email:    Joi.string().email().required(),
  password: Joi.string().min(8).required()
});

app.post('/users', (req, res) => {
  const { error } = userSchema.validate(req.body);
  if (error) {
    return res.status(422).json({
      error: { code: 422, message: error.details[0].message }
    });
  }
  // proceed...
});

Hide sensitive fields (Laravel Resource)

class UserResource extends JsonResource
{
    public function toArray($request)
    {
        return [
            'id'         => $this->id,
            'name'       => $this->name,
            'email'      => $this->email,
            'created_at' => $this->created_at,
            // password, token, internal_id are intentionally omitted
        ];
    }
}

10. Design Around Client Needs, Not Your Database

Your database schema is an internal implementation detail. Your API is a public contract.

❌ Wrong mindset

"This is how my database table looks, so this is how my response should look."

✅ Right mindset

"This is what the client needs. I'll shape the response to serve that."

Example: Combining fields and transforming data

Database has: first_name, last_name, dob (date of birth)

Client needs: full_name, age

app.get('/users/:id', async (req, res) => {
  const user = await User.findById(req.params.id);

  if (!user) return res.status(404).json({ error: { code: 404, message: 'User not found' } });

  const age = new Date().getFullYear() - new Date(user.dob).getFullYear();

  res.status(200).json({
    data: {
      id:        user.id,
      full_name: `${user.first_name} ${user.last_name}`,
      email:     user.email,
      age
      // internal columns like dob, password_hash are hidden
    }
  });
});

Your database can change. Your implementation can evolve. But your API contract must remain stable designed for the client, not for the table.

Summary: What Professional REST APIs Look Like

Principle	What it means
✅ Resource-based URLs	Nouns in URLs, verbs via HTTP methods
✅ Correct HTTP status codes	201 for created, 404 for missing, 422 for invalid, etc.
✅ Consistent naming	snake_case or camelCase — never both
✅ API versioning	`/api/v1/` from day one
✅ Pagination	Never return unbounded record sets
✅ Auth + Authz separated	Identity vs. permissions are distinct
✅ Structured errors	Predictable, machine-readable error objects
✅ Query param filtering	One endpoint, flexible behavior
✅ Security by default	HTTPS, rate limiting, validation, no sensitive leaks
✅ Client-first design	API shape driven by what clients need

The difference between it works and it's well-designed is consistency, predictability, and care for the developer experience. Design it right from the beginning, your future self (and your teammates) will thank you.

You don't have to do all of this perfectly on day one. But the earlier you build these habits in, the less you'll be fighting your own code later.

The AI can write the routes. You have to make them good.
Ship clean. 🚀

Update and delete records on a DWN

Chris Siku — Fri, 11 Oct 2024 18:23:47 +0000

Data management isn't just about creating records; it also involves updating and deleting them as needed.

In this chapter, we’ll cover how to update existing records and delete unnecessary ones on your Decentralized Web Node (DWN). You'll learn the appropriate methods and commands to execute these actions safely and effectively, along with best practices for maintaining data consistency and integrity.

By the end of this chapter, you'll be able to manage your DWN's data lifecycle seamlessly.

Updating a Record

In previous examples, we’ve covered how to create records on a DWN and query them to read one by one. Now, to update a record, you can use the update function.

Here’s how to update a record:

// index.js
// ...

// Read a single record
const { record: singleRecord } = await web5.dwn.records.read({
  message: {
    filter: {
      recordId: "bafyreiflqo2weyflwxn3lzkihopjtaeshbf4drmuf4yhmx6q3zeofv5bh4",
    },
  },
});

// Update the record
const { status } = await singleRecord.update({
  data: {
    file: mockTxt,   // Example text file
    image: mockImage, // Example image file
    text: "Updated mixed data", // New data content
  },
});

console.log(await singleRecord.data.json());  // Print updated record data

Deleting a Record

To delete a record from your DWN, use the delete function:

// index.js
// ...

// Delete the record
const { status: deleteStatus } = await singleRecord.delete();

And that's it! You’ve successfully performed all the CRUD (Create, Read, Update, Delete) operations on your DWN.

Complete CRUD Example Code

Here’s a complete example showing how to connect to a DWN, create a mixed data record, query it, update, and delete it:

import { Web5 } from "@web5/api";

const { web5, did } = await Web5.connect({
  didCreateOptions: {
    dwnEndpoints: ["https://dwn.gcda.xyz"], // Community DWN instance on Google Cloud
  },
  registration: {
    onSuccess: () => {
      console.log("\n\nConnected successfully");
    },
    onFailure: (error) => {
      console.error("Connection failed:", error);
    },
  },
});

console.log("\nConnected did:", did);

// Image file
const imageFile = new File(["test image content"], "web5.png", {
  type: "image/png",
});
const mockImage = {
  currentTarget: {
    files: [imageFile], // Simulate a file input
  },
};

// txt file
const txtFile = new File(["dummy content"], "web5.txt", {
  type: "text/plain",
});

const mockTxt = {
  currentTarget: {
    files: [txtFile], // Mimic the file input's files array
  },
};

// Create Mixed record

const createMixedRecord = async (file, image, text) => {
  const { status, record } = await web5.dwn.records.create({
    data: {
      image,
      file,
      text,
    },
    message: {
      schema: "https://test.org/schema/mixed-data",
      dataFormat: "application/json",
    },
  });

  return record;
};

createMixedRecord(mockImage, mockTxt, "Mixed data");

// Query records
const response = await web5.dwn.records.query({
  form: did,
  message: {
    filter: {
      schema: "https://test.org/schema/mixed-data",
      dataFormat: "application/json",
    },
  },
});

response.records.forEach(async (record) => {
  const result = await record.data.json();
  const allRecords = { recordId: record.id, data: result };
  console.log(allRecords);
});

// read record
const { record: singleRecord } = await web5.dwn.records.read({
  message: {
    filter: {
      recordId: "bafyreig4vibz5lg4otmftd56qzqisgga7cqw5yeob336z7nn2x3hyv55ha",
    },
  },
});

console.log(await singleRecord.data.json());

// update a record

const { status } = await singleRecord.update({
  data: {
    file: mockTxt,
    image: mockImage,
    text: "Updated mixed data",
  },
});

console.log(await singleRecord.data.json());

// delete Record
const { status: deleteStatus } = await singleRecord.delete();

Protocols: The Data Exchange Contracts

Finally, remember that Protocols define the data schema and serve as the contract by which two Decentralized Web Nodes (DWNs) agree to communicate and share data.

Stay tuned for our upcoming post on protocols and how to synchronize data between two DWNs!

Prev ⏪️ ⏪️ ⏪️ Query and Read record

Query and Read records on a DWN

Chris Siku — Fri, 11 Oct 2024 18:23:12 +0000

With records created, it’s essential to know how to access them. In this chapter, we will explore the methods for querying and reading records from your DWN. You’ll learn how to formulate queries, handle responses, and parse data efficiently using JavaScript.

This chapter will equip you with the techniques needed to retrieve and display information from your Decentralized Web Node, ensuring you can make the most of the data stored within.

Query Records

You can use the query function to obtain records and from a DWN of a specific person

as we still proceeding with our previous code, let query our DWN that contains our mixed record

// index.js
// ....

const response = await web5.dwn.records.query({
  form: did,
  message: {
    filter: {
      schema: "https://test.org/schema/mixed-data",
      dataFormat: "application/json",
    },
  },
});

response.records.forEach(async (record) => {
  const result = await record.data.json();
  const allRecords = { recordId: record.id, data: result };
  console.log(allRecords);
});

if your run the project at this point you'll get the response of your query what is an object containing all your record on your DWN and you'll realize that there is a new key recordId: record.id which will help us perform operations like read, update and delete a specific record,

Read Record

You can use the read function to obtain records and from a DWN. here is how :

// index.js
// ....
const { record: singleRecord } = await web5.dwn.records.read({
  message: {
    filter: {
      recordId: "bafyreig4vibz5lg4otmftd56qzqisgga7cqw5yeob336z7nn2x3hyv55ha",
    },
  },
});

console.log(await singleRecord.data.json());

the result in the console should be as follow

{
  image: { currentTarget: { files: [Array] } },
  file: { currentTarget: { files: [Array] } },
  text: 'Mixed data 2'
}

Okay, if you have been following allong, you code should look as the following :

import { Web5 } from "@web5/api";

const { web5, did } = await Web5.connect({
  didCreateOptions: {
    dwnEndpoints: ["https://dwn.gcda.xyz"], // Community DWN instance on Google Cloud
  },
  registration: {
    onSuccess: () => {
      console.log("\n\nConnected successfully");
    },
    onFailure: (error) => {
      console.error("Connection failed:", error);
    },
  },
});

console.log("\nConnected did:", did);

// Image file
const imageFile = new File(["test image content"], "web5.png", {
  type: "image/png",
});
const mockImage = {
  currentTarget: {
    files: [imageFile], // Simulate a file input
  },
};

// txt file
const txtFile = new File(["dummy content"], "web5.txt", {
  type: "text/plain",
});

const mockTxt = {
  currentTarget: {
    files: [txtFile], // Mimic the file input's files array
  },
};

// Create Mixed record

const createMixedRecord = async (file, image, text) => {
  const { status, record } = await web5.dwn.records.create({
    data: {
      image,
      file,
      text,
    },
    message: {
      schema: "https://test.org/schema/mixed-data",
      dataFormat: "application/json",
    },
  });

  return record;
};

createMixedRecord(mockImage, mockTxt, "Mixed data 2");


// Query records
const response = await web5.dwn.records.query({
  form: did,
  message: {
    filter: {
      schema: "https://test.org/schema/mixed-data",
      dataFormat: "application/json",
    },
  },
});

response.records.forEach(async (record) => {
  const result = await record.data.json();
  const allRecords = { recordId: record.id, data: result };
  console.log(allRecords);
});

// read record
const { record: singleRecord } = await web5.dwn.records.read({
  message: {
    filter: {
      recordId: "bafyreig4vibz5lg4otmftd56qzqisgga7cqw5yeob336z7nn2x3hyv55ha",
    },
  },
});

console.log(await singleRecord.data.json());

Good job so far

Next ⏩️ ⏩️ ⏩️ Update and delete records on a DWN

Prev ⏪️ ⏪️ ⏪️ Create a record

Create records on a DWN

Chris Siku — Fri, 11 Oct 2024 18:21:03 +0000

Once connected to the free DWN, this chapter will walk you through the process of creating records. You’ll learn the data structures involved, the syntax for record creation in JavaScript, and the best practices for ensuring data integrity.

By the end of this chapter, you will have the skills needed to generate and store data effectively on your Decentralized Web Node.

You can use the create function to obtain records and from a DWN.

A recap,

Up to now our index.js file look as on the image bellow

Before writing our first code, let's explore different ways of creating records on a DWN

Create a text record

const { record: textRecord } = await web5.dwn.records.create({
  data: "This is a text record",
  message: {
    dataFormat: "text/plain",
  },
});

Create a json record

const { record: jsonRecord } = await web5.dwn.records.create({
  data: {
    content: 'This is the content',
    description: 'Here we have a Json recod!',
  },
  message: {
    dataFormat: 'application/json',
  },
});

"Note: As we progress with creating images and files on the DWN, we will adjust our project settings and include one image and one file."

- add an image file and name it we5.png
- add a txt file and name it web5.txt
our work space should look as follow

now create 2 variables in the index.js file to hold our image and text file

// index.js
//...

// Image file
const imageFile = new File(["test image content"], "web5.png", {
  type: "image/png",
});
const mockImage = {
  currentTarget: {
    files: [imageFile], // Simulate a file input
  },
};

// txt file
const txtFile = new File(["dummy content"], "web5.txt", {
  type: "text/plain",
});

const mockTxt = {
  currentTarget: {
    files: [txtFile], // Mimic the file input's files array
  },
};

Create Image record

const createBlobRecord = async (event) => {
  const blob = new Blob(event.currentTarget.files, { type: "image/png" });
  const { status, record } = await web5.dwn.records.create({
    data: blob,
    message: {
      schema: "https://test.org/schema/image",
      dataFormat: "image/png",
    },
  });

  return record;
};

// Call the function and create the image on the DWN
createBlobRecord(mockImage).then((record) => {
  console.log(record);
});

Create file record

const createFileRecord = async (event) => {
  const file = event.currentTarget.files[0];
  const { status: fileStatus, record: fileRecord } =
    await web5.dwn.records.create({
      data: file,
      message: {
        schema: "https://test.org/schema/file",
        dataFormat: "application/json",
      },
    });

  return fileRecord;
};

// Call the function and create the file on the DWN
createFileRecord(mockTxt).then((fileRecord) => {
  console.log(fileRecord);
});

Create mixed record

Mixed record are record containing at the same time text, images, files, ...

const createMixedRecord = async (file, image, text) => {
  const { status, record } = await web5.dwn.records.create({
    data: {
      image,
      file,
      text,
    },
    message: {
      schema: "https://test.org/schema/mixed-data",
      dataFormat: "application/json",
    },
  });

  return record;
};

createMixedRecord(mockImage, mockTxt, "Mixed data");

Create a record form an existing record

You can create a new version of a record while maintaining a link to the version of the original record.

const { record: newVersionRecord } = await web5.dwn.records.createFrom({
  record: originalRecord,
  data: 'I am a new version of the original record!',
  message: {
    dataFormat: 'text/plain',
    published: true,
  },
});

Create a record with tags

You can assign tags to records to enable filtering by specific keywords

const { record } = await web5.dwn.records.create({
  data: 'Chocolate Chip Cookies',
  message: {
    dataFormat: 'application/json',
    tags: {
      dishType: 'Dessert',
      dietaryRestriction: 'Contains Gluten',
    },
  },
});

Note

when creating a record on a DWN you can choose to make it public or private. but it's private by default.
you can decide when to publish that record, directly or later. by default it's published directly

all you have to do is to add the following key into the message object when create a record

// .... 

const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1);

// Format the date and time in YYYY-MM-DDThh:mm:ss.ssssssZ format
const formattedDate = tomorrow.toISOString().replace(/\.\d{3}Z$/, '.000000Z');

{
// ....

message: {
    // .....
    published: true, // make public
    datePublished: formattedDate // publish at a specific moment
  },
}

Implementation in our project

For our project will proceed with the mixed data to have everything in simple json form

update the index.js file and add the following code

// index.js
// ... 

// Image file
const imageFile = new File(["test image content"], "web5.png", {
  type: "image/png",
});
const mockImage = {
  currentTarget: {
    files: [imageFile], // Simulate a file input
  },
};

// txt file
const txtFile = new File(["dummy content"], "web5.txt", {
  type: "text/plain",
});

const mockTxt = {
  currentTarget: {
    files: [txtFile], // Mimic the file input's files array
  },
};

// Create Mixed record

const createMixedRecord = async (file, image, text) => {
  const { status, record } = await web5.dwn.records.create({
    data: {
      image,
      file,
      text,
    },
    message: {
      schema: "https://test.org/schema/mixed-data",
      dataFormat: "application/json",
    },
  });

  return record;
};

// run the function with data
createMixedRecord(mockImage, mockTxt, "Mixed data");

and ... Voilà

at this point your index.js file should look as bellow

import { Web5 } from "@web5/api";

const { web5, did } = await Web5.connect({
  didCreateOptions: {
    dwnEndpoints: ["https://dwn.gcda.xyz"], // Community DWN instance on Google Cloud
  },
  registration: {
    onSuccess: () => {
      console.log("\n\nConnected successfully");
    },
    onFailure: (error) => {
      console.error("Connection failed:", error);
    },
  },
});

console.log("\nConnected did:", did);

// Image file
const imageFile = new File(["test image content"], "web5.png", {
  type: "image/png",
});
const mockImage = {
  currentTarget: {
    files: [imageFile], // Simulate a file input
  },
};

// txt file
const txtFile = new File(["dummy content"], "web5.txt", {
  type: "text/plain",
});

const mockTxt = {
  currentTarget: {
    files: [txtFile], // Mimic the file input's files array
  },
};

// Create Mixed record

const createMixedRecord = async (file, image, text) => {
  const { status, record } = await web5.dwn.records.create({
    data: {
      image,
      file,
      text,
    },
    message: {
      schema: "https://test.org/schema/mixed-data",
      dataFormat: "application/json",
    },
  });

  return record;
};

// run the function with data
createMixedRecord(mockImage, mockTxt, "Mixed data");

Good job so far

Next ⏩️ ⏩️ ⏩️ Query and Read records on a DWN

Prev ⏪️ ⏪️ ⏪️ Connect to Web5 and on a DWN

Connect to Web5 and on a DWN in Web5

Chris Siku — Fri, 11 Oct 2024 18:17:43 +0000

The Web5 JS SDK provides an intuitive interface that allows you to swiftly develop Web5 applications. By using the Web5.connect() method to initialize the SDK, you can quickly access APIs for working with Decentralized Identifiers (DIDs) and Decentralized Web Nodes (DWNs).

In this practical guide, we will connect to the free DIF community node instance, located at https://dwn.gcda.xyz, which is hosted on Google Cloud.

Let's get started by opening our previously created index.js file and import the Web5 class

// index.js

import { Web5 } from "@web5/api"

Connect to Web5

We'll use the Web5.connect() method that initializes an instance of Web5, allowing your application to connect to an existing Decentralized Identifier (DID) or create a new one through an identity agent. This method also spins up a local Decentralized Web Node (DWN) linked to the DID.

The local DWN can synchronize with a specified remote DWN, ensuring connectivity and data consistency across devices. In the technical preview of the Web5 JS SDK, a remote DWN is automatically provisioned and synced with the local DWN every two minutes.

Example usage:

const { web5, did: userDid } = await Web5.connect();

Options

The connection process allows the app to either request access to a user's local identity app (desktop or mobile) or create an in-app DID if the user lacks an identity app. The outputs from this method will be used in subsequent API calls.

Parameters

options: Web5ConnectOptions (optional)
- Return Value:
- web5: Instance of Web5 for accessing the local DWN and DID methods.
- did: Instance of DidApi representing the connected or created DID.

Examples

Connect without parameters:

   const { web5, did: userDid } = await Web5.connect();

Connect to the DIF Community Node:

   const { web5, did } = await Web5.connect({
     didCreateOptions: {
       dwnEndpoints: ['https://dwn.gcda.xyz'] // Community DWN instance on Google Cloud
     },
     registration: {
       onSuccess: () => {
         console.log("Connected success fully")
       },
       onFailure: (error) => {
         console.error('Connection failed:', error);
       },
     },
   });

Connect with an existing DWN endpoint:

   const { web5, did } = await Web5.connect({
     techPreview: {
       dwnEndpoints: ['https://dwn.your-domain.org/'],
     },
   });

Connect with an existing agent and DID:

   const { web5, did } = await Web5.connect({
     agent: identityAgent,
     connectedDid: existingDid,
   });

Configure sync interval:

   const { web5, did } = await Web5.connect({
     sync: '5s', // Set sync interval to 5 seconds
   });

Implementation in our project

For our practical guide, we'll proceed with the connection the DIF free DWN, and at this point we just have to add the following line to our index.js file

// index.js

// ....

const { web5, did } = await Web5.connect({
     didCreateOptions: {
       dwnEndpoints: ['https://dwn.gcda.xyz'] // Community DWN instance on Google Cloud
     },
     registration: {
       onSuccess: () => {
         console.log("Connected success fully")
       },
       onFailure: (error) => {
         console.error('Connection failed:', error);
       },
     },
   });

// Display the connected DID in the console
console.log("\nConnected did:", did);

now open your console and run the project by typing

node index.js

the output should look a the foolwing

SECURITY WARNING: You have not set a password, which defaults to a static, guessable value. This significantly compromises the security of your data. Please configure a secure, unique password.
iterations: 2, time lapsed: 1 ms
iterations: 2, time lapsed: 0 ms

Connected successfully

Connected did: did:dht:oqrbjwa7xsghig37wgjzfh5hrrhxp5skycscfdyobm6ooskhjfxy

at this point your index.js file should look as the follwing

Good job so far

Next ⏩️ ⏩️ ⏩️ Create records on a DWN

Prev ⏪️ ⏪️ ⏪️ Setting Up the Workspace for Decentralized Web Nodes in JavaScript

Setting Up the Workspace for Decentralized Web Nodes in JavaScript

Chris Siku — Fri, 11 Oct 2024 18:11:11 +0000

This chapter will help you configure your JavaScript workspace for working with Decentralized Web Nodes (DWN). Follow these steps to set up your development environment:

Prerequisites

Node.js version 18 or above installed on your system
Node Package Manager (npm) installed and added to your system's $PATH.

Step 1 : **Open your terminal, create and change the working directory

and :**

   mkdir web5-dwn
   cd web5-dwn

Step 2 : Initialize a `package.json` file using NPM:

   npm init -y

This will create a package.json file in your project.

Step 3 : Install Web5 using NPM:

   npm install @web5/api@0.11.0

Step 4 : Open the project in your preferred code editor (e.g., VSCode):

   code -r .

Step 5 : Edit the `package.json` file to include `"type": "module"` so your project recognizes JavaScript modules:

   {
     "dependencies": {
       "@web5/api": "0.11.0"
     },
     "type": "module"
   }

Step 6 : Create an `index.js` file for your application logic:

   touch index.js

For Windows using PowerShell:

New-Item index.js -ItemType File

At this point, your workspace and package.json file should look like this:

Next ⏩️ ⏩️ ⏩️ Connect to Web5 and on a DWN

Prev ⏪️ ⏪️ ⏪️ Intro

A Practical Guide to CRUD Operations on Decentralized Web Nodes (aka DWNs)

Chris Siku — Fri, 11 Oct 2024 18:08:15 +0000

Introduction

A Decentralized Web Node (DWN) is a cutting-edge data storage and messaging mechanism that leverages Decentralized Identifiers (DIDs) to enable entities to locate, share, and manage both public and private data. In a world where data ownership, privacy, and seamless interaction between applications are becoming increasingly crucial, DWNs provide a powerful solution for decentralized data management.

At its core, a DWN serves as a personal data store, empowering users to fully control their data, determine where to host it (locally or cloud), and define who has permission to access it. Users can also backup their data across multiple nodes to ensure continuous availability, even in the event of system failures. Additionally, DWNs allow for effortless data exchange between individuals, where each entity can send or receive information simply by resolving the recipient's DID.

This technical guide delves into the essential components of DWNs, exploring their data management capabilities. Throughout this guide, everything will be written in JavaScript, covering how developers can:

Whether you're new to decentralized systems or a seasoned developer looking to implement DWNs in your project, this guide will walk you through the fundamentals and advanced concepts, illustrating how DWNs empower users to securely manage and exchange data in a decentralized manner. Each chapter will break down specific aspects of DWN functionality, ensuring you have the knowledge and tools to build, manage, and operate your own Decentralized Web Node using JavaScript.

Github : https://github.com/Chrissiku/web5-crud-dwn

Next ⏩️ ⏩️ ⏩️ Configuring the Workspace

Decentralized Identity Simplified: How to Resolve DIDs Effectively

Chris Siku — Sun, 06 Oct 2024 18:38:57 +0000

Jane and Bob are set to embrace the anonymous web, but they need to effectively manage their identities in this new digital landscape. This article delves into how Web5 empowers users to manage their digital identities using Decentralized Identifiers (DIDs). We will focus on the technical aspects of DIDs, particularly the resolution process, which allows users to retrieve and interact with their identity documents securely.

Understanding DIDs

Decentralized Identifiers (DIDs) serve as unique identifiers that enable individuals and entities to manage their digital identities independently of central authorities. They facilitate secure and private control over online identities, essential for maintaining privacy in decentralized applications.

Key Features of DIDs

Decentralization: DIDs are stored on distributed networks, ensuring user control over their identities.
Self-Sovereignty: Users maintain independent control over their DIDs, deciding who can access their information.
Verifiability: DIDs link to verifiable credentials, allowing users to prove their identity without unnecessary data disclosures.
Interoperability: DIDs are compatible across diverse platforms, facilitating seamless user interactions.
DID Documents: Each DID corresponds to a DID Document containing public keys, service endpoints, and other metadata necessary for identity verification.

A typical DID appears as a unique resource identifier, such as did:example:123456, and is crucial for identity verification, authentication, and access control in decentralized web applications (DWAs).

Creating DIDs

Before Jane and Bob can explore the decentralized web, they need to create their DIDs. Different DID methods are available, each suited for specific purposes. In Web5, the following methods are currently supported:

did:dht: This method utilizes BitTorrent's Mainline Distributed Hash Table (DHT) for managing DIDs and storing DID Documents. It supports essential operations like creating, reading, updating, and deactivating DIDs.
did:jwk: This method encodes a JSON Web Key (JWK) in base64url format, providing a straightforward way to create a DID.

Implementation in JavaScript

To demonstrate how to create and resolve DIDs in Web5, we will set up a simple JavaScript project. Ensure you have Node.js and npm installed on your machine.

Set Up Your Project Workspace

Initialize your project with the following commands:

mkdir resolveDid
cd resolveDid
touch index.js
npm init -y

Install the DID Dependencies

Install the required Web5 DID libraries:

npm install @web5/dids@1.1.5

Import DID Methods

Open your index.js file and import the necessary DID methods:

// index.js

import { DidDht } from '@web5/dids'; // for did:dht
import { DidJwk } from '@web5/dids'; // for did:jwk

Create DIDs

You can now create DIDs for Jane and Bob as follows:

// index.js

const janeDid = await DidDht.create({ publish: true });
const bobDid = await DidJwk.create({ publish: true });

// Log the created DIDs
console.log("Jane's DID: ", janeDid);
console.log("Bob's DID: ", bobDid);

Expected Output

When you run the code, you should see output similar to the following:

Jane's DID:  BearerDid {
  uri: 'did:dht:x93tdiotgud98izm9y81hxd93m61yopyijzkqbhtqzshgsbucajy',
  document: { ... },
  metadata: { published: true, versionId: '1728222149' },
  keyManager: LocalKeyManager { ... }
}

Bob's DID:  BearerDid {
  uri: 'did:jwk:eyJjcnYiOiJFZDI1NTE5Iiwia3R5IjoiT0tQIiwieCI6IjB5akd0...'
  document: { ... },
  metadata: {},
  keyManager: LocalKeyManager { ... }
}

Resolving DIDs

Resolving a DID involves retrieving the DID Document associated with a Decentralized Identifier. This document contains critical information such as public keys, authentication methods, and service endpoints.

To resolve the DIDs for Jane and Bob, use the following code:

Resolve Jane's DID

// index.js

const resolvedJaneDid = await DidDht.resolve(janeDid.uri);
const janeDidDocument = resolvedJaneDid.didDocument;
console.log("Jane's DID Document: ", janeDidDocument);

Resolve Bob's DID

// index.js

const resolvedBobDid = await DidJwk.resolve(bobDid.uri);
const bobDidDocument = resolvedBobDid.didDocument;
console.log("Bob's DID Document: ", bobDidDocument);

With the creation and resolution of DIDs, Jane and Bob can securely manage their identities in the decentralized web. This capability not only enhances their privacy but also empowers them with control over their personal data, aligning with the principles of self-sovereignty and decentralization in Web5.

The Future of Web: How Web5 Transforms Identity and Data OwnerShip

Chris Siku — Sat, 05 Oct 2024 18:17:48 +0000

The internet has undergone massive transformations over the years, evolving from a static information hub into an interactive digital world. We started with web1, a read-only web, moved to Web2, the read-write web, and are now entering the era of Web3, where decentralization is the buzzword, focusing on data ownership and security through blockchain, but not really decentralized. However, there’s a new contender that takes decentralization even further and aims to simplify and revolutionize how we manage identity and data online—Web5.

While Web3 is known for enabling ownership of digital assets, Web5’s primary focus is on decentralized identity and data storage. Developed by TBD, a division of Block, Web5 seeks to return ownership of identity and personal data to individuals, making the web a safer, more user-centered experience. This article will explore what Web5 is, why it matters, and how it differs from earlier versions of the web, while also highlighting use cases, components, and the potential impact on the digital landscape.

The Evolution of the Web: Web1 to Web5

Before diving into Web5, it’s important to understand how the web has evolved:

Web1 (The Read-Only Web): The first version of the web was all about static content. Users could only consume information from websites without interacting or contributing.
Web2 (The Read-Write Web): The web became more interactive with the rise of social media, blogs, and content creation platforms. However, with this came the problem of centralization. Major tech companies (Amazon, Google, Facebook, apple, ...) began controlling vast amounts of user data, creating data silos that users have little control over.
Web3 (The Read-Write-Own Web): Web3 introduced decentralization through blockchain, cryptocurrencies, and smart contracts. It aimed to give users more control over their digital assets, but the technical complexity and reliance on crypto have limited its mainstream adoption.
Web5 (The Fully Decentralized Web): Web5 takes decentralization to the next level in the evolution of the web, delivering true decentralization by giving individuals full control over their data, identity, and finances. Unlike Web3, which still relies on blockchain platforms like Ethereum or Bitcoin, Web5 eliminates intermediaries altogether through decentralized identity technology and verifiable credentials. This allows users to securely own and manage their personal information across platforms without dependency on centralized entities. By placing individuals at the center of the internet, Web5 empowers users to decide how their data is used and shared, creating a safer, more user-controlled digital experience.

What is Web5?

Web5 is a decentralized web platform designed to empower individuals to control their identity and personal data. In today’s web, identity and data are largely owned by centralized platforms, forcing users to create numerous accounts and passwords across services. Web5 disrupts this model by giving users complete ownership of their digital identities and data through it's 3 plillars Decentralized Identifiers (DIDs), Verifiable Credentials, and Decentralized Web Nodes (DWNs).

Web5 is a decentralized web platform that combines the strengths of Web2 (such as frameworks and modern web technologies) with the principles of Web3 (like decentralization and user empowerment) to create a more user-centric internet. In today’s web, identity and data are typically controlled by centralized platforms, forcing users to manage multiple accounts and passwords across services. Web5 disrupts this model by giving individuals complete ownership of their digital identities and data.

The platform is built on three key Components: Decentralized Identifiers (DIDs), Verifiable Credentials, and Decentralized Web Nodes (DWNs). This enables users to control how their personal data is stored, shared, and used, ensuring they have the final say over their information. Essentially, Web5 is a fusion of Web2 and Web3, where users, not platforms, hold the power over their own data.

Key Components of Web5

Web5 is built on three essential technologies that enable decentralized identity and data storage:

1. Decentralized Identifiers (DIDs)

DIDs are a foundational component of Web5 and are based on W3C international standards. A DID is a self-sovereign, decentralized identity that is controlled entirely by the individual who owns it. This eliminates the need for third-party identity providers, such as Google or Facebook, and allows users to authenticate across different platforms using the same DID.

A DID is a unique address that represents your identity on the decentralized web, corresponding to a person, organization, object, data model, or even an abstract entity. Through your DID, others can send you messages and data, as well as access the information you choose to share with them.

With DIDs, users gain complete control over their identity, enabling them to authenticate with applications, services, and websites without needing multiple logins or profiles. This streamlines the user experience while enhancing privacy and security.

2. Verifiable Credentials

Verifiable Credentials are digital records that are cryptographically signed by a trusted authority to provide information about an individual. For example, a university might issue a verifiable credential that confirms a person's graduation status. These credentials are designed to be tamper-proof and can be easily verified by others without disclosing unnecessary details.

This system enables users to securely manage and share important documents—such as degrees, licenses, and certifications—in a decentralized manner, while retaining complete control over who can access their information.

Verifiable Credentials represent specific facts about a person, similar to digital badges. For instance, claims like "Jane has a degree from Decentralized University" or "Bob is employed at Acme, Inc." can be expressed through VCs. These credentials allow individuals to share specific attributes of their identity or qualifications without relying on centralized authorities or exposing their entire identity.

3. Decentralized Web Nodes (DWNs)

A Decentralized Web Node (DWN) acts as a personal data locker that securely stores an individual's information. Unlike traditional systems that rely on central servers, DWNs empower users to independently store and manage their data. This enables individuals to share their information with trusted services and revoke access at any time, ensuring they maintain complete control over their personal data.

A DWN is essentially a personal data store, allowing you to:

Own your data: You decide where to host your node and control who has access.
Back up your data: You can host multiple nodes in different locations, keeping them all synced effortlessly. If one node goes down, you still have your backup.
Send and receive data: For example, Jane manages her DWN using her DID, while Bob manages his DWN with his own DID. Jane can send data to Bob simply by resolving his DID.

In essence, a Decentralized Web Node (DWN) functions as both a data storage solution and a message relay mechanism, allowing entities to access authorized public or private data associated with a specific Decentralized Identifier (DID).

How Web5 Works: Use Cases

Web5 reimagines how individuals manage their identities and data by decentralizing these processes. Here are two illustrative use cases that demonstrate the practical application of Web5 technologies:

1. Control Your Identity

Jane is a typical internet user who wants to manage her digital identity securely. She decides to use Web5 and sets up a decentralized wallet that stores her Decentralized Identifier (DID).

Signing In: When Jane wants to join a new social media platform, she doesn't need to fill out a registration form or create a password. Instead, she simply uses her DID stored in her decentralized wallet to authenticate herself.
Data Storage: All her interactions on the social media app—like posts, friend connections, and messages—are saved in her Decentralized Web Node (DWN). This means that instead of the social media platform controlling her data, she retains full ownership and control over it.
Seamless Experience: If Jane decides to switch to a different social media platform, she can do so effortlessly. Since her social data is stored in her DWN, she doesn’t lose any of her history or interactions.
Data Access Control: Jane can also manage who has access to her data. If she shares her profile with a new platform, she can revoke that access at any time. This means she has the freedom to choose what information to share, enhancing her privacy and security.

2. Own Your Data

Bob is an enthusiastic music fan who has grown frustrated with how music streaming services handle personal data. Every time he tries a new app, he finds himself rebuilding his playlists and preferences from scratch.

Personal Data Storage: With Web5, Bob uses his DWN to store his music preferences, playlists, and settings. This personal data locker allows him to keep everything in one place, independent of any particular service.
Cross-Platform Flexibility: When Bob decides to try out a new music streaming app, he can easily grant that app access to his preferences stored in his DWN. This allows the new service to access his playlists and personalized settings without him having to recreate them.
Avoiding Vendor Lock-In: By owning his data and controlling its access, Bob eliminates the frustration of vendor lock-in. He can switch between different music services freely, maintaining a consistent listening experience without losing his data.

3 Own your finance with Verifiable Credentials

Charlie is a young professional who wants to apply for a loan but is concerned about how his personal information is handled during the application process.

Using Verifiable Credentials: When Charlie applies for the loan, the financial institution requires proof of his income and employment status. Instead of providing sensitive documents like pay stubs or tax returns directly, Charlie uses Verifiable Credentials issued by his employer.
Seamless Verification: His employer has issued a digital credential verifying his employment and salary details, cryptographically signed to ensure its authenticity. Charlie shares this credential with the financial institution via his DWN, allowing them to verify his information without needing to see the actual documents.
Enhanced Privacy: By using Verifiable Credentials, Charlie doesn’t have to worry about sharing unnecessary personal data. The financial institution can confirm his employment status without accessing any other information stored in his DWN.
Efficient Process: This approach not only streamlines the loan application process but also enhances trust between Charlie and the financial institution. They can independently verify his credentials while Charlie retains control over his personal data.

Note :

These use cases illustrate how Web5 empowers users like Jane, Bob and Charlie to control their identities and data in a decentralized environment. By leveraging DIDs, DWNs, and Verifiable Credentials, individuals can enjoy a seamless digital experience that prioritizes their privacy, security, and autonomy. In a world where data is often locked into specific platforms, Web5 offers a revolutionary approach that places power back into the hands of the users.

Benefits of Web5

The transition to Web5 offers several compelling benefits for both users and developers:

Full Control of Identity: Users have complete autonomy over their digital identities, allowing them to manage and control their personal information without relying on centralized services. This significantly reduces the risk of data breaches, identity theft, and misuse of personal information, providing a safer online experience.
Decentralized Data Storage: Web5 empowers users to store their data securely in Decentralized Web Nodes (DWNs). This eliminates the need to keep user data locked away in centralized platforms, giving individuals control over who can access their information and how it can be used.
Interoperability Across Platforms: With Web5, users can manage their identity and data independently, allowing them to seamlessly move between different applications without losing their digital persona or needing to recreate accounts. This flexibility enhances user experience and fosters a more interconnected digital ecosystem.
Privacy and Security: By using decentralized personal data lockers, users can ensure that their personal information is only shared with trusted parties. Web5’s emphasis on cryptographic security means that data is less vulnerable to breaches, giving users peace of mind.
Enhanced User Experience: Web5 streamlines the authentication process by allowing users to log in to different services with their Decentralized Identifiers (DIDs), eliminating the need for multiple usernames and passwords. This simplification improves user experience and reduces the frustration of managing numerous accounts.
Empowerment through Ownership: By returning ownership of data and identity to individuals, Web5 empowers users to dictate how their information is used and shared. This shift promotes a more user-centered approach to the internet, encouraging responsible data management and enhancing user agency.
Reduced Vendor Lock-In: Users can avoid vendor lock-in by maintaining their data independently of any single service provider. This freedom allows them to switch between services without losing their personal data, fostering a competitive environment that benefits consumers.
Greater Trust in Digital Interactions: The use of Verifiable Credentials and cryptographic signatures enhances trust between users and service providers. Since data can be verified without exposing unnecessary personal information, users can engage with various platforms with confidence in the integrity of their transactions.
Support for Innovation: Web5’s decentralized architecture encourages innovation by allowing developers to build applications that are not constrained by centralized platforms. This opens the door to new possibilities for creative solutions and user-focused technologies.

Note

Web5 represents a significant evolution in how individuals interact with the internet. By prioritizing user control, privacy, and security, Web5 offers a more empowering and seamless experience for both users and developers. As this new paradigm continues to develop, it has the potential to reshape the digital landscape, making it more inclusive, trustworthy, and user-centered.

The Future of Web5

The future of Web5 looks bright, with several exciting developments on the horizon:

More users are joining: As people discover the benefits of Web5, more users will start using its technologies. Educational and easy-to-use tools will help everyone understand how to manage their identity and data securely online.
Compatibility standards: Creating clear rules for how different Web5 projects work together will make it easier for users to move between applications without losing their information.
New laws and regulations: As Web5 grows, governments will need to update laws to protect user data while fostering innovation. Collaboration between technology developers and legislators will help shape these regulations.
Combination with new technologies: Web5 will likely work with emerging technologies such as artificial intelligence (AI) and the Internet of Things (IoT) to improve user experience and data management.
Better security measures: There will be a greater focus on security, leading to better protection of user data and greater confidence in using Web5.
Rise of decentralized applications: More decentralized applications (dApps) will emerge, giving users more choice and control over their online experiences.
Cultural shift towards data ownership: People are increasingly aware of the importance of owning their data, which will encourage companies to prioritize ethical practices.
Community orientation: The future could see more community-driven projects that value transparency and inclusivity, ensuring that users’ needs come first.

Conclusion

Web5 represents a significant step forward in the evolution of the Internet, surpassing the limitations of Web3 by fully decentralizing control of identity and personal data. This innovative framework offers an exciting alternative to the centralized, data-driven platforms we currently rely on, giving users autonomy in their digital lives.

As we enter this new era, Web5 promises a more secure, more private, and more user-centric Internet, where everyone can take charge of their online presence. Whether you're a developer looking to harness the potential of decentralized applications or a user looking to reclaim your digital identity, Web5 is paving the way for the future of the web.

Now is the time to embrace decentralized identity and data ownership. By exploring and adopting Web5 technologies, we can collectively help create a safer and more equitable online environment for everyone.

Upload multiple images To Rails 7 API - Active_storage : Part 2

Chris Siku — Mon, 13 Mar 2023 10:37:08 +0000

Uploading multiple images is a common task when building web applications.

In this blog post, we will go through the steps to upload multiple images to a backend API using React.js

This blog post is the part of our will be divided into 2 parts

Part 1 : Backend API whit Rails 7

Github link : multiple-image-uploads-api
Blog post : Part 1

Part 2 : Frontend with React.js

Github link : multiple-image-uploads-client

First create a new react app bootstraped with vitejs

npm create vite@latest multiple-image-uploads-client

Select React click enter, then javascript as shown on the images bellow

React	JavaScript

Navigate to the project and install all dependencies

cd multiple-image-uploads-client
npm install

Go back to the backend project and run the rails server again

rails server

Now open the frontend in your prefered code editor and run server as well

npm run dev

At this point you should have 2 servers running on 2 differents ports.

The backend on http://127.0.0.1:3000/ and the frontend on http://127.0.0.1:5173/

Clean up the App.jsx file in under src/ directory and make it look like the following :

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="App">
      Upload multiple images To Rails 7 API - Active_storage : Part 1
    </div>
  );
}

export default App;

At this point we can start implementing all neccessary features. copy and paste the following code into App.jsx file then read the explaination after.

import { useState, useRef } from "react";
import "./App.css";

const API_URL = "http://127.0.0.1:3000";

function App() {
  const [images, setImages] = useState([]);
  const imagesRef = useRef(null);
  const postToGet = useRef("");

  const handleUpload = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("post[title]", Date.now().toString());

    if (imagesRef.current && imagesRef.current.files) {
      for (let i = 0; i < imagesRef.current.files.length; i++) {
        formData.append("post[images][]", imagesRef.current.files[i]);
      }
      postData(formData);
    }
  };

  const postData = (formData) => {
    fetch(`${API_URL}/posts`, {
      method: "POST",
      body: formData,
    })
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        getImages(data.id);
      })
      .catch((err) => console.log(err));
  };

  const getImages = (postId) => {
    fetch(`${API_URL}/posts/${postId}`)
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        setImages(data.images || []);
      })
      .catch((err) => console.log(err));
  };

  return (
    <div className="App">
      {/* upload form */}
      <form style={{ margin: "10px" }}>
        <input
          type="file"
          name="image"
          multiple
          ref={imagesRef}
          style={{ margin: "5px" }}
        />
        <button type="button" onClick={handleUpload}>
          Submit
        </button>
      </form>
      {/* Get images button */}
      <div style={{ margin: "10px" }}>
        <input
          type="number"
          ref={postToGet}
          placeholder="ID to retrieve"
          style={{ margin: "5px" }}
        />
        <button onClick={() => getImages(postToGet.current.value)}>
          Get Images
        </button>
      </div>
      {/* images */}
      <div className="images">
        {images.map((image, index) => (
          <img
            key={index}
            src={image}
            alt="uploaded"
            style={{ width: "200px", height: "200px", margin: "10px" }}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

Explainations :

This is a React application that allows users to upload images and retrieve previously uploaded images by making API requests to a local server at http://127.0.0.1:3000.

The useState and useRef hooks are imported from the react module at the beginning of the file.

The App function is defined as the main component of the application. Inside the component, the state variable images is initialized to an empty array and the ref variable imagesRef is initialized to null. Another ref variable postToGet is initialized to an empty string.

The handleUpload function is defined to handle the form submission when the user uploads an image. The function first prevents the default form submission behavior by calling preventDefault() on the event object passed in as an argument. It then creates a new FormData object and appends the title of the post, which is set to the current timestamp as a string. The function then loops through the files property of the imagesRef ref variable and appends each file to the FormData object. Finally, the postData function is called with the FormData object as an argument.

The postData function sends a POST request to the server using the fetch API. It includes the formData object as the body of the request and sets the content type to multipart/form-data. When the response is received, it is converted to JSON using the json() method and the resulting data is logged to the console. The getImages function is then called with the id of the newly created post as an argument. If there is an error, it is caught and logged to the console.

The getImages function sends a GET request to the server to retrieve the images associated with a specific post ID. When the response is received, it is converted to JSON using the json() method and the resulting data is logged to the console. If the response includes an images property, the state variable images is updated with the array of images. If there is an error, it is caught and logged to the console.

The return statement of the App function includes a form for uploading images, a form for retrieving images by post ID, and a section for displaying the images. The form for uploading images includes an input element of type file with the imagesRef ref variable attached to it, and a button element with an onClick event listener attached to it that calls the handleUpload function. The form for retrieving images includes an input element of type number with the postToGet ref variable attached to it, and a button element with an onClick event listener attached to it that calls the getImages function with the value of the postToGet ref variable as an argument. The section for displaying images includes an array of img elements, each with a unique key attribute, a src attribute set to the URL of the image, and styling to set the dimensions and margin. The images state variable is mapped over to create the array of img elements.

Finally, the App component is exported as the default export of the module, allowing it to be used in other parts of the application.

If you have any suggestions, please feel free to leave a comment and connect with me so that we can implement them together through pair-programming. Don't forget to follow, like, and share.

⏮⏮ part 1

Upload multiple images To Rails 7 API - Active_storage : Intro

Chris Siku — Mon, 13 Mar 2023 10:29:22 +0000

Uploading multiple images is a common requirement for many web applications. This blog post will guide you through the process of uploading multiple images to a backend API using React.js. This blog post is part of a two-part series.

In Part 1, we will cover the backend API development with Rails 7, which involves setting up the Rails project, configuring the database, creating the necessary controllers and models, and adding the logic to handle image uploads. The code for the backend API is available on GitHub via the link multiple-image-uploads-api and the blog post is available on dev.to via the link Upload multiple images To Rails 7 API - Active_storage : Part 1

In Part 2, we will cover the frontend development with React.js, which involves creating a form to upload images, calling the backend API endpoints to upload the images, and displaying the uploaded images on the page. The code for the frontend application is available on GitHub via the link multiple-image-uploads-client and the blog post is available on dev.to via the link Upload multiple images To Rails 7 API - Active_storage : Part 2

By the end of this two-part series, you will have a complete understanding of how to upload multiple images to a backend API using React.js, and have a working example that you can build upon in your own projects.

... Part 1 ⏭⏭

Upload multiple images To Rails 7 API - Active_storage : Part 1

Chris Siku — Sun, 12 Mar 2023 11:37:45 +0000

Uploading multiple images is a common task when building web applications.

With the release of Rails 5.2, we were introduced to Active Storage, a framework for managing file uploads to a cloud storage service or the local disk. In this blog post, we will walk through how to upload multiple images to a Rails 7 API using Active Storage.

In this blog post, we will go through the steps to upload multiple images to a Ruby on Rails 7 API using Active Storage, a framework for managing file uploads to a cloud storage service or the local disk.

This blog post is divided into 2 parts

Part 1 : Backend API whit Rails 7

Github link : multiple-image-uploads-api

Part 2 : Frontend with React.js

Github link : multiple-image-uploads-client
Blog post : Part 2

Part 1 : Backend API

First, we need to create a new Rails API application using the following command in your terminal:

rails new multiple-image-uploads --api -d postgresql

Then, navigate to the new application directory using the command

cd multiple-image-uploads

Next, generate a Post model using scaffold. This model will be used to represent the posts that will contain the uploaded images:

rails g scaffold post

After generating the Post model, we need to install Active Storage using the following command:

rails active_storage:install

This command will create the necessary database tables and migration files to enable Active Storage.

Next, we need to update the Gemfile file to include two necessary gems: image_processing and rack-cors. Uncomment these gems and run bundle install to update all your gems.

# [...]
gem "image_processing"
gem "rack-cors"

To allow all origins to access the API, update the cors.rb file under config/initializers:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "*"

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Now that Active Storage is installed, we can set up the Active Storage association in the Post model. In the post.rb file under app/models/, add the following code:

class Post < ApplicationRecord
  has_many_attached :images
end

With the association set up, we need to update the posts_controller.rb file to handle image uploads. Replace the contents of this file with the following code:

class PostsController < ApplicationController
  before_action :set_post, only: %i[show update destroy]

  # GET /posts
  def index
    @posts = Post.all

    render json: @posts
  end

  # GET /posts/1
  def show
    render json: @post.as_json(include: :images).merge(
      images: @post.images.map do |image|
        url_for(image)
      end,
    )
  end

  def create
    # The `Post` model should be defined or required in this file.
    @post = Post.new(post_params.except(:images))

    # The `save` method should be called after images have been attached.
    if @post.save
      images = params[:post][:images]

      if images
        images.each do |image|
          @post.images.attach(image)
        end
      end

      render json: @post, status: :created, location: @post
    else
      render json: @post.errors, status: :unprocessable_entity
    end
  end

  # PATCH/PUT /posts/1
  def update
    if @post.update(post_params)
      render json: @post
    else
      render json: @post.errors, status: :unprocessable_entity
    end
  end

  # DELETE /posts/1
  def destroy
    @post.destroy
  end

  private

  # Use callbacks to share common setup or constraints between actions.
  def set_post
    @post = Post.find(params[:id])
  end

  # Only allow a list of trusted parameters through.
  def post_params
    params.require(:post).permit(images: [])
  end
end

The show action will return a JSON response of a specific post and its images. The as_json method is used to include the associated images with the post, and the merge method is used to add a new key-value pair images in the response JSON that contains an array of image URLs.

The create action creates a new post and attaches any images that were passed in the request parameters. The except method is used to remove the images parameter from the post_params hash, as it is handled separately in the images variable. The permit method is used to allow an array of image attachments to be passed in the request parameters.

The update action updates an existing post with the new parameters passed in the request. The save method is used to update the post with the new parameters, and the post_params method is passed in as an argument.

The destroy action deletes a specific post.

The set_post method is a private method that finds the post with the specified ID and assigns it to the instance variable @post.

The before_action method is used to call this method before the show, update, and destroy actions are executed.

Now we Confugure the database and make sure that the database.yml file under config/ directory looks like the following

default: &default
  adapter: postgresql
  encoding: unicode
  username: postgres
  password: 123456
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

development:
  <<: *default
  database: multiple_image_uploads_development

  <<: *default
  database: multiple_image_uploads_test

production:
  <<: *default
  database: multiple_image_uploads_production
  username: multiple_image_uploads
  password: <%= ENV["MULTIPLE_IMAGE_UPLOADS_DATABASE_PASSWORD"] %>

You can replace the username and password by you postgres host configuration

Create the database and run migrations

rails db:create db:migrate

Now run the rails server

rails server

The database.yml file under the config/ directory sets the default adapter to PostgreSQL, specifies the database encoding as Unicode, and sets the default pool size to 5 threads. The development and test environments use the same database configuration as the default, while the production environment uses a different database name and a custom username and password.

The rails db:create command creates the databases specified in the database.yml file, and the rails db:migrate command runs any pending migrations to update the database schema.

Finally, the rails server command starts the Rails server, which listens for incoming requests on localhost:3000 by default. With the database configured and the server running, the Rails application is ready to receive and respond to requests.

Overall, this code sets up a RESTful API for posts with image attachments, allowing clients to create, read, update, and delete posts with images.

DEV Community: Chris Siku

How to Structure a REST API the Professional Way

Your API Works. But Does It Slap?

1. Use Resource-Based URLs (No Verbs)

❌ Wrong

✅ Correct

2. Use The Right HTTP Status Codes Correctly

❌ Wrong

✅ Correct

Example in Node.js (Express)

3. Keep JSON Naming Consistent

❌ Wrong

✅ Correct — pick one and stick to it

4. Version Your API from Day One

❌ Wrong

✅ Correct

Example: Express Router with versioning

5. Implement Pagination

❌ Wrong

✅ Correct

Expected response structure

Example in Node.js

6. Separate Authentication from Authorization

✅ Correct approach in Node.js (JWT)

7. Return Structured Error Responses

❌ Wrong

✅ Correct

Reusable error helper in Node.js

8. Use Query Parameters for Filtering and Sorting

❌ Wrong

✅ Correct

Example in Node.js

9. Enforce Security from Day One

Common mistakes to avoid

Rate limiting in Express

Input validation (using Joi)

Hide sensitive fields (Laravel Resource)

10. Design Around Client Needs, Not Your Database

❌ Wrong mindset

✅ Right mindset

Example: Combining fields and transforming data

Summary: What Professional REST APIs Look Like

Update and delete records on a DWN

Updating a Record

Deleting a Record

Complete CRUD Example Code

Protocols: The Data Exchange Contracts

Prev ⏪️ ⏪️ ⏪️ Query and Read record

Query and Read records on a DWN

Query Records

Read Record

Next ⏩️ ⏩️ ⏩️ Update and delete records on a DWN

Prev ⏪️ ⏪️ ⏪️ Create a record

Create records on a DWN

A recap,

Implementation in our project

Next ⏩️ ⏩️ ⏩️ Query and Read records on a DWN

Prev ⏪️ ⏪️ ⏪️ Connect to Web5 and on a DWN

Connect to Web5 and on a DWN in Web5

Connect to Web5

Options

Parameters

Implementation in our project

Next ⏩️ ⏩️ ⏩️ Create records on a DWN

Prev ⏪️ ⏪️ ⏪️ Setting Up the Workspace for Decentralized Web Nodes in JavaScript

Setting Up the Workspace for Decentralized Web Nodes in JavaScript

Prerequisites

Step 1 : **Open your terminal, create and change the working directory

Step 2 : Initialize a package.json file using NPM:

Step 3 : Install Web5 using NPM:

Step 4 : Open the project in your preferred code editor (e.g., VSCode):

Step 5 : Edit the package.json file to include "type": "module" so your project recognizes JavaScript modules:

Step 6 : Create an index.js file for your application logic:

Next ⏩️ ⏩️ ⏩️ Connect to Web5 and on a DWN

Prev ⏪️ ⏪️ ⏪️ Intro

A Practical Guide to CRUD Operations on Decentralized Web Nodes (aka DWNs)

Introduction

Github : https://github.com/Chrissiku/web5-crud-dwn

Next ⏩️ ⏩️ ⏩️ Configuring the Workspace

Decentralized Identity Simplified: How to Resolve DIDs Effectively

Step 2 : Initialize a `package.json` file using NPM:

Step 5 : Edit the `package.json` file to include `"type": "module"` so your project recognizes JavaScript modules:

Step 6 : Create an `index.js` file for your application logic: