Basic React Login using External API
This article is suitable for beginners for creating sign-in and user profile screens using our API.
Read MoreUSER LIST (SEARCH): api/users?search={search}
Method: GET
URL: https://www.melivecode.com/api/users?search=karn
{search}: words for searching
Response (200):
[
{
"id": 1,
"fname": "Karn",
"lname": "Yong",
"username": "karn.yong@melivecode.com",
"avatar": "https://www.melivecode.com/users/1.png"
}
]
USER LIST (PAGINATION): api/users?page={page}&per_page={per_page}
Method: GET
URL: https://www.melivecode.com/api/users?page=1&per_page=10
{page}: current page number
{per_page}: number of records per page
Response (200):
[
"page": 1,
"per_page": 10,
"total": 12,
"total_pages": 2,
"data": [
{
"id": 1,
"fname": "Karn",
"lname": "Yong",
"username": "karn.yong@melivecode.com",
"avatar": "https://www.melivecode.com/users/1.png"
},
{
"id": 2,
"fname": "Ivy",
"lname": "Cal",
"username": "ivy.cal@melivecode.com",
"avatar": "https://www.melivecode.com/users/2.png"
},
{
"id": 3,
"fname": "Walter",
"lname": "Beau",
"username": "walter.beau@melivecode.com",
"avatar": "https://www.melivecode.com/users/3.png"
},
...
]
USER LIST (SORT): api/users?sort_column={sort_column}&sort_order={sort_order}
Method: GET
URL: https://www.melivecode.com/api/users?sort_column=id&sort_order=desc
{sort_column}: a column to be sorted
{sort_order}: sort by asc or desc
Response (200):
[
{
"id": 12,
"fname": "Katarina",
"lname": "Aba",
"username": "katarina.aba@melivecode.com",
"avatar": "https://www.melivecode.com/users/12.png"
},
{
"id": 11,
"fname": "Adrian",
"lname": "Faisal",
"username": "adrian.faisal@melivecode.com",
"avatar": "https://www.melivecode.com/users/11.png"
},
...
]
USER LIST (SEARCH + PAGINATION + SORT): api/users?search={search}&page={page}&per_page={per_page}&sort_column={sort_column}&sort_order={sort_order}
Method: GET
URL: https://www.melivecode.com/api/users?search=ka&page=1&per_page=10&sort_column=id&sort_order=desc
{search}: words for searching {page}: current page number
{per_page}: number of records per page
{sort_column}: a column to be sorted
{sort_order}: sort by asc or desc
Response (200):
[
"page": 1,
"per_page": 10,
"total": 2,
"total_pages": 1,
"data": [
{
"id": 12,
"fname": "Katarina",
"lname": "Aba",
"username": "katarina.aba@melivecode.com",
"avatar": "https://www.melivecode.com/users/12.png"
},
{
"id": 1,
"fname": "Karn",
"lname": "Yong",
"username": "karn.yong@melivecode.com",
"avatar": "https://www.melivecode.com/users/1.png"
}
]
}
USER DETAIL: api/users/{id}
Method: GET
URL: https://www.melivecode.com/api/users/1
{id}: user id
Response (200: Success):
{
"status": "ok",
"user": {
"id": 1,
"fname": "Karn",
"lname": "Yong",
"username": "karn.yong@melivecode.com",
"email": "karn.yong@melivecode.com",
"avatar": "https://www.melivecode.com/users/1.png"
}
}
Response (404: Not Found):
{
"status": "error",
"message": "User with ID = {id} not found"
}
USER CREATE: api/users/create
*Data will be reset to only have the first 12 entries every 15 minutes.
Method: POST
URL: https://www.melivecode.com/api/users/create
Body:
{
"fname": "Cat",
"lname": "Chat",
"username": "cat.chat@melivecode.com",
"password": "1234",
"email": "cat.chat@melivecode.com",
"avatar": "https://www.melivecode.com/users/cat.png"
}
Response (200: OK):
{
"status": "ok",
"message": "User with ID = 11 is created",
"user": {
"id": 11,
"fname": "Cat",
"lname": "Chat",
"username": "cat.chat@melivecode.com",
"email": "cat.chat@melivecode.com",
"avatar": "https://www.melivecode.com/users/cat.png"
}
}
Response (400: Bad Request):
{
"status": "error",
"message": "Missing fields (fname, lname, username, email, and/or avatar)"
}
USER UPDATE: api/users/update
*Only id field is mandatory for update. You cannot update the first 12 entries of the user data.
Method: PUT
URL: https://www.melivecode.com/api/users/update
Body:
{
"id": 11,
"lname": "Gato"
}
Response (200: OK):
{
"status": "ok",
"message": "User with ID = 11 is updated",
"user": {
"id": 11,
"fname": "Cat",
"lname": "Gato",
"username": "cat.chat@melivecode.com",
"email": "cat.chat@melivecode.com",
"avatar": "https://www.melivecode.com/users/cat.png"
}
}
Response (404: Not Found):
{
"status": "error",
"message": "User with ID = {id} not found"
}
USER DELETE: api/users/delete
*Only id field is mandatory for update. You cannot delete the first 12 entries of the user data.
Method: DELETE
URL: https://www.melivecode.com/api/users/delete
Body:
{
"id": 11
}
Response (200: OK):
{
"status": "ok",
"message": "User with ID = 11 is deleted"
}
Response (404: Not Found):
{
"status": "error",
"message": "User with ID = {id} not found"
}
LOGIN (JWT): api/login
Method: POST
URL: https://www.melivecode.com/api/login
Body:
{
"username": "karn.yong@melivecode.com",
"password": "melivecode",
"expiresIn": 60000
}
*expiresIn, i.e., token expire time (millisec), is optional
Response (200: OK):
{
"status": "ok",
"message": "Logged in",
"accessToken": "eyJhbGciOiJIUzI1NiIsInR5cC...",
"expiresIn": 60000,
"user": {
"id": 1,
"fname": "Karn",
"lname": "Yong",
"username": "karn.yong@melivecode.com",
"email": "karn.yong@melivecode.com",
"avatar": "https://www.melivecode.com/users/1.png"
}
}
Response (400: Bad Request):
{
"status": "error",
"message": "Missing username and/or password"
}
Response (401: Unauthorized):
{
"status": "error",
"message": "Login failed"
}
USER DETAIL (JWT): api/auth/users
Method: GET
URL: https://www.melivecode.com/api/auth/user
Bearer Token:
eyJhbGciOiJIUzI1NiIsInR5cC...
Response (200: Success):
{
"status": "ok",
"user": {
"id": 1,
"fname": "Karn",
"lname": "Yong",
"username": "karn.yong@melivecode.com",
"email": "karn.yong@melivecode.com",
"avatar": "https://www.melivecode.com/users/1.png"
}
}
Response (403: Forbidden):
{
"status": "forbidden",
"message": "Access Token Invalid"
}
Response (401: Unauthorized):
{
"status": "forbidden",
"message": "No Authorization Header"
}
USER DETAIL (JWT): api/auth/users/{id}
Method: GET
URL: https://www.melivecode.com/api/auth/user
{id}: user id
Bearer Token:
eyJhbGciOiJIUzI1NiIsInR5cC...
Response (200: Success):
{
"status": "ok",
"user": {
"id": 1,
"fname": "Karn",
"lname": "Yong",
"username": "karn.yong@melivecode.com",
"email": "karn.yong@melivecode.com",
"avatar": "https://www.melivecode.com/users/1.png"
}
}
Response (403: Forbidden):
{
"status": "forbidden",
"message": "Access Token Invalid"
}
Response (401: Unauthorized):
{
"status": "forbidden",
"message": "No Authorization Header"
}
ATTRACTION LIST: api/attractions
Method: GET
URL: https://www.melivecode.com/api/attractions
Response (200):
[
{
"id": 1,
"name": "Phi Phi Islands",
"detail": "Phi Phi Islands are a group of islands in Thailand between the large island of Phuket and the Malacca Coastal Strait of Thailand.",
"coverimage": "https://www.melivecode.com/attractions/1.jpg",
"latitude": 7.737619,
"longitude": 98.7068755
},
{
"id": 2,
"name": "Eiffel Tower",
"detail": "Eiffel Tower is one of the most famous structures in the world. Eiffel Tower is named after a leading French architect and engineer. It was built as a symbol of the World Fair in 1889.",
"coverimage": "https://www.melivecode.com/attractions/2.jpg",
"latitude": 48.8583736,
"longitude": 2.2922926
},
{
"id": 3,
"name": "Times Square",
"detail": "Times Square has become a global landmark and has become a symbol of New York City. This is a result of Times Square being a modern, futuristic venue, with huge advertising screens dotting its surroundings.",
"coverimage": "https://www.melivecode.com/attractions/3.jpg",
"latitude": 40.7589652,
"longitude": -73.9893574
},
{
"id": 4,
"name": "Mount Fuji",
"detail": "Mount Fuji is the highest mountain in Japan, about 3,776 meters (12,388 feet) situated to the west of Tokyo. Mount Fuji can be seen from Tokyo on clear days.",
"coverimage": "https://www.melivecode.com/attractions/4.jpg",
"latitude": 35.3606422,
"longitude": 138.7186086
},
...
]
ATTRACTION LIST (SEARCH): api/attractions?search={search}
Method: GET
URL: https://www.melivecode.com/api/attractions?search=island
{search}: words for searching
Response (200):
[
{
"id": 1,
"name": "Phi Phi Islands",
"detail": "Phi Phi Islands are a group of islands in Thailand between the large island of Phuket and the Malacca Coastal Strait of Thailand.",
"coverimage": "https://www.melivecode.com/attractions/1.jpg",
"latitude": 7.737619,
"longitude": 98.7068755
},
{
"id": 8,
"name": "Statue of Liberty",
"detail": "The Statue of Liberty is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City, in the United States. The copper statue, a gift from the people of France to the people of the United States.",
"coverimage": "https://www.melivecode.com/attractions/8.jpg",
"latitude": 40.689167,
"longitude": -74.044444
}
]
ATTRACTION LIST (PAGINATION): api/attractions?page={page}&per_page={per_page}
Method: GET
URL: https://www.melivecode.com/api/attractions?page=1&per_page=10
{page}: current page number
{per_page}: number of records per page
Response (200):
[
"page": 1,
"per_page": 10,
"total": 12,
"total_pages": 2,
"data": [
{
"id": 1,
"name": "Phi Phi Islands",
"detail": "Phi Phi Islands are a group of islands in Thailand between the large island of Phuket and the Malacca Coastal Strait of Thailand.",
"coverimage": "https://www.melivecode.com/attractions/1.jpg",
"latitude": 7.737619,
"longitude": 98.7068755
},
{
"id": 2,
"name": "Eiffel Tower",
"detail": "Eiffel Tower is one of the most famous structures in the world. Eiffel Tower is named after a leading French architect and engineer. It was built as a symbol of the World Fair in 1889.",
"coverimage": "https://www.melivecode.com/attractions/2.jpg",
"latitude": 48.8583736,
"longitude": 2.2922926
},
{
"id": 3,
"name": "Times Square",
"detail": "Times Square has become a global landmark and has become a symbol of New York City. This is a result of Times Square being a modern, futuristic venue, with huge advertising screens dotting its surroundings.",
"coverimage": "https://www.melivecode.com/attractions/3.jpg",
"latitude": 40.7589652,
"longitude": -73.9893574
},
...
]
ATTRACTION LIST (SORT): api/attractions?sort_column={sort_column}&sort_order={sort_order}
Method: GET
URL: https://www.melivecode.com/api/attractions?sort_column=id&sort_order=desc
{sort_column}: a column to be sorted
{sort_order}: sort by asc or desc
Response (200):
[
{
"id": 12,
"name": "Wat Phra Kaew",
"detail": "Wat Phra Kaew, commonly known in English as the Temple of the Emerald Buddha and officially as Wat Phra Si Rattana Satsadaram, is regarded as the most sacred Buddhist temple in Thailand. The complex consists of a number of buildings within the precincts of the Grand Palace in the historical centre of Bangkok.",
"coverimage": "https://www.melivecode.com/attractions/12.jpg",
"latitude": 13.751389,
"longitude": 100.4925
},
{
"id": 11,
"name": "Hollywood Sign",
"detail": "The Hollywood Sign is an American landmark and cultural icon overlooking Hollywood, Los Angeles, California. It is situated on Mount Lee, in the Beachwood Canyon area of the Santa Monica Mountains. Spelling out the word Hollywood in 45 ft (13.7 m)-tall white capital letters and 350 feet (106.7 m) long.",
"coverimage": "https://www.melivecode.com/attractions/11.jpg",
"latitude": 34.134061,
"longitude": -118.321592
},
...
]
ATTRACTION LIST (SEARCH + PAGINATION + SORT): api/attractions?search={search}&page={page}&per_page={per_page}&sort_column={sort_column}&sort_order={sort_order}
Method: GET
{search}: words for searching {page}: current page number
{per_page}: number of records per page
{sort_column}: a column to be sorted
{sort_order}: sort by asc or desc
Response (200):
[
"page": 1,
"per_page": 10,
"total": 2,
"total_pages": 1,
"data": [
{
"id": 8,
"name": "Statue of Liberty",
"detail": "The Statue of Liberty is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City, in the United States. The copper statue, a gift from the people of France to the people of the United States.",
"coverimage": "https://www.melivecode.com/attractions/8.jpg",
"latitude": 40.689167,
"longitude": -74.044444
},
{
"id": 1,
"name": "Phi Phi Islands",
"detail": "Phi Phi Islands are a group of islands in Thailand between the large island of Phuket and the Malacca Coastal Strait of Thailand.",
"coverimage": "https://www.melivecode.com/attractions/1.jpg",
"latitude": 7.737619,
"longitude": 98.7068755
}
]
}
ATTRACTION LIST (LANGUAGE): api/{language}/attractions
Method: GET
URL: https://www.melivecode.com/api/th/attractions
{language}: en (English) or th (Thai)
Response (200: Success):
{
"id": 1,
"name": "หมู่เกาะพีพี",
"detail": "เกาะพีพีเป็นกลุ่มเกาะในประเทศไทยระหว่างเกาะภูเก็ตขนาดใหญ่และช่องแคบชายฝั่งมะละกาของประเทศไทย",
"coverimage": "https://www.melivecode.com/attractions/1.jpg",
"latitude": 7.737619,
"longitude": 98.7068755
},
{
"id": 2,
"name": "หอไอเฟล",
"detail": "หอไอเฟลเป็นหนึ่งในโครงสร้างที่มีชื่อเสียงที่สุดในโลก หอไอเฟล ตั้งชื่อตามสถาปนิกและวิศวกรชาวฝรั่งเศสชั้นนำ สร้างขึ้นเพื่อเป็นสัญลักษณ์ของงาน World Fair ในปี 1889",
"coverimage": "https://www.melivecode.com/attractions/2.jpg",
"latitude": 48.8583736,
"longitude": 2.2922926
},
{
"id": 3,
"name": "ไทม์สแควร์",
"detail": "ไทม์สแควร์ได้กลายเป็นแลนด์มาร์คระดับโลกและได้กลายเป็นสัญลักษณ์ของนิวยอร์กซิตี้แล้ว นี่เป็นผลมาจากการที่ไทม์สแควร์เป็นสถานที่ที่ทันสมัยและล้ำยุคด้วยหน้าจอโฆษณาขนาดใหญ่ที่กระจายอยู่รอบๆ",
"coverimage": "https://www.melivecode.com/attractions/3.jpg",
"latitude": 40.7589652,
"longitude": -73.9893574
},
{
"id": 4,
"name": "ภูเขาฟูจิ",
"detail": "ภูเขาฟูจิเป็นภูเขาที่สูงที่สุดในญี่ปุ่น โดยอยู่ทางตะวันตกของกรุงโตเกียวประมาณ 3,776 เมตร (12,388 ฟุต) มองเห็นภูเขาไฟฟูจิได้จากโตเกียวในวันที่อากาศแจ่มใส",
"coverimage": "https://www.melivecode.com/attractions/4.jpg",
"latitude": 35.3606422,
"longitude": 138.7186086
},
ATTRACTION DETAIL: api/attractions/{id}
Method: GET
URL: https://www.melivecode.com/api/attractions/1
{id}: attraction id
Response (200: Success):
{
"status": "ok",
"attraction": {
"id": 1,
"name": "Phi Phi Islands",
"detail": "Phi Phi Islands are a group of islands in Thailand between the large island of Phuket and the Malacca Coastal Strait of Thailand.",
"coverimage": "https://www.melivecode.com/attractions/1.jpg",
"latitude": 7.737619,
"longitude": 98.7068755
}
}
Response (404: Not Found):
{
"status": "error",
"message": "Attraction with ID = {id} not found"
}
ATTRACTION DETAIL: api/{language}/attractions/{id}
Method: GET
URL: https://www.melivecode.com/api/th/attractions/1
{id}: attraction id
Response (200: Success):
{
"status": "ok",
"attraction": {
"id": 1,
"name": "หมู่เกาะพีพี",
"detail": "เกาะพีพีเป็นกลุ่มเกาะในประเทศไทยระหว่างเกาะภูเก็ตขนาดใหญ่และช่องแคบชายฝั่งมะละกาของประเทศไทย",
"coverimage": "https://www.melivecode.com/attractions/1.jpg",
"latitude": 7.737619,
"longitude": 98.7068755
}
}
Response (404: Not Found):
{
"status": "error",
"message": "Attraction with ID = {id} not found"
}
ATTRACTION CREATE (JWT): api/auth/attractions/create
*Data will be reset to only have the first 12 entries every 15 minutes.
Method: POST
URL: https://www.melivecode.com/api/auth/attractions/create
Body:
{
"name": "Rangsit University",
"detail": "Rangsit University (RSU) is a private university in Pathum Thani, Thailand, focusing mainly on music, design, Information technology, and public health including independent professions",
"coverimage": "https://www.melivecode.com/attractions/rsu.png",
"latitude": 13.9642507,
"longitude": 100.5866942
}
Response (200: OK):
{
"status": "ok",
"message": "Attraction with ID = 13 is created",
"attraction": {
"id": 13,
"name": "Rangsit University",
"detail": "Rangsit University (RSU) is a private university in Pathum Thani, Thailand, focusing mainly on music, design, Information technology, and public health including independent professions",
"coverimage": "https://www.melivecode.com/attractions/08.png",
"latitude": 13.9642507,
"longitude": 100.5866942
}
}
Response (400: Bad Request):
{
"status": "error",
"message": "Missing fields (name, detail, coverimage, latitude, and/or longitude)"
}
ATTRACTION UPDATE (JWT): api/auth/attractions/update
*Only id field is mandatory for update. You cannot update the first 12 entries of the attraction data.
Method: PUT
URL: https://www.melivecode.com/api/auth/attractions/update
Bearer Token:
eyJhbGciOiJIUzI1NiIsInR5cC...
Body:
{
"id": 13,
"name": "Rangsit University (RSU)"
}
Response (200: OK):
{
"status": "ok",
"message": "Attraction with ID = 13 is updated",
"attraction": {
"id": 13,
"name": "Rangsit University (RSU)",
"detail": "Rangsit University (RSU) is a private university in Pathum Thani, Thailand, focusing mainly on music, design, Information technology, and public health including independent professions",
"coverimage": "https://www.melivecode.com/attractions/rsu.png",
"latitude": 13.9642507,
"longitude": 100.5866942
}
}
Response (404: Not Found):
{
"status": "error",
"message": "Attraction with ID = {id} not found"
}
ATTRACTION DELETE: api/attractions/delete
*Only id field is mandatory for update. You cannot delete the first 12 entries of the attraction data.
Method: DELETE
URL: https://www.melivecode.com/api/attractions/delete
Body:
{
"id": 13
}
Response (200: OK):
{
"status": "ok",
"message": "Attraction with ID = 13 is deleted"
}
Response (404: Not Found):
{
"status": "error",
"message": "Attraction with ID = {id} not found"
}
ATTRACTION STATIC PATHS: api/attractions/static_paths
Method: GET
URL: https://www.melivecode.com/api/attractions/static_paths
Response (200):
[{"id":"1"},{"id":"2"},{"id":"3"},{"id":"4"},{"id":"5"},{"id":"6"},{"id":"7"},{"id":"8"},{"id":"9"},{"id":"10"},{"id":"11"},{"id":"12"}]
PET SALES SUMMARY (7 DAYS): api/pets/7days/{date}
Method: GET
URL: https://www.melivecode.com/api/pets/7days/2023-01-01
Response (200):
{
"series": [
{
"name": "dog",
"data": [
5643.82,
1908.44,
2208.16,
1749.57,
1603.84,
576.27,
0
]
},
{
"name": "cat",
"data": [
380.64,
376.73,
159.46,
0,
468.38,
123.53,
0
]
}
],
"categories": [
"2023-01-23",
"2023-01-24",
"2023-01-25",
"2023-01-26",
"2023-01-27",
"2023-01-28",
"2023-01-29"
]
}
PET SALES (DAILY): /api/pets/{date}
Method: GET
URL: https://www.melivecode.com/api/pets/2023-01-01
Response (200):
[
{
"date": "2023-01-23",
"animal": "koala",
"price": "348.55"
},
{
"date": "2023-01-23",
"animal": "rabbit",
"price": "54.92"
},
{
"date": "2023-01-23",
"animal": "panda",
"price": "1188.80"
},
...
]
Me Live Code is a REST-API for simulating the real-world application (ex. Data CRUD and authentication). It is suitable for developers who want to quickly build and test prototypes.
The API includes some fake user data. You can also create, update, and delete user data, of course with some limitation. Take a look at the description of our API for more detail.
This article is suitable for beginners for creating sign-in and user profile screens using our API.
Read MoreWe will perform the CRUD operations by the use of an external API from MeLiveCode.com.
Read MoreWe will create a website login page with HTML, CSS, JavaScript (Bootstrap 5) and an our API.
Read MoreWe will create a web application with just only basic HTML, CSS and JS to perform CRUD.
Read MoreWe will explore Next.js to develop a pre-render website using Static Generation feature.
Read MoreWe will create a pagination data table with React with data from our REST-API.
Read More