Skip to content

Commit 6c322a8

Browse files
networkandcodenetworkandcode
committed
added posts from hashnode
1 parent f6af4d1 commit 6c322a8

4 files changed

+695
-0
lines changed

‎_posts/2021-06-30-online-shop-with-nextjs-and-harperdb.md‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
---
2+
canonical_url: https://networkandcode.hashnode.dev/online-shop-with-nextjs-and-harperdb
3+
categories: harperdb, material-ui, nextjs, stripe
4+
date: 2021-06-30
5+
tags: harperdb, material-ui, nextjs, stripe
6+
title: Online shop with NextJS and HarperDB
7+
---
8+
9+
*This post appeared on [hashnode.dev](https://networkandcode.hashnode.dev/online-shop-with-nextjs-and-harperdb)*
10+
11+
Hey All, this post is for someone who wants to build or run an online shop with minimal instructions. The code is available at https://github.com/networkandcode/shop and a sample deployment is available at https://shop-two-chi.vercel.app/
12+
13+
This should help deploying a small site with hundreds of items, if not thousands. So far, I have managed to add features to this site such as authentication, categories, sub categories, items, checkout etc. A todo list is being tracked [here](https://github.com/networkandcode/shop/blob/main/TODO.md).
14+
15+
# Environment Variables
16+
I am beginning with env vars cause thats what is mainly needed for the deployment part and then will take you through some of the setup and walkthrough. The following environment variables need to be added, either to .env.local or at platforms such as Vercel before deploying. The names of the environment variables are self explanatory.
17+
18+
```
19+
# Stripe keys
20+
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
21+
STRIPE_SECRET_KEY
22+
STRIPE_SUCCESS_URL
23+
STRIPE_CANCEL_URL
24+
25+
# Company details
26+
NEXT_PUBLIC_COMPANY_NAME="Shop"
27+
NEXT_PUBLIC_HTML_TITLE="Buy Food Items, Apparel, and Accessories at best price."
28+
NEXT_PUBLIC_MY_DOMAIN="example.com"
29+
NEXT_PUBLIC_SUB_TITLE_1="Affordable rates and best quality assured."
30+
NEXT_PUBLIC_SUB_TITLE_2="COD is available at select locations."
31+
#NEXT_PUBLIC_YOUTUBE_URL="https://youtube.com/c/<ChannelName>"
32+
#NEXT_PUBLIC_WHATSAPP_NUMBER=<phone-number-with-country-code>
33+
34+
# Admin email
35+
NEXT_PUBLIC_ADMIN = "admin@example.com"
36+
37+
# HarperDB
38+
HDB_PASSWORD
39+
HDB_USERNAME
40+
NEXT_PUBLIC_HDB_PASSWORD
41+
NEXT_PUBLIC_HDB_SCHEMA
42+
NEXT_PUBLIC_HDB_URL
43+
NEXT_PUBLIC_HDB_USERNAME
44+
45+
# Color
46+
NEXT_PUBLIC_THEME_COLOR
47+
NEXT_PUBLIC_THEME_COLOR_SEC
48+
```
49+
50+
With no other customization in the code, if you manage to update just the variables above, you should have a decent site. However, you need to setup the services appropariately before gaining there credentials :).
51+
52+
# HarperDB Setup
53+
I have used HarperDB studio for setting up the following
54+
55+
## Tables
56+
- attributes: To store all fixed attributes for an item, something that a buyer can not change, but just view.
57+
- cart_items
58+
- categories : all the categories and sub categories.
59+
- favorites
60+
- items
61+
- variable_attributes (attributes that can be changed by the buyer)
62+
63+
## Roles
64+
- super_user role, this is present by default, it has admin access to all tables
65+
- read_only role, to read data from all tables except cart_items and favorites
66+
67+
## Users
68+
Two users, one with super_user role(refers to env varaible HDB_USERNAME) and one with read_only role(refers to NEXT_PUBLIC_HDB_USERNAME).
69+
70+
The read only user is used for accessing items and categories publicly from the client(browser), and the super user with privileged access is used for operations such as modifying items, updating cart, via the server. Note that variables that start with NEXT_PUBLIC are accessible from the client itself.
71+
72+
## Attributes
73+
The attributes and variable_attributes records are modified directly via the HarperDB studio at the moment, and not through code. Sample records and screenshots are below.
74+
75+
```
76+
{
77+
name: 'Pattern',
78+
values: [
79+
'Checks',
80+
'Stripes',
81+
'Plain',
82+
'Printed'
83+
]
84+
}
85+
```
86+
87+
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625058393289/prsjXGdLh.png)
88+
89+
```
90+
{
91+
name: 'Size',
92+
values: [
93+
'xs',
94+
's',
95+
'm',
96+
'l',
97+
'xl',
98+
'xxl',
99+
'xxxl'
100+
]
101+
}
102+
```
103+
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625052460346/2pw4QmrVC.png)
104+
105+
# Admin walkthrough
106+
107+
## Sign in
108+
109+
Click the PowerSettings icon at the top right
110+
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625069481028/8LFiOxGP7.png)
111+
and then login with your admin email and password
112+
113+
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625069609997/Qr2vsQiJM.png)
114+
115+
Cick on the supervisor icon to add items or categories
116+
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625069773105/Y4etMiGhcq.png)
117+
118+
## Add items
119+
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625069860641/RHGtpad5a.png)
120+
Here you can enter the name, description and price of the item. You have to select the category or subcategory from the drop-down list. And finally upload a relevant image for the item.
121+
122+
## Add categories
123+
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625069910383/052VT2p2W.png)
124+
Enter the name of the category to be created, select a parent category only if you are creating a sub category. And select the fixed(buyers can't change) and variable(buyers can change) attributes if required. And finally upload a relevant image for the category. Please do not include '/' in the category name.
125+
126+
# Buyer walk through
127+
Signin just like admin, and select a category from the homepage, for example Accessories, it has 1 item as shown in parantheses.
128+
129+
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625073267307/7rDvOGcj-.png)
130+
131+
Click on the Item pic
132+
133+
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625071073867/jNxqfqr-M.png)
134+
This opens up a dialog, set the quantity and any other attributes if applicable and update the cart.
135+
136+
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625071190425/R5cMXAQZnG.png)
137+
138+
Once the cart is updated, the dialog can be closed. The checkout icon at the appbar should show the total cart amount.
139+
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625071317667/FQFbRXeoI.png)
140+
Clicking on that would take you to the checkout page
141+
142+
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625071376365/AnayvtSTc.png)
143+
144+
Click on proceed to pay, and then the proceed to payment gateway button
145+
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625072159097/cwZdhOAgF.png)
146+
147+
The email will be populated automatically, fill rest of the details and pay, If you have used stripe's test api key, you can enter the card number as 4242 4242 4242 4242. Click pay and you are done.
148+
149+
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625072375067/ZQ9Kfk1XB.png)
150+
151+
Well, thats the overview of the website I have developed for the #HarperDBHackathon, hope it has some stuff in it, and there could definitely be bugs, and lots of room for improvement. Suggestions are welcome, and thank you @[Hashnode](@hashnode) and HarperDB for the opportunity.
152+
153+
Here is some final notes on what I liked about HarperDB:
154+
- Tabular and JSON way of representing records (in the studio).
155+
- Support for both SQL and NoSQL queries.
156+
- Good reference to multiple libraries(I have chosen fetch and axios), on the docs site.
157+
- Roles are neat, no confusion, no complexity, anyone can easily understand what they mean.
158+
159+
*Credits: Firebase(for authentication and storage), HarperDB, @hashnode, Material-UI, NextJS, ReactJS, Stripe, Unsplash, Vercel, and lots of other great online resources*
160+
161+
--end-of-post--
162+

‎_posts/2022-06-11-install-appwrite-on-linode.md‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
---
2+
canonical_url: https://networkandcode.hashnode.dev/install-appwrite-on-linode
3+
categories: appwrite, docker, linode, linux
4+
date: 2022-06-11
5+
tags: appwrite, docker, linode, linux
6+
title: Install Appwrite on Linode
7+
---
8+
9+
*This post first appeared on [hashnode.dev](https://networkandcode.hashnode.dev/install-appwrite-on-linode)*
10+
11+
## Introduction
12+
[Appwrite](https://appwrite.io/) is a backend server that can be leveraged for integrating services such as authentication, storage, database etc. to our frontend application. It can be launched with docker, as it's a set of docker containers offering specific services. Here, we are going to install it on top of an Ubuntu machine on [Linode](https://www.linode.com/).
13+
14+
## SSH keys
15+
This step is not required if you would be accessing the cloud instance via password. However SSH keys are a secure way to access instances than passwords.
16+
17+
You can follow this on any Unix / Linux based machine, it works on [Git Bash](https://git-scm.com/download/win) too on Windows.
18+
19+
Generate SSH keys on your local machine, from which you would be accessing the Linode instance.
20+
```
21+
$ ssh-keygen
22+
```
23+
You can copy the public key, which is by default at the following location.
24+
```
25+
$ cat ~/.ssh/id_rsa.pub
26+
```
27+
28+
## Instance
29+
Appwrite needs atleast 1 CPU and 2 GB RAM as mentioned on their [docs](https://appwrite.io/docs/installation#systemRequirements). So, I have created a Linode instance with the following spec.
30+
31+
![Create linode](https://cdn.hashnode.com/res/hashnode/image/upload/v1654915190109/lAaB7W6WH.png align="left")
32+
```
33+
OS: Ubuntu 22.04 LTS
34+
Hostname: appwrite
35+
2 CPU Cores, 80 GB Storage, 4 GB RAM
36+
37+
Plan:
38+
Linode 4 GB
39+
40+
Region:
41+
Mumbai, IN
42+
```
43+
You can setup password for the root user and optionally add the SSH keys(more secure) copied from the previous step, as per your convenience.
44+
45+
## Change hostname
46+
The default hostname is localhost, so we can better change it to appwrite.
47+
```
48+
root@localhost:~# hostname appwrite
49+
```
50+
The new hostname would be effective from the next login.
51+
52+
## Install docker engine
53+
We can now install the [docker engine](https://docs.docker.com/engine/install/ubuntu/)
54+
```
55+
apt-get update -y
56+
57+
apt-get install \
58+
ca-certificates \
59+
curl \
60+
gnupg \
61+
lsb-release -y
62+
63+
mkdir -p /etc/apt/keyrings
64+
65+
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | gpg --dearmor -o /etc/apt/keyrings/docker.gpg
66+
67+
echo \
68+
"deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
69+
$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
70+
71+
apt-get update -y
72+
73+
apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin -y
74+
```
75+
76+
We shoud now have docker and docker compose
77+
```
78+
root@appwrite:~# docker -v
79+
Docker version 20.10.17, build 100c701
80+
81+
root@appwrite:~# docker compose version
82+
Docker Compose version v2.6.0
83+
```
84+
85+
## Add user
86+
When we created the instance it would only have the root user. Login to the instance via the LISH console or any SSH client as root, and add a new user.
87+
```
88+
root@localhost:~# adduser appwrite
89+
Adding user `appwrite' ...
90+
Adding new group `appwrite' (1000) ...
91+
Adding new user `appwrite' (1000) with group `appwrite' ...
92+
Creating home directory `/home/appwrite' ...
93+
Copying files from `/etc/skel' ...
94+
New password:
95+
Retype new password:
96+
passwd: password updated successfully
97+
Changing the user information for appwrite
98+
Enter the new value, or press ENTER for the default
99+
Full Name []:
100+
Room Number []:
101+
Work Phone []:
102+
Home Phone []:
103+
Other []:
104+
Is the information correct? [Y/n] Y
105+
```
106+
107+
The appwrite user should have been created under the appwrite group.
108+
```
109+
root@appwrite:~# id appwrite
110+
uid=1000(appwrite) gid=1000(appwrite) groups=1000(appwrite)
111+
```
112+
113+
## Add to group
114+
The docker group would have read write permissions on the docker.sock file.
115+
```
116+
$ ls /var/run/docker.sock -l
117+
srw-rw---- 1 root docker 0 Jun 11 03:06 /var/run/docker.sock
118+
```
119+
Hence, add the appwrite user to the docker group, so that we can run docker commands as the appwrite user.
120+
```
121+
root@appwrite:~# usermod -aG docker appwrite
122+
root@appwrite:~# id appwrite
123+
uid=1000(appwrite) gid=1000(appwrite) groups=1000(appwrite),999(docker)
124+
```
125+
126+
## Clone
127+
Login as the appwrite user with the password for the first time, and then optionally you can copy the SSH public key from your local machine to the location `.ssh/authorized_keys` for futher logging in via SSH keys.
128+
129+
Clone the [appwrite](https://github.com/appwrite/appwrite.git) repo
130+
```
131+
appwrite@appwrite:~$ git clone https://github.com/appwrite/appwrite.git
132+
```
133+
134+
## Up
135+
Change directory and run docker compose.
136+
```
137+
cd appwrite
138+
docker compose up
139+
```
140+
This is not the quick start installation mode, we are doing a full installation, so that we can update Appwrite environment configuration when required. There would be a build status at the top of the screen like below.
141+
```
142+
[+] Building 355.8s (85/609)
143+
```
144+
Note that this would take a while, and we have to wait until all the images are built.
145+
146+
## Containers
147+
You can open a different SSH session and see if the containers are running.
148+
```
149+
appwrite@appwrite:~$ docker container ls | awk '{print $2}'
150+
ID
151+
appwrite_appwrite-worker-functions
152+
traefik:2.7
153+
appwrite_appwrite-executor
154+
appwrite_appwrite-worker-database
155+
appwrite_appwrite
156+
appwrite_appwrite-maintenance
157+
appwrite_appwrite-worker-mails
158+
appwrite_appwrite-worker-deletes
159+
appwrite_appwrite-worker-audits
160+
appwrite_appwrite-worker-builds
161+
appwrite_appwrite-worker-certificates
162+
appwrite_appwrite-realtime
163+
appwrite_appwrite-worker-webhooks
164+
appwrite_appwrite-schedule
165+
appwrite/requestcatcher:1.0.0
166+
redis:6.2-alpine
167+
adminer
168+
mariadb:10.7
169+
appwrite/telegraf:1.4.0
170+
appwrite/influxdb:1.5.0
171+
appwrite/mailcatcher:1.0.0
172+
```
173+
So Appwrite is following a [microservices](https://dev.to/appwrite/30daysofappwrite-appwrite-s-building-blocks-1936) architectural pattern where multiple microservices are running separately as containers to collectlively form the Appwrite stack/service.
174+
175+
## Appwrite
176+
We can now try to login to the Appwrite UI on the browser with the same IP we used to SSH into the instance. It should provide the signup page where we can create the account.
177+
![Appwrite signup](https://cdn.hashnode.com/res/hashnode/image/upload/v1654920901564/m3rgsuhD8.png align="left")
178+
179+
So we have finally installed and launched Appwrite successfully on Linode. Thank you for reading :)
180+

0 commit comments

Comments
 (0)