- 📗 Table of Contents
- 📖- ✅ HELLO-REACT-FRONT-END
hello-react-front-end
- ✅ React
Language
- JavaScript
- 🔰 Static view
- 🔰 Display API response
To get a local copy up and running, follow these steps.
- Download or clone this repostory.
- Provide a modern web browser.
In order to run this project you need:
- ✔ Ruby installed in your machine. you can download it from here
- ✔ IDE or a code editor installed in your machine.
- ✔ A professional editer such as VS Code.
- ✔ An Updated web browser such as Google Chrome, you can download it from here.
-
Clone this repository to your desired folder:
-
Run this command in your command line interface:
cd YOUR_FOLDER
git clone https://github.com/sagieramos/hello-react-front-end
cd hello-react-front-end
yarn install
- Update the
\.env
with your API URL
POST http:///auth/signup
This endpoint allows the user to create a profile
{
"user": {
"username": "microverse",
"first_name": "Joe",
"last_name": "Stephen",
"email": "email@example.com",
"password": "your_password",
"password_confirmation": "your_password",
"city": "Nigeria"
}
}
- Response
{
"status": {
"code": 200,
"message": "Signed up successfully."
},
"data": {
"first_name": "Joe",
"last_name": "Stephen",
"city": "Nigeria",
"username": "microversehae",
"email": "joedja@gmail.com",
"admin": false
}
}
- status (object)
- code (number): The status code of the response.
- message (string): Any additional message related to the status.
- data (object):
- first_name (string): User's first name.
- last_name (string): User's last name.
- city (string): User's city.
- username (string): User's username.
- email (string): User's email address.
- admin (boolean): Indicates whether the user is an admin (false for regular users).
POST http:///auth/login
This endpoint allows the user to authenticate and login.
-
Request Body
- login (string): This can either be email or username of the user.
- password (string): The password of the user.
-
Request
{
"user": {
"login": "joe@gmail.com",
"password": "your_password"
}
}
Response
- Body
{
"status": {
"code": 0,
"message": "",
"current_user": ""
},
"data": {
"first_name": "",
"last_name": "",
"city": "",
"username": "",
"email": "",
"admin": true
}
}
-
status (object)
- code (number): The status code of the response.
- message (string): Any additional message related to the status.
- current_user (string): The current user's details.
-
data (object)
- first_name (string): The first name of the user.
- last_name (string): The last name of the user.
- city (string): The city of the user.
- username (string): The username of the user.
- email (string): The email of the user.
-
Header
- Authorization: Allows for stateless authentication, scalability, and can simplify the handling of authentication across multiple services
Example request authorization key
const axios = require('axios');
let data = JSON.stringify({
"user": {
"login": "sagie",
"password": "your_password"
}
});
let config = {
method: <YOUR_HTTP_METHOD>,
maxBodyLength: Infinity,
url: 'http://example.com',
headers: {
'authorization': 'Bearer <VALUE>',
'Cookie': '_imuwahen_session=<VALUE>'
},
data : data
};
async function makeRequest() {
try {
const response = await axios.request(config);
console.log(JSON.stringify(response.data));
}
catch (error) {
console.log(error);
}
}
makeRequest();
- Header (object)
- authorization (string): Use to handle user authentication
GET http:///api/v1/:username/reservations
- This endpoint makes an HTTP GET request to retrieve a list of reservations associated with a user by
:username
. The request does not contain a request body. The response to the request has a status code of 200, indicating a successful execution. The response body contains an array of reservation data, including reservation IDs, types, attributes, and item lists associated with each reservation.
GET http:///api/v1/:username/items
POST http:///api/v1/:username/make_admin
- Make user an Admin. Admin has priviledge to manage items.
POST http:///api/v1/:username/remove_admin
GET http://localhost:4000/api/v1/p/items
- Response Structure
The API response follows a standardized format:
{
"status": {
"code": 200,
"message": "Pages Items retrieved successfully.",
"user": "sagie"
},
"data": [
// Array of item objects
],
"meta": {
"total_pages": 1,
"current_page": 1,
"per_page": 10,
"total_count": 6
}
}
The data array contains individual item objects, each with the following properties:
- id: Unique identifier for the item.
- name: Name of the item.
- image: Image information (null if not available).
- description: Description of the item.
- city: City information (null if not specified).
- created_at: Timestamp indicating the item's creation date.
- updated_at: Timestamp indicating the item's last update date.
- reserving_ids: Comma-separated list of reservation IDs associated with the item.
- reserving_usernames: Comma-separated list of usernames associated with the reservations.
The meta object provides additional metadata about the paginated results:
- total_pages: Total number of pages (e.g., 1).
- current_page: Current page number (e.g., 1).
- per_page: Number of items per page (e.g., 10).
- total_count: Total number of items across all pages (e.g., 6).
Clients can customize their requests using the following query parameters:
-
per_page (Items Per Page): Specify the number of items per page. Example: GET
/api/items?page=1&per_page=20
-
current_page (Current Page): Indicate which page to retrieve. Example: GET
/api/items?page=2&per_page=10
Feel free to customize these parameters to suit your application's requirements.
Feel free to customize these parameters to suit your application's requirements.
- url: /s_admin/reservations
example:
{
"reservation": {
"reserve_for_use_date": "2024-01-27",
"reservation_items_attributes": [
{ "item_id": 1 },
{ "item_id": 2 }
]
}
}
- URL: /:username/reservations/:id (replace 1 with the ID of the reservation you want to edit)
- Headers:
- Content-Type: application/json
- Body (raw JSON):
- json Example:
{
"reservation": {
"reserve_for_use_date": "2024-02-10",
"reservation_items_attributes": [
{ "item_id": 3 },
{ "item_id": 4 },
{ "id": 5, "_destroy": true }
]
}
}
In this example, we're updating the reservation with ID 1, changing the reserve_for_use_date, and modifying the associated items by adding items with IDs 3 and 4 while removing the item with ID 5.
This project is deployed by the author, no permission for deployment by any other client.
👤 Stanley Osagie
- GitHub: @sagieramos
- Twitter: @sagieramos
- LinkedIn: LinkedIn
👤 Nilab Khwajazada
- GitHub: @nilab-khwaja
- Twitter: @nilab
- LinkedIn: @nilab-khwajazada
👤 Jubaer Maruf
- GitHub: jubaer_Maruf
- Twitter: @jubaer_maruf
- LinkedIn: Jubaer Maruf
👤 Lawmsangi Varte
- GitHub: @githubhandle
- YouTube: @youtubehandle
- LinkedIn: LinkedIn
- Add a new page
- Give a style
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
If you like this project, kindly drop a start ⭐️ for the repository;
I would like to express my heartfelt gratitude to Microvere for the invaluable learning experience they have provided.
This project is MIT licensed.