+ >
+
04.
-
+
Playground
-
+
-
- API & Database
-
-
-
-
- In this section there is a simple demonstration of some of the API & Database functionalities. Let's begin with API.
-
-
-
- When using internet, we may not notice it but computer programs talk to each other for the sake of giving or receiving information. Let's see it on practice. Say, we want to open e-commerce store, but our goods isn'tready for production. In this case we can use a fake-store API to fill in the UI.
-
-
-
- async function getData() {'{'}
-
- const res = await fetch('https://fakestoreapi.com/products/1')
-
- const data = await res.json()
-
- const trim = {'{'}
-
- category: data.category,
-
- descr: data.description,
-
- img: data.image,
-
- price: data.price,
-
- title: data.title
-
- {'}'}
-
- setItem(trim)
-
- {'}'}
-
-
-
Click on the button to see result
-
-
-
- {item &&
-
-
-
-
-
-
- {item.title}
-
-
- {item.description}
-
-
- {item.price}$
-
-
-
- }
-
-
- Great, now that we know how to use the API, let's take a look at database!
-
-
-
- Finally, our goods are ready for production and we want to use them on the website. The question is, how where do we deploy this information and how do we access will user get access to it on the website?
-
-
-
- The answer would be is to use a database. We can structurise the nessesary data and deploy it to one of the multiple resources out there. For this example i'll go with PocketBase.
-
-
-
Lets create a product in the database. For cpnviniece I'll use same data we receive from the API
-
-
- async function createItem() {'{'}
-
- const pb = new PocketBase('http://127.0.0.1:8090')
-
- const create = await pb.collection('products').create(item)
-
- return create
-
- {'}'}
-
-
-
-
-
Now we can retrieve data from data base and put in in our UI
-
-
- async function getItem() {'{'}
-
- const get = await pb.collection('products').getOne('6j1zez1meaumlrh')
-
- setDbItem(get)
-
- return get
-
- {'}'}
-
-
-
-
- {dbItem &&
-
-
-
-
-
-
- {dbItem.title}
-
-
- {dbItem.description}
-
-
- {dbItem.price}$
-
-
-
- }
-
-
- Great! There is much more to tell about API's & Databases, contact me if you want know more!
-
-
-
-
- )
-}
\ No newline at end of file
+
+ API & Database
+
+
+
+
+ In this section there is a simple demonstration of some of the{' '}
+ API & Database{' '}
+ functionalities. Let's begin with API.
+
+
+
+ When using internet, we may not notice it but computer programs talk
+ to each other for the sake of giving or receiving information.
+
+
+
+ Let's see it on practice. Say, we want to open e-commerce store, but
+ our goods isn't ready for production. In this case we can use a
+ fake-store API to fill in
+ the UI.
+
+
+
+ async function getData() {'{'}
+
+
+ const res = await fetch('https://fakestoreapi.com/products/1')
+
+
+ const data = await res.json()
+
+ const trim = {'{'}
+
+ category: data.category,
+
+ descr: data.description,
+
+ img: data.image,
+
+ price: data.price,
+
+ title: data.title
+
+ {'}'}
+
+ setItem(trim)
+
+ {'}'}
+
+
+
+
{item ? 'Fetched' : 'Fetch Data'}
+
+
+ {item ? (
+
+ ) : (
+
+ )}
+
+
+
+ {item && (
+
+
+
+
+
+
{item.title}
+
+ {item.description}
+
+
+ {item.price}$
+
+
+
+ )}
+
+
+ Great, now that we know how to use the API, let's take a look at
+ database!
+
+
+
+ Finally, our goods are ready for production and we want to use them on
+ the website. The question is, how where do we deploy this information
+ and how do we access will user get access to it on the website?
+
+
+
+ The answer would be is to use a database. We can structurise the
+ nessesary data and deploy it to one of the multiple resources out
+ there. For this example i'll go with PocketBase.
+
+
+
+ Lets create a product in the database. For cpnviniece I'll use same
+ data we receive from the API
+
+
+
+ async function createItem() {'{'}
+
+
+ const pb = new PocketBase('http://127.0.0.1:8090')
+
+
+
+ const create = await pb.collection('products').create(item)
+
+
+ return create
+
+ {'}'}
+
+
+
+
{created ? 'Created' : 'Create Product'}
+
+
+ {created ? (
+
+ ) : (
+
+ )}
+
+
+
+ {created && (
+
+
+ category: "men's clothing"
+
+
+
+ description: "Your perfect pack for everyday use and walks in the
+ forest. Stash your laptop (up to 15 inches) in the padded sleeve,
+ your everyday"
+
+
+
+ image: "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg"
+
+
+
+ price: 109.95title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15
+ Laptops"
+
+
+ )}
+
+
+ Here's what we sent to the Database. Now we can retrieve data from
+ data base and put it in our UI
+
+
+
+ async function getItem() {'{'}
+
+
+ const get = await
+ pb.collection('products').getOne('6j1zez1meaumlrh')
+
+
+ setDbItem(get)
+
+ return get
+
+ {'}'}
+
+
+
+
{dbItem ? 'Fetched' : 'Fetch Product'}
+
+
+ {dbItem ? (
+
+ ) : (
+
+ )}
+
+
+
+ {dbItem && (
+
+
+
+
+
+
{item.title}
+
+ {item.description}
+
+
+ {item.price}$
+
+
+
+ )}
+
+
+ Great! There is much more to tell about API's & Databases, contact me
+ if you want know more!
+
+
+
+ )
+}
diff --git a/app/components/Skills.tsx b/app/components/Skills.tsx
index 303ab40..59d2026 100644
--- a/app/components/Skills.tsx
+++ b/app/components/Skills.tsx
@@ -28,19 +28,21 @@ export default function Skills() {
>
02.
-
+
Skills
-
+
-
+
Here are some of the technologies I use:
@@ -55,7 +57,7 @@ export default function Skills() {
/>
-
2 years
+
2 years
HTML - a mark up language
@@ -78,7 +80,7 @@ export default function Skills() {
-
2 years
+
2 years
CSS - a stylesheet language
@@ -89,7 +91,7 @@ export default function Skills() {
-
{`<`}1 year
+
{`<`}1 year
Golang - a programming language
@@ -155,7 +157,7 @@ export default function Skills() {
-
1 year
+
1 year
Tailwind - a CSS framework
@@ -166,7 +168,7 @@ export default function Skills() {
-
2 years
+
2 years
Git - a version control system
@@ -177,7 +179,7 @@ export default function Skills() {
-
1 year
+
1 year
Database - a collection of data
stored and accessed electronically
diff --git a/app/components/SocialLinks.tsx b/app/components/SocialLinks.tsx
index 389e960..52afe4c 100644
--- a/app/components/SocialLinks.tsx
+++ b/app/components/SocialLinks.tsx
@@ -13,7 +13,7 @@ export default function SocialLinks() {
@@ -24,7 +24,7 @@ export default function SocialLinks() {
@@ -35,7 +35,7 @@ export default function SocialLinks() {
@@ -46,7 +46,7 @@ export default function SocialLinks() {
@@ -56,9 +56,8 @@ export default function SocialLinks() {
@@ -66,7 +65,7 @@ export default function SocialLinks() {
-
+