DEV Community: Uttam Marandi

How to host outline wiki for free ?

Uttam Marandi — Sun, 25 May 2025 17:43:42 +0000

In order to host outline wiki for free, I will be using these four free services :

Server : AWS free tier
Postgres database : Supabase
Redis database : Redis Labs
S3 Storage: AWS S3 (included in the AWS free tier with 5GB storage).

I tried Oracle and AWS for server. It was a hassle to signup to oracle, so I went with AWS.
For free postgresql database my favorite choice is Supabase.
For redis database you can either go with Redis Labs or Upstash.
With the AWS free tier, you get 5GB of S3 storage for 12 months, sufficient for Outline’s file storage needs. The EC2 instance includes 30GB of EBS storage for the server.

The setup is free. However there are few limitiations

AWS EC2: 750 hours/month for 12 months.
Supabase: 500MB database size, 1GB data transfer.
Redis Labs: 30MB storage, limited connections.
S3: 5GB storage, 20,000 GET requests, 2,000 PUT requests.

1. Create an EC2 Instance

In your AWS console search for ec2, on clicking you will get this kind of interface.

Please give a name to the server. I want you to choose ubuntu ami in AMI settings.
I recommend the Ubuntu AMI because its apt package manager is more familiar to most users. Amazon Linux uses dnf, which may require different commands, but it also supports Docker and Docker Compose.
Apart from that you can keep all other options in default mode. You can increase the size of the EBS volume attach to the instance if you want. The default is 8gb. I increased the EBS volume to 16GB to accommodate Outline’s dependencies and potential document storage. 8GB is often sufficient for a lightweight setup.

You need to create a key pair to SSH into the EC2 instance. In the AWS console, under ‘Key Pairs,’ click ‘Create key pair,’ choose .pem format, and download the file. Secure it with chmod 400 key-pair-file.pem on your local machine.

After downloading the .pem file, run chmod 400 key-pair-file.pem on your local machine to restrict access. Store it securely and never share it.

After ec2 instance creation, the next step is to connect to the ec2 instance.

2. Connect to ec2 instance.

In order to connect to an ec2 instance there are multiple ways. You can either ssh from your local computer using command prompt. The simplest way to connect is using EC2 instance connect.
EC2 Instance Connect opens a browser-based SSH terminal. Ensure your instance is in a public subnet and has a public IP.

In the AWS console, select your EC2 instance, click ‘Connect,’ and choose ‘EC2 Instance Connect.’ Ensure your security group allows SSH (port 22) from your IP or 0.0.0.0/0 for temporary access.

or you can ssh into the ec2 instance from local computer.

ssh -v -i "outline-server.pem" ubuntu@your-ec2-public-ip

Configure Security Group

After creating the instance, ensure the security group allows:

Port 22 (SSH): For connecting to the instance. Set the source to your public IP (e.g., your-ip/32) for security.
Port 3000 (HTTP): For accessing Outline directly (temporarily allow 0.0.0.0/0 until a reverse proxy is set up).
Port 80 (HTTP) and Port 443 (HTTPS): These will be used after setting up a reverse proxy and SSL (covered in later blogs).

Without the port 3000 rule, you won’t be able to access Outline at http://<ec2-public-ip>:3000. The port 80 rule doesn’t help yet because Outline isn’t listening on port 80.

3. Install Docker & Docker Compose

After ssh to the client , run the following commands

sudo apt update
sudo apt install -y docker.io docker-compose
sudo usermod -aG docker ubuntu
newgrp docker

Commands Breakdown

`sudo apt update`

apt is the package manager for Debian/Ubuntu systems.
update refreshes the local list of available packages and their versions.
It checks and updates what's available into the local list. It does not install or upgrade anything yet — just fetches the latest info.

`sudo apt install -y docker.io docker-compose`

install installs the listed packages.
docker.io is the package that contains the Docker engine.
docker-compose is the tool that lets you define and run multi-container Docker apps using a docker-compose.yml file.
-y auto-answers "yes" to prompts (so it doesn’t stop to ask you during install).

`sudo usermod -aG docker ubuntu`

usermod modifies a user account.
-aG docker adds the user to the docker group (which has permission to run Docker commands without sudo).
ubuntu is the username you're adding to the Docker group. This allows you to run Docker as a normal user (without sudo)

`newgrp docker`

Refreshes your current shell session so the new group membership (i.e., Docker group) takes effect immediately without requiring logout/login.
Sometimes the newgrp docker command may not always work as expected in non-interactive shells. At that time please log out and log back in. Last option is to run exec su -l $USER to refresh the session.

You can test everything is working with:

sudo systemctl status docker
docker --version
docker-compose --version
docker run hello-world

4. Create a `.env` file

nano outline.env

A nano editor will open. You need to update the file with the .env file here
https://github.com/outline/outline/blob/main/.env.sample

These rules are required. You would need an authentication provider. I am using slack here.

# –––––––––––––––– REQUIRED ––––––––––––––––

NODE_ENV=production


SECRET_KEY="64-char-string" # 32-byte hex-encoded random string (64 characters in hexadecimal).
# You can use this link to generate : https://numbergenerator.org/random-32-digit-hex-codes-generator

UTILS_SECRET="64-char-string" # 32-byte hex-encoded random string (64 characters in hexadecimal).

DATABASE_URL="postgresql://postgres_username:postgres_password@host_url:host_port/db_name" # Your postgres db url


REDIS_URL="redis://redi_username:redis_password@host_url:host_port" # An ioredis compatible url

// Note that users can temporarily use the EC2 public IP (e.g., http://ec2-public-ip:3000) and update the .env file later when configuring a domain and SSL.

URL="your_domain_name" # https://outline.your_domain.com

PORT=3000 #keep it as it is

HOST=0.0.0.0 #keep it as it is

COLLABORATION_URL="your_domain_name" # https://outline.your_domain.com if you want multiple users to collaborate then set this same as URL

FILE_STORAGE="s3" # Specify what storage system to use. Possible value is one of "s3" or "local". We will be using S3

FILE_STORAGE_UPLOAD_MAX_SIZE=2147483648

FILE_STORAGE_IMPORT_MAX_SIZE=52428800

FILE_STORAGE_WORKSPACE_IMPORT_MAX_SIZE=104857600

# S3 Access Keys

AWS_ACCESS_KEY_ID="s3-access-key-id"
AWS_SECRET_ACCESS_KEY="s3-access-key-secret"
AWS_REGION="s3-region"
AWS_S3_ACCELERATE_URL=
AWS_S3_UPLOAD_BUCKET_URL="s3-url"
AWS_S3_UPLOAD_BUCKET_NAME="s3-bucket-name"
AWS_S3_FORCE_PATH_STYLE=true
AWS_S3_ACL=private

# –––––––––––––– AUTHENTICATION ––––––––––––––

SLACK_CLIENT_ID="slack-client-id"
SLACK_CLIENT_SECRET="slack-client-secret"

5. Create a docker compose file

Create docker-compose.yml file in root

nano docker-compose.yml

version: "3"

services:
  outline:
    image: outlinewiki/outline:
    env_file:
      - outline.env
    ports:
      - "3000:3000"
    restart: always

It's better to pin the image to a specific version. Docker image pulls the latest version, which could break if Outline releases a new version with breaking changes. Something like outlinewiki/outline:0.81.0 instead of outlinewiki/outline is better.

Start it:

docker-compose up -d

This should start the server with docker.

Further Setup

Postgresql setup & Redis url setup
S3 setup : S3 is an AWS service included in the AWS free tie
SSL setup
Reverse proxy setup

I will try to post these blogs as soon as possible. This is the first blog in this series.

Possible Errors

These are few errors that you might face

Make sure to choose .pem format. If you choose .ppk format you need to install putty for windows. If you accidentally chose .ppk, use PuTTYgen to convert the .pem file to .ppk for use with PuTTY on Windows.
Make sure that the region is correct in top right corner, before creating an instance. You can't change it after instance creation. Please select a region closest to your location.
The ssh user name is different based on ami (amazon machine image). For amazon linux, it's ec2-user and for ubuntu its ubuntu.

How to run postgres in docker ?

Uttam Marandi — Sun, 06 Apr 2025 09:11:35 +0000

Installing PostgreSQL directly on your local machine can be a hassle—lengthy steps, OS-specific quirks, and potential conflicts. Luckily, Docker makes the process super simple, fast, and portable. Let’s walk through how to run PostgreSQL in a Docker container.

Why postgres in docker ?

You don’t need to install PostgreSQL directly on your system.
You can run multiple versions of PostgreSQL
Docker isolates the database from your host OS—less risk of breaking other things.

Install Docker Desktop

First you need to download docker desktop and install it and sign up. If you have already done this, you can skip this process. Please make sure docker desktop is running the entire process.

Running PostgreSQL Container

Open the terminal and run the command

docker run --name docker-postgres -e POSTGRES_PASSWORD=mypassword -p 5431:5432 -d postgres:16

Breakdown

--name : name stands for name of the container.
-e : e stands for environment variables. We are setting one environment POSTGRES_PASSWORD. POSTGRES_USER is assigned default to postgres. You can change it if you want using the same name env variable.
-d : d stands for detached mode.
postgres:16 : This is the image that will run. If postgres:16 image is already present , it will use that image. If not it will pull from the dockerhub.
-p 5431:5432: Maps port 5432 on your host (localhost) to port 5432 in the container. If you have PostgreSQL already installed locally, change the host port (e.g., -p 5431:5432) to avoid conflicts.
-e POSTGRES_DB=mydatabase : If this env is not added then default db with name postgres is created. If you want to name your database something else you can use this env.

After running this command, verify the container is running in Docker Desktop UI:

Check if docker container is running

docker ps

It should give you a list of all the container that are running right now. check for your container name.

Connect to postgres

Now in order to connect to postgreql running in docker container, run the command

docker exec -it docker-postgres psql -U postgres

Breakdown:

docker-postgres: your container name
psql: the command to run inside the container. psql comes with postgres image.
-U postgres: tells psql which user to connect as
-it : Runs the container in interactive mode and allocates a virtual terminal
exec : Execute a command inside a running container

How to create a new database.

If no POSTGRES_DB env is given while creating the container, you will be assigned the default database named postgres. If you want a new database, run the command

CREATE DATABASE outline_database;

How to check all the database inside the container

\l

Press q to exit the psql shell pager.

What's Next?

Now that you have PostgreSQL running inside Docker, you can:

Connect using a GUI like pgAdmin, TablePlus, or DBeaver.
Use it in your local dev projects.
Persist data using Docker volumes (explored in future posts 👀).In correct setup, the data gets lost only when you remove the container.

Let me know in the comments if you'd like a follow-up post on Docker volumes or connecting with pgAdmin!

Possible Error Troubleshooting

Error 1: OCI Runtime Exec Failed

Command causing error:

docker exec -it docker-postgres -U postgres

Error Message:

OCI runtime exec failed: exec failed: un   able to start container process: exec: "-U": executable file not found in $PATH: unknown

Solution:
The -U flag belongs to psql, not docker exec.

Correct Command:

docker exec -it docker-postgres psql -U postgres

Error 2: Database Creation Failed

Command causing error:

CREATE DATABASE outline-database

Error Message:

ERROR:  syntax error at or near "-"
LINE 1: CREATE DATABASE outline-database

Solutions:

Database names cannot contain hyphens (use underscores)
SQL commands require semicolon terminators

Correct Command:

CREATE DATABASE outline_database;

How to use scrolltrigger to construct an object? Animating Nezuko

Uttam Marandi — Wed, 24 Nov 2021 16:55:29 +0000

This animation looks pretty amazing but in reality it is pretty pretty easy. GSAP offers srolltrigger plugin which allows us to animate objects into the viewport and trigger animation based on scroll. Here, we not only want to trigger the animation but also connect the movement of elements to our scroll.

Setup

I am using simple html and vanilla js for demonstration purposes. However gsap and scrolltrigger can be used in front-end frameworks like react and vue too.
For setup, we only need to import the gsap and scrolltrigger package using cdn. And link our js and css file.



<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>

As for html, I would highly recommend using svg instead of an image. For example, here I am animating the eyes, nose, dress and hairband. If I use svg object I don't need to style it using css. If you use image than you have to position each element of the object very carefully for it to resemble a complete object. But with svg each element is already positioned in their respective places.
I cannot post the entire svg here because it's like 350 lines long. But I would share a screenshot of basic layout of the svg which is very important to understand how we are going to animate the svg.
I found this svg in figma community. https://www.figma.com/file/6abCcAz76OF2rigS2G1WXC/nezuko-kamado-(Community)?node-id=0%3A1
This guy is doing a great job.
https://www.figma.com/@sulaiman

As you can see in the above svg, each element like eyes,nose, dress and hairband are grouped and given an id. This will be used to target each element and animate them individually.
Initial setup should look something like this...

Setting up scrolltrigger

First we need to register the scrolltrigger plugin in order for us to use it.
Then we need to create a gsap timeline and pass an object containing scrolltrigger properties.



gsap.registerPlugin(ScrollTrigger);
gsap
  .timeline({
    scrollTrigger: {
      trigger: ".nezuko",
      start: "center center",
      end: "bottom center",
      scrub: true,
      pin: true,
    },
  })

trigger is the object which will trigger the animation. Now it's very crucial that you use the ".nezuko" class in the svg tag itself. If you set the trigger anywhere inside the svg, then the svg will disappear from viewport.
start and end properties define the start and end of animation respectively.
scrub set to true means that animation is dependent on the user scroll.
pin set to true pins the target element and it will stay on viewport till animation is complete.

The trick

The main trick to such animation is that we are not animating to the final object instead we are animating from the final object. Meaning it's quite difficult to construct all elements sequentially and get to the final object. But it is very simple if we define the final object first and animate each element into it.
Of course user will have the previous experience where each element combines to construct the final object on scroll.



gsap.registerPlugin(ScrollTrigger);
gsap
  .timeline({
    scrollTrigger: {
      trigger: ".nezuko",
      start: "center center",
      end: "bottom center",
      scrub: true,
      pin: true,
    },
  })
  .from(".eye", { y: innerHeight * 65.5 })
  .from(".nose", { y: innerHeight * 65.5 })
  .from(".dress", { y: innerHeight * 65.5 })
  .from(".hairband", { y: innerHeight * 65.5 });

That's it , 15 lines of code and you have your scroll animation constructing an object. We set the y value to certain times the innerHeight of viewport and each element animates from that position to the inital position.
Here is our final result...

Keypoints

1.Use svg : I cannot emphasis this more. Using svg will save your valuable time. Resizing each element and getting final object right using css is too much hassle. Also you have to take mobile responsiveness into account. With svg all these are handled.
2.Use medium size svg: The svg I used here is pretty big. 12645px * 16756px is too much. I used it because that's the only one available. If you use such big sizes than you have to multiply innerHeight to some crazy numbers like I have done above. Usually innerHeight multiplied to 1.5 to 2 will do the job.
3.Experiment: We can do pretty amazing things with gsap, scrolltrigger and scrub properties. Experiment with these to find the sweet spot for your animation. Sky is the limit.

There you have it. Constructing sweet Nezuko with scroll animation. Btw.. Demon slayer is awesome. Can't wait for the whole manga to animate. Season 2 is streaming right now 😁.

If you have any suggestion , do let me know in comments. Will you use it in your next project? Is there any other way to achieve the same animation? Waiting for your responses .....

Create Login Form with show/hide password field in React.

Uttam Marandi — Thu, 18 Nov 2021 18:35:14 +0000

I was creating authentication functionality, login/signup form for one of my projects. I wanted to implement a very simple functionality of showing/hiding the password field on clicking an eye button. But believe me, it gave a bit of hard time. I searched on the internet and I did find some great resources. There was an article in GeeksforGeeks which did help a lot. But here I have summed up the entire login front-end functionality i.e getting user data, storing it in state and show/hide password field. Also I noticed during implementation that on clicking the eye icon to show the password, the cursor moves to the beginning of the input field which seems odd. In the end I did found a solution to that issue. So, you should read the entire post if you are facing the same issue.

Basic setup

1.React
2.Tailwind
3.Heroicons

Defining states

Let's define two states, one for email and other for password. I think we have to define as many states as input fields present in our form.

const [emailValue, setEmailValue] = useState({
    email: "",
  });
const [passValue, setPassValue] = useState({
    password: "",
    showPassword: false,
  });

As you can see passValue has additional showPassword field. This state value will be used for show/hide password funcitonality.

Rendering the component

The jsx code is pretty straight forward. I have styled the form using tailwind css b.t.w tailwind is awesome. Also I have defined few functions for onChange and onClick actions.

<div className="login_page">
      <main className="login_main max-w-lg mx-auto ">
        <div className="login_form pt-16">
          <h2 className="text-3xl">Sign in</h2>
          <form action="">
            <div className="email pt-8 block ">
              <label htmlFor="" className="label ">
                Email Address
              </label>
              <input
                className="input block border border-gray-300 focus:border-pitch-black  py-3 px-3 w-full focus:outline-none "
                type="text"
                name="email"
                value={emailValue.email}
                onChange={handleEmailValue}
              />
            </div>
            <div className="password_2 block pt-6 relative">
              <label>Password</label>
              <div className="eye_div">
                <input
                  className="input block border border-gray-300 focus:border-pitch-black  py-3 px-3 w-full focus:outline-none "
                  type="password"
                  onChange={handlePasswordChange("password")}
                  value={passValue.password}
                />
                <div
                  className="icon_button absolute right-4 top-14"
                  onClick={handleClickShowPassword}
                >
                  {passValue.showPassword ? (
                    <EyeIcon className="h-6 font-extralight" />
                  ) : (
                    <EyeOffIcon className="h-6 font-extralight" />
                  )}
                </div>
              </div>
              <p className="pt-4">Forgot your password?</p>
            </div>
            <button
              className="mt-9 p-3 bg-pitch-black hover:bg-opacity-80 text-white w-full text-sm"
            >
              Sign In
            </button>
            <div className="w-full h-px bg-gray-300 mt-12"></div>
            <h3 className="text-center pt-7 text-lg">Don't have an account?</h3>
            <button className="mt-8 p-3 mb-16 bg-white hover:bg-opacity-80 border border-pitch-black w-full text-sm">
              Create Account
            </button>
          </form>
        </div>
      </main>
    </div>

I have used HeroIcons (EyeOff and EyenOn) which shows depending upon the showPassword value.
As of now the component looks like this without any functionality.

Functions for handling states

I have defined two functions for each input field that stores/change the state when user input value to each field.

const handleEmailValue = (e) => {
    const { name, value } = e.target;
    setEmailValue({
      ...emailValue,
      [name]: value,
    });
  };
 const handlePasswordChange = (prop) => (event) => {
    setPassValue({ ...passValue, [prop]: event.target.value });
  };

When the user clicks the Eye icon we change the value of showPassword to either true or false. Depending on the value of showPassword we also change the type of input field to either text or password. This gives the show/hide password functionality.

const handleClickShowPassword = () => 
    setPassValue({ ...passValue, showPassword: !passValue.showPassword });
  };

Now our component looks the same but with a bit of funcitonality. Cool...

Issues

If you look closely in the above gif you can see that when we toggle the EyeButton the cursor position changes. This is a small issue but it was really bugging me. So as everyone else I searched on internet to find any solution but couldn't found any . But what I found was a simple trick to disappear the cursor if input type is password. The way to make cursor disappear is to make it's caretColor property transparent. We need to refactor our jsx and handleClickShowPassword funciton .

//Input field jsx
<input
   className="input block border border-gray-300 focus:border-pitch-black  py-3 px-3 w-full focus:outline-none "
   onClick={() => setCaretColor("black")}
   style={{ caretColor: caretColor }}
   type={values.showPassword ? "text" : "password"}
   onChange={handlePasswordChange("password")}
   value={values.password}
 />
//handleClickShowPassword 
 const handleClickShowPassword = () => {
    setCaretColor("transparent");
    setValues({ ...values, showPassword: !values.showPassword });
  };

Final Result

There you have it a simple login form. You have the show/hide functionality without any issues. You have the user input data that you can send to the backend for authentication.
If you have any good suggestions/refactors do comment below. Also if I can help in any projects I would love to. I am open to new opportunities.

How to create a custom radio button and make it functional in react?

Uttam Marandi — Wed, 27 Oct 2021 19:08:47 +0000

I was creating a product page for one of my e-commerce projects. And then I came into an issue of building a color and size selection component. I searched a lot on developer's best friend "Google" but could not find any optimal solution. After few exploration and testing I came up with this code.

Basic Setup

1.React
2.Tailwind

Preparing the data

Let's say we have an array of sizes for a particular product fetched from the db. We need to convert it to an object containing an id which will be used to map input to label and the value.

const productSize = ["S", "M", "X", "XXL"];
//map
const sizeData = productSize?.map((item) => ({
  id: `input_${item}`,
  value: item,
}));

Defining States

I defined a state for tracking the state of radio values. If you are using multiple radio buttons , you should create multiple states

 let [sizeValue, setSizeValue] = useState("");

Rendering the component

Map through the sizeData array and render each size. I am using tailwind css for styling which might make the code a bit messy.
Radio input is set to invisible so that the label is the clickable element. input id is mapped to label for.

<div className="main max-w-lg mx-auto">
      <div className="grid grid-cols-4 gap-8 gap-y-4">
        {sizeData?.map(({ id, value }) => (
          <div className="-mt-2" key={id}>
            <input
              id={id}
              className="invisible radio_custom"
              type="radio"
              value={value}
              checked={sizeValue === { sizeValue }}
              onChange={(e) => setSizeValue(e.target.value)}
            />
            <label htmlFor={id} className="radio_custom_label">
              <div
                className={`border border-gray-300 py-3 text-center cursor-pointer "
                        }`}
              >
                {value}
              </div>
            </label>
          </div>
        ))}
      </div>
    </div>

Issues

Now, I have few issues with the above code. When a button is clicked , the other clicked buttons stays active. This doesn't give the toggle functionality that we require. The state is changing but the border on "onClick" persists. So even if the the state is changing, border stays on the element.
What we need is to remove the border from all element and add border to the "target" element.

onChange={(e) => {
    const nodes = e.target.parentElement.parentElement.childNodes;
    for (let i = 0; i < nodes.length; i++) {
    nodes[i].lastChild.firstChild.classList.remove("show_border");
    }
    e.target.nextSibling.firstChild.classList.toggle("show_border");
    return setSizeValue(e.target.value);
}}

Final Code

I had to refactored the code like three times🙂. Here is the final code.

import React, { useState } from "react";

const Main = () => {
  const productSize = ["S", "M", "X", "XXL"];
  //map
  const sizeData = productSize?.map((item) => ({
    id: `input_${item}`,
    value: item,
  }));
  let [sizeValue, setSizeValue] = useState("");
  console.log(sizeValue);
  return (
    <div className="main max-w-lg mx-auto">
      <div className="grid grid-cols-4 gap-8 gap-y-4">
        {sizeData?.map(({ id, value }) => (
          <div className="-mt-2" key={id}>
            <input
              id={id}
              className="invisible radio_custom"
              type="radio"
              value={value}
              checked={sizeValue === { sizeValue }}
              onChange={(e) => {
                const nodes = e.target.parentElement.parentElement.childNodes;
                for (let i = 0; i < nodes.length; i++) {
                  nodes[i].lastChild.firstChild.classList.remove("show_border");
                }
                e.target.nextSibling.firstChild.classList.toggle("show_border");
                return setSizeValue(e.target.value);
              }}
            />
            <label htmlFor={id} className="radio_custom_label">
              <div
                className={`border border-gray-300 py-3 text-center cursor-pointer "
                        }`}
              >
                {value}
              </div>
            </label>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Main;

I used tailwind so no need to add css code. Only extra one css class is required

.show_border {
  border: 1px solid #2b2b2b !important;
}

Final Result

Final Notes

There are multiple ways of doing this. If you have any suggestion or code improvement please do share. Feel free to connect. It's lively to make new friends.😀

DEV Community: Uttam Marandi

How to host outline wiki for free ?

1. Create an EC2 Instance

2. Connect to ec2 instance.

Configure Security Group

3. Install Docker & Docker Compose

Commands Breakdown

sudo apt update

sudo apt install -y docker.io docker-compose

sudo usermod -aG docker ubuntu

newgrp docker

4. Create a .env file

5. Create a docker compose file

Further Setup

Possible Errors

How to run postgres in docker ?

Why postgres in docker ?

Install Docker Desktop

Running PostgreSQL Container

Breakdown

Check if docker container is running

Connect to postgres

Breakdown:

How to create a new database.

How to check all the database inside the container

What's Next?

Possible Error Troubleshooting

Error 1: OCI Runtime Exec Failed

Error 2: Database Creation Failed

How to use scrolltrigger to construct an object? Animating Nezuko

Setup

Setting up scrolltrigger

The trick

Keypoints

Create Login Form with show/hide password field in React.

Basic setup

Defining states

Rendering the component

Functions for handling states

Issues

Final Result

How to create a custom radio button and make it functional in react?

Basic Setup

Preparing the data

Defining States

Rendering the component

Issues

Final Code

Final Result

Final Notes

`sudo apt update`

`sudo apt install -y docker.io docker-compose`

`sudo usermod -aG docker ubuntu`

`newgrp docker`

4. Create a `.env` file