DEV Community: Sahil Patel

Birdle: A Medium Clone built with Appwrite

Sahil Patel — Sat, 07 May 2022 17:56:52 +0000

Overview of My Submission

Birdle( pronounced as 'baerdle' ) is a clone of Medium.com webapp. it is built with an amazing backed of Appwrite and Nuxt3. I have tried to implement some of the features of medium with Appwrite using a NoSQL database.

Check out the demo over here : Birdle Demo
Note: Please use a computer or laptop as the app is not fully optimized for mobile devices.

The idea behind building this project was to use Nuxt3 and Appwrite together and learn both of them.

As Nuxt is still in beta, I did not want to lose this chance of learning it for the future.

I had heard of Appwrite but never used it, but in the last few days, I have deployed it on the cloud, built an app, and deployed. Learned a lot about Appwrite and the community is awesome.

Features

Users can register using magic-link and Google OAuth .
Follow users and get recent articles from them.
Create stories and publish them.
Upload user avatar
Create blog posts, publish and make a draft
CRUD on blog posts
Create publications
Get the latest blog articles on the Dashboard
Check out all the following users
Add 5 tags to each article post
Each tag can be searched using /tag/[tag_name] route
Edit user settings
Manage publications
Check published and draft stories.
Create & Edit Publications

Tech Stack

| Tech          | Purpose     |
| -----------   | ----------- |
| Nuxt3         | Frontend    |
| Tailwind CSS  | Text        |
| SendInBlue    | Send Emails |
| Vercel        | Deployment  |

Appwrite - The Backend Guy

Appwrite has won me over firebase. I did not think of Appwite to be so easy in the first encounter. The one thing that makes Appwrite awesome is its documentation and the easy-to-use API.

In this app, I have used Magic-link and Google authentication, a database to store posts, user data, publications, and storage for all the media related to blog posts and users.

To get images and names of the users with their initials, Avatar API was the boon. There are many third-party APIs available that provide this service, but having it integrated is a plus for Appwrite.

Nuxt3 - The Front-end Guy

I do mostly use Vue3 in my projects. I learnt a lot of things about Nuxt3 while building Birdle. I encountered many problems but lastly found solutions either through community or digging myself into the Nuxt codebase.

TinyMCE - The Builder/Contractor

Like Medium, Birdle also provides support for adding articles. I wanted to build an editor similar to Medium but did not have enough time to go through all the hassle so I used TinyMCE for the purpose. It served the purpose and in the future, I will create the Medium editor for Birdle.

TailwindCSS - The House-keeping

Tailwind is my go-to tool for anything in CSS. I have built the whole Birdle web app using Tailwind only and I am happy that it turned out awesome.

SendInBlue - The Email Guy

I was looking to send emails as soon as the user is registered. but the default mailer is no more there in Appwrite. So, I used SendinBlue to send emails.

Future Improvements

Stats for individual post
Mobile UI implementation
Add Publication member functionality
Notifications
The original Medium Editor
Implement global tags collection
Implementation of Lists
Search functionality for People, Publications & articles

Submission Category

Web2 Wizards

Link to Code

{ pretty embed }

sahilpatel09 / Birdle-Appwrite-Hackathon

Birdle - A Social Journalism Website (Not maintained anymore)

Birdle is a website similar to Medium.com and is built with Appwrite backend deployed on the cloud. The tech stack used here is Nuxt.js and Tailwind css on the frontend and appwrite on the backend.

Birdle Screenshots:

Birdle Single Post Image

Birdle User Profile Image

Birdle Dashboard Image

Nuxt JS Docs

We recommend to look at the documentation.

Setup

Make sure to install the dependencies

yarn install

Development

Start the development server on http://localhost:3000

yarn dev

Production

Build the application for production:

yarn build

Checkout the deployment documentation.

View on GitHub

Additional Resources / Info

Screenshots & Promo Video

Dashboard

User Profile

Single Post Article

Publication

Post Published in Publication

Editor Built with TinyMCE

Resources for data used

All the user images in the app are generated using https://generated.photos/ Link
Other random post data is generated using a fake data generator. Link
Nuxt3 Beta
Tailwind CSS

Conclusion & Thoughts

It was fun working the Appwrite. In the past 3 weeks, I have learned a lot, about building a full-stack app from scratch using Appwrite.

Appwrite is amazing but I would love support for relational databases. It was new for me to build the app in NoSQL. Overall, thanks to Dev.to and Appwrite for hosting this amazing hackathon.

9 days in Appwrite Hackathon - My Progress

Sahil Patel — Sat, 23 Apr 2022 14:05:17 +0000

I have been building my project since 9 days. Initial few days were learning how does Appwrite work and getting to set it up. I was totally confused what to make and which tech stack to choose to build the app.

I could not think of a great idea to build an app with so thought why not build something which is already built out there. But was not sure whether it was a good idea or not. So did go ahead asked in the help thread. Eldad replied to my post that I can go ahead and build a an awesome clone.

In the beginning I thought, why not build a clone for Dev.to, but someone I saw a post from someone who was already working on the Dev.to clone so I did drop the idea. The next thing came to my mind was Medium.com.

My app is called Birdle, a clone of Medium. I have recreated the UI which is almost the same using Tailwind CSS. I thought of using Next.js for this project but it would be easy and I would not learn anything new besides Appwrite services.

Guess what did I choose?

`Nuxt 3`

Nuxt v.3 is fairly new and still in beta. Not a lot of people are using it. There are very less solutions are there if I get stuck. Well, I have taken the challenge to build something good using a beta version. It takes more time than normal to find solutions to the problem, if occurred, but I learning a lot with it.

`Tailwind CSS`

I am fairly new to Tailwind. One of my friend suggested to use a UI kit and there are many out there but it would mess up the look I think of the app. I wanted it to be very similar to in terms of UI to Medium, after all I am building a Medium clone. So it was direct No to any other frameworks out there.

The simplicity of Tailwind CSS is what I think is great for any project. Besides I do not have to write Media queries and it is a boon.

`SendInBlue - The Email Guy`

This app had to send emails to authors and followers and so many other things. The default Appwrite service only sends emails regarding login and registration to the app. I wanted a different solution so I am sending emails using a cloud function through SendInBlue.

`Appwrite - The Talk of the Town`

I have heard of Appwrite before but never tried it due it is not available on cloud. I am glad that it is coming soon on cloud as well. If I talk about Appwrite's SDK for client, it is way simpler than I thought. Clearly loved to code with it. Here is how my Appwrite dashboard looks like after working 9 days.

Well, I found some problems with it, too. I was doing a lot of creating and deleting the users through Google OAuth and after sometime the users were just disappeared from the Users section. I had no problem with Magic-URL and since then using it because real Medium app uses it too.

State of the App

At moment, I have taken care of auth, users, CRUD of users and articles and the next step is to work on other features similar to Medium. All the SVG assets are provided by SVGRepo , it was the only place I could find what I wanted.

Author Images are generated by AI, those people never existed on Earth or may be they did?! I don't know. Hope they do not blame me for copyright stuff.

The articles are randomly generated from an API. The name, the images and also the bio of the author is fake. The functionality of publishing to Publications is yet under construction, Self publishing is done.

Conclusion

I am learning a lot. I did use the tech stack because I wanted to learn something new and along with build something that would look awesome on my portfolio. Appwrite is an awesome piece of software and I really am looking to use every service it provides. I think it is a great service other than Firebase. Thanks for reading.

![Birdle Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upptlcrjapcp773nlxgr.png)

Deploy Appwrite using docker on GitPod & Azure

Sahil Patel — Fri, 15 Apr 2022 09:29:00 +0000

I have started building my web app using Appwrite as a backend service for the Hackathon on Dev.to. Most of the time I work with cloud platforms which are accessible on the internet for development and testing, like firebase and Supabase or my own cloud server. Appwrite has its own cloud platform upcoming. There are other options like Gitpod and Digital Ocean to deploy your app. I have deployed Appwrite on Gitpod which is just one click long process and on Azure Virtual Machine.

I looked up on Google how to install Appwrite on Azure but no article came up or something that is helping. So I tried on my own using the Azure App Service but no luck after changing many configs.

Appwrite has option to deploy an instance on Gitpod. I have used it and trust me it is an awesome service providing the installation of the Appwrite. Below are the 2 ways to deploy Appwrite on the internet.

Deploy Appwrite For Free on Gitpod

Gitpod's free plan should be just fine for you to fire up and running your Appwrite deployment. There are some limitations to free plan. You can only have 50 hours of running it every month. I think this is a very generous plan for development and testing.

1. Create an account on Gitpod

Here is the link to signup for Gitpod. Gitpod Home Page Gitpod Pricing

Step 2: Deploy Appwrite

Once account is up and running, make sure you are logged in and go to the installation docs. Appwrite Installation Docs

Scroll down and find "one click setups" section.

Click on "Click to install" link for Gitpod. Now behind the scenes Gitpod will fetch the docker yaml configuration from the Github repo and and pull the image from docker as well set it up.

You may see a screen like this once the deploy is finished. On the right hand, in the simple browser window, open the URL link into another tab, create account and you are good to go.

Deploy Appwrite with Azure

Azure will cost you money to host Appwrite on Cloud VM. Feel free to use Gitpod instead.

Get Your Virtual Machine Ready

Go to Azure Portal. Link - Azure portal
Create an account if you do not have one.
You will be landed on the home page of the portal like below.

Choose Virtual Machines and go ahead.
This screen will show all the deployed instances.

Click Create to create a new VM.

![[choose-vm.png]]

Choose the second option, Azure Virtual Machine with preset configuration to create a new VM using preset.
You will be asked to choose different environment based on the need but just skip it. You will find a Skip for now button down somewhere.
Now, lets create the VM for out needs.

Choose the subscription and the resource group first, create if you do not have it.

Fill up the details based on your needs. Below is my configuration.

Choose the Virtual Machine Name - appwrite
Choose the region - Canada (Canada Central) - It should be the nearest
Availability Options - No infrastructure redundancy required
Security - Standard
Image: Ubuntu Server 20.04 LTS - Gen2
Azure Spot - Unchecked
Size - Standard_B2s, 2vcps 4 GiB Memeory - I heard someone saying it automatically kills the setup of appwrite if the minimum RAM size is less than 2 GB. So that is the reason for choosing the Standard B2.
Administration type - You can go ahead and use SSH as the login type but I prefer it with username and password.
Now click Review + Create .
Azure will validate everything and then show you all the information filled.
Review it and click on create. It will start the process of deployment of your VM on Azure cloud.
Once the VM is ready, go to the VM's resource and copy the public IP address. Make sure to make it static and not dynamic.

Connect to your instance.
- Download and Install Putty
- Add the IP address copied and click Open.
- Putty will prompt for credentials. Enter credentials and click enter.
- If everything would be okay so far then you will be logged into the instance with sudo permissions.

Time to add docker to the VM.
Run commands below to install docker on your VM step by step.

Check out this link for in detail information about these commands.

#Update the list of packages
sudo apt update

#Instll prerequisite packages
sudo apt install apt-transport-https ca-certificates curl software-properties-common

#Add GPG key for the official docker repo
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

#Add the docker repo of apt sources
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu focal stable"

#Install docker
sudo apt install docker-ce

#Check status of docker daemon
sudo systemctl status docker

Run the command to install appwrite.

docker run -it --rm \
--volume /var/run/docker.sock:/var/run/docker.sock \
--volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
--entrypoint="install" \
appwrite/appwrite:0.13.4

Note: If you find the error below, do these steps.

docker: Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Post "http://%2Fvar%2Frun%2Fdocker.sock/v1.24/containers/create": dial unix /var/run/docker.sock: connect: permission denied.
See 'docker run --help'.

Run these command and then run the installation command again. For more details on these commands, check out this stack overflow question.

$ sudo groupadd docker
sudo usermod -aG docker $USER
newgrp docker
docker run hello-world # if docker runs the hello-world image then you are good to go.

Run the installation command again and there should be no problems.

Once Docker has successfully pulled the image from the hub it will ask some of the questions, which are as below :

Choose your server HTTP port: (default: 80)
Ans: Keep it default.
Choose your server HTTPS port: (default: 443)
Ans: Keep it default.
Choose a secret API key, make sure to make a backup of your key in a secure location (default: 'your-secret-key')
Ans: Keep it default.
Enter your Appwrite hostname (default: 'localhost')
Ans: Enter the public IP address of your VM instance
Enter a DNS A record hostname to serve as a CNAME for your custom domains.
You can use the same value as used for the Appwrite hostname. (default: 'localhost')
Ans: Again, Enter the public IP address of your VM instance

Once you click ok, it will run docker-compose and set up the config for appwrite,

Once done, You will see a message that "Appwrite Installed Successfully."
Now, to access the Appwrite console go to the public IP address of your VM and you should see the screen like below. Create an account and start building using Appwrite.

Dynamic Gradient Generator Built using React.js

Sahil Patel — Tue, 12 Apr 2022 15:29:27 +0000

A gradient generator seems fun. I do mostly use mycolor.space website to generate gradient in different formats. In the weekend I decided to make my own gradient generator and I have made a similar clone of mycolor.space. Take a look at the demo here.

You can find the source code of the project here and the live demo here.

The Gradient generator has options for changing the direction and the colors. It takes to parameters of colors and generates 3 most related colors between them.

Get The Environment Ready

First of all, create a react app using create-react-app and add support for tailwindcss.

npx create-react-app color-generator-react
cd color-generator-react

Now, cd into the project, add the only dependency which is Chroma-js.

yarn add chroma-js
OR
npm install chroma-js

Add TailwindCSS

yarn add -D tailwindcss postcss autoprefixer
OR
npm install -D tailwindcss postcss autoprefixer

The code below creates a tailwindcss.config.js file. As we have passed the -p flag, it also creates a postcss.config.js file with default config to use with tailwindcss.

npx tailwindcss init -p

Now, let us create a tailwind.css file in the assets folder.

mkdir assets
cd assets
touch tailwind.css // Linux
OR 
echo. > tailwind.css // Windows

In the created tailwind.css file, add the below tailwindcss directives.

@tailwind base;
@tailwind components;
@tailwind utilities;

Congrats, Tailwindcss is successfully added to the project.

Once the tailwindcss is added we can go ahead and start working on the project. But before that, let us have a little introduction of chroma-js.

Introduction to Chroma-js

Chroma-js is just an amazing piece of software when it comes to color manipulation, conversion and scaling. It has everything you need for every sort of manipulation from darkening or brightening to hue manipulation. It also gives you results in different color spaces. It can read, convert, analyze and manipulate colors from and to different formats.

We are going to use Chroma-js to generate 3 more colors from the actual given 2 parameters and create a gradient of 5 colors.

Let us Build the Layout

There is only single main component for the sake of simplicity. The markup below makes anything between the div to be centered using the flexbox properties.

    <div className="flex items-center bg-gray-900 justify-center md:fixed h-screen inset-0 px-10">
    /* All the content is centered. */
    </div>

To create the controls to change the direction of the color spread, add the below code in to the App.js file.


          <div className="flex items-center justify-center p-2 gap-2 flex-wrap md:gap-5">

              <button title="to top" onClick={() => changeOrientation("to top") }>
              <img src={arrow} alt="arrow to top" />
              </button>

              <button title="to right top" onClick={() => changeOrientation("to right top") }>
              <img src={arrow} alt="arrow to right top" className="transform rotate-45" />
              </button>

              <button title="to right" onClick={() => changeOrientation("to right") }>
              <img src={arrow} alt="arrow to right" className="transform rotate-90" />
              </button>

              <button title="to right bottom" onClick={() => changeOrientation("to right bottom") }>
              <img src={arrow} alt="arrow to right bottom" className="rotate-135" />
              </button>

              <button title="to bottom" onClick={() => changeOrientation("to bottom") }>
              <img src={arrow} alt="arrow to bottom" className="transform rotate-180" />
              </button>

              <button title="to bottom left" onClick={() => changeOrientation("to bottom left") }>
              <img src={arrow} alt="arrow to bottom left" className="rotate-225" />
              </button>

              <button title="to left" onClick={() => changeOrientation("to left") }>
              <img src={arrow} alt="arrow to left" className="transform -rotate-90" />
              </button>

              <button title="to left top" onClick={() => changeOrientation("to left top") }>
              <img src={arrow} alt="arrow to left top" className="transform rotate-180" />
              </button>

              <button onClick={() => changeOrientation("circle") }>
              <img src={radial} alt="radial" className="px-1.5" />
              </button>

          </div>

To make some of them rotate, add this CSS in App.css file.

.rotate-135 {
    transform: rotate(135deg);
}

.rotate-225 {
    transform: rotate(225deg);
}
button:focus{
    border: 2px solid white;
    border-radius:50%;
    outline: none;
    transition: all 220ms ease-in;
}

It should now look like this.

![[direction-controls.png]]

Let us now add 2 buttons to take the color inputs from the user and a little CSS code box below.

<h2 className="text-xl text-white text-center py-3 mt-5 italic font-cursive">Enter Colors & press Enter.</h2>
<div className="text-white text-center py-2 rounded mb-3  text-white w-40 mx-auto">
  <h2 className="bg-amber-700">{error}</h2>
</div>


<div className="flex items-center justify-center flex-wrap">
    <form className="flex gap-5 justify-center items-center flex-wrap">

        <input type="text"
             ref={hex}
             defaultValue={color1}
             style={icolor1}
             className="rounded px-2 py-3 text-center shadow-2xl font-bold bg-red-900" 
             name="hex" />

        <input type="text"
             ref={hex2}
             defaultValue={color2}
             style={icolor2}
             className="rounded px-2 py-3 text-center shadow-2xl font-bold bg-red-700" 
             name="hex2"/>

        <input
              type="submit"
              className="hidden"
              onClick={(e) => doJob(e)}
              />

      </form>
</div>

  <div className="box md:w-[640px] w-[350px] h-auto mx-auto break-all mt-4 p-2 ">
      <p className="p-3 text-gray-200 font-mono text-base md:text-xl text-center font-semibold">
          <span className="text-gray-100">background-image: </span> { cssCode }
      </p>
  </div>

.font-cursive {
    font-family: cursive;
}

.box{
    background: rgba( 255, 254, 254, 0.05 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 9.5px );
    -webkit-backdrop-filter: blur( 9.5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

It should look like this once add the markup and CSS. Now at this moment, we have finished building the basic layout for the app.

Add the Functionality

First of all we have to declare all the variables and refs for the colors and buttons. To use the state in the React Functional components, I will be using useState hook.


    const [color1, setColor1] = useState("#FF6347"); //input box one default color
    const [color2, setColor2] = useState("#0000FF"); //input box2 one default color

    //dynamically generated colors using chroma js
    const [generated1, setGenerated1] = useState("");
    const [generated2, setGenerated2] = useState("");
    const [generated3, setGenerated3] = useState("");

  //css controls
    const [direction, setDirection] = useState("linear-gradient");
    const [orientation, setOrientation] = useState("to right bottom");

    //errors var
    const [error, setError] = useState("")

  //color vars for dynamic color for the input text
    const [invertedcolor1, setinvertedColor1 ] = useState("")
    const [invertedcolor2, setinvertedColor2 ] = useState("")

    //refs to both the inputs
    const hex = useRef(color1);
    const hex2 = useRef(color2);

  //String style built for the div background to display the gradient color
  const ulStyle = { backgroundImage: direction + "("+orientation+","+color1 +","+generated1 +","+generated2 +","+generated3 +","+color2+")"}

  //string generated to copy by the user
    const cssCode = direction+ "("+orientation+","+color1 +","+generated1 +","+generated2 +","+generated3 +","+color2+");";

Now, when the arrow buttons are selected, the function changeOrientation is fired with direction string passed in like below.

<button title="to right" onClick={() => changeOrientation("to right") }>
              <img src={arrow} alt="arrow to right" className="transform rotate-90" />
</button>

To handle the function we will write below function.


    const changeOrientation = function (ori){

    //condition to check if the passed in string is circle
    //if circle the radial gradient is generated
    //else linear gradient

        if(ori === "circle"){
          //setting the direction variable & orientation
            setDirection("radial-gradient")
            setOrientation(ori)
        }else{
            setDirection("linear-gradient")
            setOrientation(ori)
        }

    }

Now, when the background color is anything we have to set the input box color to dark or bright based on the background color dynamically. As well we will have to generate 3 dynamic colors from the input of the user. To handle that we have below functions.


  //the background color and text color style for inputs
  const icolor1 = { background: color1, color:invertedcolor1 }
    const icolor2 = { background: color2, color:invertedcolor2 }

    function checkContrast(color){

                //checking the luminance of the color
                const contrast = chroma(color).luminance();

        //returning the color based on the luminance of the background
                if(contrast > 0.6){
                    return "#000"
                }else{
                    return "#fff"
                }
    }

Dynamic color generator function.


const generateColors = function () {
    //check if both the colors are valid colors
        if(chroma.valid(color1) && chroma.valid(color2)){

      //use the chroma-js scale feature to interpolate
      //between two color values and generate 3 more
      //dynamic colors including both input colors

            let word = chroma.scale([color1,color2])
                .mode('lch').colors(5);

      //set the generated colors.
      //Due to just 3 colors, I did not use loop.
            setGenerated1(word[1]);
            setGenerated2(word[2]);
            setGenerated3(word[3]);

      //At this moment, setting the text color of the input boxes
            setinvertedColor1(checkContrast(color1))
            setinvertedColor2(checkContrast(color2))

      //Setting the error to empty string
            setError("")

        }else{
          //if not set the error
            setError("Color are no valid.")
        }

    }

Now, whenever someone enters colors and press Enter button, then one function fire which is called doJob(e) where event is passed in the parameter.

    function doJob(e){
        //prevents default submission of the form
        e.preventDefault();
        //setting new values of the input colors
        //everything else changes on their own as the
        //values are reactive
        setColor1(hex.current.value);
        setColor2(hex2.current.value);

    }
  //use the hook instead of componentDidMount 
    useEffect(() => {
      //generating colors on the mount
        generateColors();
    });

Run the app using yarn start or npm run start and you should see the output of the app at localhost:3000.