DEV Community: Georgie

I just finished building my Portfolio! Here are 3 key features I added

Georgie — Tue, 19 Jul 2022 20:40:27 +0000

I built it with ReactJS, TailwindCSS and HeadlessUI.

See link to portfolio here: https://www.georgeisiguzo.xyz/

Just in case you want to create something similar, I want to share how I added 3 key features to the portfolio.

The Key Features

Pre-Loading Screen
Transition
Light/Dark Theme

Now let's begin.

If you're using TailwindCSS, what I'm about to show will be very applicable to you and if you aren't, I wonder why? 😁

Pre-Loading Screen

See the pre-loading screen below:

Now before I show you how to add one to your portfolio or any other app, what's the essence of a preloader on your app?

Preloaders, particularly animated ones, look nice and provide a solid first impression - bootcamp.uxdesign.cc.

Not my words! Lol... But several notable tech portfolios do have them for example - brittanychiang

How to create a pre-loader in a ReactJS app:

We will use functional components and React hooks for all examples in this article:

This is the code to create a pre-loader:

import React, { useEffect, useState } from "react"; // #1

function App() {
  const [isLoading, setIsLoading] = useState(true); // #2

// #3
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 5000);

    return () => {
      clearTimeout(timer);
    };
  }, []);

  return (
    <div className="app">
      {!isLoading && ( // # 4
        <div className="flex flex-col h-screen">
          {// put your main page content here}
        </div>
        )
      }
      {isLoading && ( // # 5
        <div className="flex flex-col h-screen">
          {// put your preloader content here}
        </div>
        )
      }
    </div>
  )

}

export default App;

Explanation:

First we import React, useState, and useEffect hooks.
Next we create a true/false (boolean) variable called isLoading whose value will determine what will show on the page. The initial value for isLoading is true.
We use the useEffect hook to change the value of isLoading after 5 secs using setTimeout()
We use conditional rendering for #4 and #5 to determine how to show our preloader and the main content

Try it out.

Complete the code snippet with your desired content.

Transition

See how one section of my portfolio transitions to another below:

Why add a transition between pages/sections?

Page transitions are animated transitions between pages that give websites that extra touch that distinguishes them as top-notch and worthy of a good browse. So, when applied correctly, it can give a sense of liveliness and help significantly with navigation - orpetron.com

Yeah, page transitions make websites cool 😎

Now how can you add page transitions to your app?

While there are other libraries you can use (and you can also use pure CSS), CSS is hard for me so I use HeadlessUI for transitions.

Before using the code below, you will first need to install HeadlessUI using npm like this:

npm install @headlessui/react

Now, the code:

import { Transition } from "@headlessui/react"; // #1

...
<Transition // #2
    show={true} // place a boolean variable here to determine when to show this component
    enter="transition ease-in-out duration-700 transform"
    enterFrom="translate-x-full"
    enterTo="translate-x-0"
    leave="transition ease-in-out duration-500 transform"
    leaveFrom="translate-x-0"
    leaveTo="translate-x-full"
    >
        {// place component content here}
</Transition>

Explanation:

First we import Transition from HeadlessUI
Next we can use Transition anywhere in our app
Take note of the values of each property (prop) of Transition especially show.
show determine when the component inside Transition will enter and when it will leave the user's screen.
Other props like enter, leave, enterTo etc determine the transition behavior of the component. How it will enter and leave the screen.

See HeadlessUI doc here to know how to tweak each prop.

Let's use Transition to render our preloader and main content like so:

import React, { useEffect, useState } from "react"; // #1

function App() {
  const [isLoading, setIsLoading] = useState(true); // #2

// #3
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 5000);

    return () => {
      clearTimeout(timer);
    };
  }, []);

  return (
    <div className="app">
      <Transition
          show={!isLoading}
          enter="transition ease-in-out duration-700 transform"
          enterFrom="translate-x-full"
          enterTo="translate-x-0"
          leave="transition ease-in-out duration-500 transform"
          leaveFrom="translate-x-0"
          leaveTo="translate-x-full"
        >
          <div className="flex flex-col h-screen">
            {// put your main page content here}
          </div>
      </Transition>
      <Transition
          show={isLoading}
          enter="transition ease-in-out duration-700 transform"
          enterFrom="translate-x-full"
          enterTo="translate-x-0"
          leave="transition ease-in-out duration-500 transform"
          leaveFrom="translate-x-0"
          leaveTo="translate-x-full"
        >
          <div className="flex flex-col h-screen">
            {// put your preloader content here}
          </div>
      </Transition>
    </div>
  )

}

export default App;

Explanation:

We used Transition twice, one for the main content and the other for the preloader.
We passed isLoading(a boolean) as the value for the show prop.
For main content, the show prop value is !isLoading. We use ! before isLoading meaning the opposite or inverse of the current value of isLoading. ! also means not (i.e !isLoading means not isLoading)
For the preloader, the show prop value is isLoading.

That's just it.

Light/Dark Theme

Finally, changing themes from light to dark and vice versa.

Why does your app need this feature?

Let me answer without reference to an external source for once 😅

Put simply:

As a web app user, I have a preference. At night, I prefer all my apps to be on dark mode. Sometimes during the day, I place all apps on dark mode, especially my Twitter app. I believe every other user also has a preference so giving users the ability to set your app theme the way they like is a big win for User Experience (UX) - TheReactNewbie

I hope you agree with me 😉

Now for the how?

How can you add a switch between light and dark mode in your React App?

TailwindCSS makes this very easy.

Fortunately for me and for you, I have already written a step-by-step guide on how to do this so

Head over to the article here and enjoy!.

Okay. That's it for now.

I hope you found this article helpful.

I welcome feedback and constructive criticisms of my portfolio. Thank you as you do

Here's a link to the portfolio again:

https://www.georgeisiguzo.xyz/

How to build a Modal Component with Vite, React Custom Hooks and TailwindCSS

Georgie — Tue, 28 Jun 2022 20:46:00 +0000

Hello Friend👋

Let's do some coding practice together by building a modal component.

Full disclosure: I'm still learning ReactJs and Vite and TailwindCSS and many more things. Lol...

What You'll Learn

How to create a React app with Vite
How to statically position an element relative to a browser window using TailwindCSS
How to create a custom hook

What We Will Build

Excited? Let's begin!

Step 1: Setup

There's been a lot of buzzes lately about creating ReactJs apps with Vite so let's give that a try shall we?

First, we create a Vite project with the command below

npm create vite@latest

Then you'll be asked to name your project like so:

Next, select the framework for this tutorial like so:

And that's all the setup you need for now.

Step 2: Start the server

Now we will install the dependencies we need and start the server using the commands below:

npm install && npm run dev

Now, when you open up your browser and enter the address: http://localhost:3000/ you should see this:

If this is your first time creating a React app with Vite then congrats! (It's my first time too 😁)

Step 3: Add TailwindCSS to your project

We will use TailwindCSS to style our app so let's add it to our project with the command below:

npm install -D tailwindcss postcss autoprefixer

and another command below:

npx tailwindcss init -p

This will create two new files, postcss.config.js & tailwind.config.js, in the root directory of our project.

Now on the tailwind.config.js file, remove all the code in it and replace it with:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Then finally in this step, locate your index.css file in the root directory, delete all the codes in it and add these 3 lines of code at the top:

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

By now your root directory should look like this:

and your index.css should look like this:

Now, let's check if we've properly added TailwindCSS to our project.

Stop your server and restart it with the command below:

npm run dev

Now go to http://localhost:3000/ and this is what your app will look like now:

Notice any changes?

Yes, the style on the button: "count is: 0" and on the links "Learn React | Vite Docs" has changed.

This shows that Tailwind has been added successfully. If you don't notice any change on yours, please refer back to the instructions above and try to find out what you didn't do correctly.

To read more about Vite please refer to this article by Victoria Lo

You can also use TailwindCSS official doc to learn how to add Tailwind to a React app

Step 3: Getting our hands dirty

Create a Components folder inside the src directory and then create a file Navbar.jsx.

Your folder structure should look like this:

Now open the Navbar.jsx file and paste the code below into it:

import React from "react";

export default function Navbar() {
  return (
    <nav className="flex items-center justify-between flex-wrap bg-teal-500 p-4">
      <div className="flex items-center flex-shrink-0 text-white mr-6">
        <svg
          className="fill-current h-8 w-8 mr-2"
          width="54"
          height="54"
          viewBox="0 0 54 54"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" />
        </svg>
        <span className="font-semibold text-xl tracking-tight">
          Tailwind Shop
        </span>
      </div>
      <div className="block">
        {/** lg:hidden */}
        <button className="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
          <svg
            className="fill-current h-3 w-3"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <title>Menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
          </svg>
        </button>
      </div>
    </nav>
  );
}

Now find the App.jsx file, delete all the codes in it and paste the code below:

import React from "react";
import Navbar from "./Components/Navbar";

export default function App() {
  return (
    <>
      <Navbar />
    </>
  );
}

Explanation

Just in case this is your first time using TailwindCSS...

On the Navbar.jsx file, you must have noticed some codes like this: className="font-semibold text-xl tracking-tight"

This is how we use TailwindCSS in our code. Tailwind has classes that when added to the className attribute of an element, it changes the styling of that element.

For example, font-semibold will change the font-weight of an element to font-weight: 600; in vanilla CSS.

In our use case, we added font-semibold to the span element that holds Tailwind Shop text in the navbar. Try changing font-semibold to font-extrabold and notice the difference.

Use of empty tags: <></>

On the App.jsx file, we placed the Navbar component in an empty tag:

<>
      <Navbar />
</>

If this is your first time seeing an empty tag, don't worry, it won't give an error. You can read about it here

Now go back to our app on the browser and notice the changes:

Good, we are getting there.

We are creating something that looks like an e-commerce web app (because e-commerce web apps love using modals 😁)

Now let's create a product card that a user can click on.

Inside the Components folder, create a Product.jsx file and paste this code to it:

import React from "react";

export default function Product(props) {
  return (
    <div className="max-w-xs rounded overflow-hidden shadow-lg my-4">
      <img
        className="w-full"
        src="https://cdn.shopify.com/s/files/1/1626/8507/products/classic-dad-hat-pink-front-620a928e93e58_345x550.jpg?v=1644860054"
        alt="Sunset in the mountains"
      />
      <div className="flex justify-between px-6 py-4">
        <div className="font-bold text-xl">The Coldest Sunset</div>
        <div className="font-bold font-mono text-xl text-red-700">$35</div>
      </div>
    </div>
  );
}

Now let's import it into our App.jsx component like this:

import React from "react";
import Navbar from "./Components/Navbar";
import Product from "./Components/Product"; // just added

export default function App() {
  return (
    <>
      <Navbar />
      {/* just added */}
      <div className="flex justify-center">
        <Product />
      </div>
    </>
  );
}

Our web app should look like this now:

Cool right?

Step 4: Creating our modal component

Create a new file in Components directory (or folder) with the name Modal.jsx.

Paste this code into it:

import React from "react";

export default function Modal(props) {
  return (
    <div className="static">
      <div className="fixed h-screen w-screen bg-black z-10 top-0 opacity-75"></div>
    </div>
  );
}

Now import the modal into App.jsx component as well:

import React from "react";
import Navbar from "./Components/Navbar";
import Product from "./Components/Product";
import Modal from "./Components/Modal"; // just added

export default function App() {
  return (
    <>
      <Navbar />
      <div className="flex justify-center">
        <Product />
      </div>
      {/* just added */}
      <Modal />
    </>
  );
}

You should see this on our web page now:

Notice any change?

Our page has suddenly become dark. Why? Where is the modal?

Explanation

We are not done yet
Before adding the actual content of the modal, we added an element that will cover the entire screen whenever our modal is on display.
This element has a dark opacity (opacity-75) that's why our web page looks dark currently

Notice that the parent element in the modal component has static added to the className:

<div className="static"> ...

and the element that covers the entire screen has fixed added to its className attribute:

<div className="fixed h-screen w-screen bg-black z-10 top-0 opacity-75">...

This is a simple way to position an element relative to the browser window using TailwindCSS.

Two things to note:

The direct parent of the element you want to position should have a static class added to it
While the element you want to position will have a fixed class added to it.

Easy right?

See the Tailwind docs for positioning elements to learn more.

Now let's add the modal content

Edit Modal.jsx component like this:

import React from "react";

export default function Modal(props) {
  return (
    <div className="static">
      <div
        className="fixed h-screen w-screen bg-black z-10 top-0 opacity-75"
      ></div>
      { /** Just added */}
      <div className="fixed top-0 right-0 left-0 z-20 flex justify-center">
        <div className="mx-4 my-4 bg-white">
            <div className="flex justify-end">
                <button 
                    className="border-2 text-red-900 px-2 m-2"
                >
                    X
                </button>
            </div>
            <div className=" bg-white">
                <img
                    className="w-full"
                    src="https://cdn.shopify.com/s/files/1/1626/8507/products/classic-dad-hat-pink-front-620a928e93e58_345x550.jpg?v=1644860054"
                    alt="Sunset in the mountains"
                />
                <div className="flex justify-between px-6 py-1">
                    <div className="font-bold text-xl">The Coldest Sunset</div>
                    <div className="font-bold font-mono text-xl text-red-700">$35</div>
                </div>
                <div className="flex justify-around items-center px-2 py-1">
                    <button className="border-2 px-2">-</button>
                    <div className="font-bold font-mono text-xl text-red-700">Quanity: 1</div>
                    <button className="border-2 px-2">+</button>
                </div>
                <div className="flex justify-around items-center px-2 py-1">
                    <button className="border-2 px-2 py-1 rounded bg-green-500 text-white font-bold font-mono text-lg">Add to Cart</button>
                </div>
            </div>
        </div>
      </div>
    </div>
  );
}

Check the web app:

Great! Our modal is showing!

Now we will need to add logic so that our modal only shows up when we want to view it.

Step 5: Adding logic to our modal using Custom Hooks

The fun part is here. Let's take it slowly now.

Create a new folder for our custom hooks. Name the folder Hooks
Inside the Hooks folder (directory), create a new file with the name useToggle.js
Note: it's useToggle.js and not useToggle.jsx. This is because there will be no jsx code in this file (script).
Copy and paste the command below into useToggle.js:

import { useState } from "react";

export default function useToggle() {
  const [on, setOn] = useState(false);

  const toggler = () => {
    setOn((on) => !on);
  };

  return { on, toggler };
}

Explanation

We imported useState, a hook that comes with React that allows us to save data in state inside a function component.
What we are saving in state:

const [on, setOn] = useState(false);

We are saving a boolean named on and right next to it is setOn a function that lets you update the value of on.

We then create toggler, an arrow function that will call setOn to update the value of on
Lastly, we return on and toggler inside an object wrapping them in curly braces ({}).

Now let's use useToggle in our App, Product and Modal components.

In App.js, import useToggle.js:

import useToggle from "./Hooks/useToggle";

The retrieve (or destructure) on and toggler from useToggle like so:

const { on, toggler } = useToggle();

Now let's use the value of on to conditionally show Modal like this:

{on && <Modal toggler={toggler} /> /** just added */}

What the above code means is this:

-> whenever on is true, render (or display) the <Modal /> component

All the code in App.jsx should be:

import React from "react";
import Navbar from "./Components/Navbar";
import Product from "./Components/Product";
import Modal from "./Components/Modal";
import useToggle from "./Hooks/useToggle"; // just added

export default function App() {
  const { on, toggler } = useToggle(); // just added

  return (
    <>
      <Navbar />
      <div className="flex justify-center">
        <Product toggler={toggler} />
      </div>
      {on && <Modal toggler={toggler} /> /** just added */}
    </>
  );
}

Now Modal will only show when on is true.

View your web app, notice now that the modal has disappeared?

But how will we bring it back to the page when we need it?

We pass toggler as a prop to both the Product component and the Modal component.

Like this:

<Product toggler={toggler} />

and

<Modal toggler={toggler} />

Now on Product.jsx add an onClick event so that will call toggler whenever the product component is clicked on:

Do this:

import React from "react";

export default function Product(props) {
  return (
    <div 
        onClick={() => props.toggler()} // just added
        className="max-w-xs rounded overflow-hidden shadow-lg my-4"
    >
// the rest of the code should be the same

Then in Modal.jsx, add an onClick event to the X button so that it calls toggler whenever it is clicked on.

Do this:

import React from "react";

export default function Modal(props) {
  return (
    <div className="static">
      <div className="fixed h-screen w-screen bg-black z-10 top-0 opacity-75"></div>
      {/** Just added */}
      <div className="fixed top-0 right-0 left-0 z-20 flex justify-center">
        <div className="mx-4 my-4 bg-white">
          <div className="flex justify-end">
            <button
              onClick={() => props.toggler()}
              className="border-2 text-red-900 px-2 m-2"
            >
              X
            </button>
          </div>
// the rest of the code should be the same

Make sure to save all the files we just edited.

Step 6: View the App

We are done!

Head back to the browser and see the magic unfold:

Nice isn't it?

Congrats! We've successfully built a working modal component in an e-commerce app.

Thanks for reading.

I'll be using this modal example to also explain React Context API and the difference between Context API and Custom Hooks.

Do keep in touch. See ya ✌️

Dev x Appwrite Hackathon: #5 Getting Started on DevSpace Forum

Georgie — Mon, 09 May 2022 21:38:45 +0000

Greetings from this side 😊

This is the final article of this series. I will briefly write about how to get started on DevSpace Forum (The app I created during the Hackathon).

I will also talk about future plans and features for the app.

But firstly, the app details.

DevSpace Forum

App URL - https://devspace-forum.netlify.app/
App Screenshot

Welcome/Onboarding page

Home Page

Create Space Page

Ask A Question Page

Navigate through Spaces/Questions

User Profile Page

Features

On the onboarding page, you can sign up with your email. You will need to fill in the username and password fields.

Alternatively, you can log in with google by clicking on the google icon below the form.

Once you're signed in, you can create a space, ask a question, or find an existing space to join (live or upcoming)

Find the link to a space by clicking on the space.

At the moment, a space can be held via zoom or google meet.

The whole essence of Devspace is to allow programmers to ask and explain concepts and technologies during live video sessions.

Future features

1. In-App Video Session:

Instead of using Google Meet or Zoom for live sessions, an in-app video session feature will be developed.

This will keep all activities within the app and to better regulate them

2. In-App Chat:

An In-App chat feature should bring everyone closer.

3. Improve User Interface/ User Experience:

This is just version 1.0 😉

Hopefully, the subsequent versions should look and feel better.

At the moment, users cannot edit their profile via the profile page.

With limited time on my hands at present, I will be working on it as soon as I get the chance to.

Source Code / Repo

DevSpace Forum ·

DevSpace Forum is an online community where you can get your tech related questions answered via video conferencing. You can also talk about the latest technology you're using in live sessions.

Questions on DevSpace can be in the form of "how to's", "getting started", "introduction", "onboarding experience", etc.

Preview

Description

The DevSpace Forum will be made with the following technologies:

React & React-Router (FrontEnd)
TailWind CSS
AppWrite (API, Authentication & Database)

Installation

In the project directory, you can run:

npm start

This will install all the dependencies from the package.json file

Contributing

DevSpace Forum is open sourced so it can be used by others. See the LICENSE file for terms and conditions

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Thanks

License

Apache-2 permissive license

View on GitHub

Take-aways

Wow, I must say I've learned a lot during this time.

I used React Render Props and then I changed to React Context.

I felt React Context was better in this use case.

Tailwind CSS! I'm adding that to my CV/Portfolio Asap!

Operation get a tech job is in motion! 😁😂

Hmmm... How about working on a limited time frame. Phew... For someone who has a 9-5 Mondays - Fridays, I really pushed myself.

This is my first encounter with droplets, containers, nano (Linux terminal editor), Gitpod, Digital Ocean, and Appwrite!

Kudos to the Appwrite team for the easy-to-read documentation, and the growing Appwrite community that supports you when you hit a brick wall (bugs 😪).

Speaking about the Appwrite community, I feel like writing blog articles and tutorials that will be of help to newbies in the community like myself.

We'll see how that goes.

Finally, kudos to the DEV Community for this cool platform to write articles on the go with my phone whenever I'm less busy 😉

That's all for now.

See you later—ciao!

Dev x Appwrite Hackathon: #4 Installing Appwrite on Digital Ocean

Georgie — Sat, 07 May 2022 17:16:42 +0000

Hi friends!

Some days back, I installed Appwrite on Digital Ocean and it was pretty easy.

I didn't do it without any help though. I found several tutorials that helped.

So this is me giving back to the appwrite community and hopefully, this will help another appwrite newbie (I'm basically a Digital Ocean newbie too 😂)

Step 1: Go to Appwrite Docs

Go to Appwrite Installation Docs -> One Click Setups, then click on "Click to install" as shown below:

This will take you to digital oceans marketplace. Then click on "Create droplet" as shown below:

If you have an account on digital ocean, and you've added a payment method, you should be looking at a form now.

Let's fill out the form.

Digital ocean gives $100 free credit to new users once you add a payment method i.e your credit/debit card

Step 2: Filling out the form

Use the screenshots below to fill the form accordingly:

This...

And finally this...

Step 3: Configuration

Get your Appwrite droplet endpoint (IP address) from your digital ocean dashboard here:

Paste the IP address on a new tab and sign up.

Now you can go ahead to set up your Appwrite backend using Appwrite docs here

That's if you don't know how to setup appwrite

SMTP Disabled Warning

Now if you've gotten to the point where you want to create an account from your frontend app using appwrite SDK:

appwrite.account.create('unique()', 'me@example.com', 'password', 'Jane Doe')

You'll get a warning on your console saying:

SMTP Disabled

This means that your Appwrite server was not able to send a verification email to the email address you passed to .account.create(..)

Step 4: Enable SMTP from Digital Ocean console

This was where I was stuck a little because normally, to enable SMTP, I just need to add SMTP details to my appwrite .env file.

But where can I find my appwrite files on digital ocean?

I wondered 🤔

After some google searching, one tutorial I found (which I will mention at the end) directed me to my appwrite droplet console.

Access your appwrite droplet console here:

Then click on "Launch Console"

Once the console is launched, you should see this:

Now right where the arrow in the screenshot above is pointing, type the command:

cd appwrite

Press enter then type this too:

nano .env

Press enter as well.

Now your .env file should be opened.

Move the cursor to the line _APP_SMTP_HOST as shown below:

And edit all the lines below with your own SMTP settings:

_APP_SMTP_HOST=smtp.mailgun.org
_APP_SMTP_PORT=587
_APP_SMTP_SECURE=tls
_APP_SMTP_USERNAME=YOUR-SMTP-USERNAME
_APP_SMTP_PASSWORD=YOUR-SMTP-PASSWORD

I use mailgun free account for testing purposes. You can create one too by clicking here

Now when you're done, press control + o to save the file.

This will appear at the bottom of your screen:

Press enter then you can either close the windows or press `Control + X to close the console.

Almost done.

Step 5: Rebuild your Appwrite stack

Normally, you should restart your appwrite server to see if everything is working fine...

but in other not to waste time going back and forth with it, One sure-fire way to make sure your changes in .env have taken effect is to rebuild your Appwrite stack.

Launch the console again (remember you can launch the console from your digital ocean dashboard)

Once the console is up, type and press enter the following command:

this

cd appwrite

and then this
docker-compose up -d --build --force-recreate
It should rebuild and restart your appwrite server.

Head back to your front end and try to create an account again.

You can also test SMTP from your Appwrite Console by logging out and clicking on 'forget password' to see if you'll receive a mail to create a new password.

And we are done!... Phew...

Wasn't difficult, was it?

Update on the DevSpace Forum App

I'm 90% done!

View the app live here

You can sign in (with google too)

Create a space... Ask a question... Test it out.

What's left to do?

I want to use Appwrite Storage Services to allow users add profile pictures and cover images for a space.

Hmmm... I wish I had more free time.

My last post in this series will be on how to use Devspace Forum.

See ya then!

Useful resources I used for this article:

See DevSpace Forum Repo here

DevSpace Forum ·

DevSpace Forum is an online community where you can get your tech related questions answered via video conferencing. You can also talk about the latest technology you're using in live sessions.

Questions on DevSpace can be in the form of "how to's", "getting started", "introduction", "onboarding experience", etc.

Preview

Description

The DevSpace Forum will be made with the following technologies:

React & React-Router (FrontEnd)
TailWind CSS
AppWrite (API, Authentication & Database)

Installation

In the project directory, you can run:

npm start

This will install all the dependencies from the package.json file

Contributing

DevSpace Forum is open sourced so it can be used by others. See the LICENSE file for terms and conditions

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Thanks

License

Apache-2 permissive license

View on GitHub

Dev x Appwrite Hackathon: #3 CORS Challenges when using Appwrite on Gitpod

Georgie — Thu, 28 Apr 2022 21:27:24 +0000

Hi friends!

This is the third post of the series DevSpaceForum: An Online Community built with Appwrite x React x TailWindCSS

In this post, I'll write about the several attempts I made to overcome CORS errors when using the Appwrite Web SDK.

My Appwrite Setup

I installed Appwrite Backend as a service (BaaS) on Gitpod. This was so hassle-free. The installation and setup were fast and I was loving it.

The reason I didn't install Appwrite on my local machine was that my local machine's speed has declined over the years and it gets painfully slow most times.

Kudos to the Appwrite team for making it very easy to install virtually.

After going through the Appwrite documentation and I was eager to begin the integration with my front end.

Then came CORS errors.

Please note: CORS stands for Cross-Origin Resource Sharing and it is a cyber security mechanism that allows/prevents one origin to access a resource from a different origin. Read more about it here

Here are the attempts I made to resolve the errors.

Attempt 1: Using Appwrite Web SDK directly in my React Frontend.

I attempted to use the Appwrite SDK directly in my react app so I did the following:

On my Appwrite project on gitpod, I added a web platform specifying the domain that will interact with the platform.

In this case, the domain is localhost since my react frontend is still locally hosted on my machine.

See the screenshot below for details:

Then I installed Appwrite web SDK on my react app.

See Appwrite documentation here for the complete steps so setup.

Normally, since I specified the domain as localhost, I am not supposed to have any cors issue because the specified domain will be whitelisted by Appwrite and will be given full permission to access the project's resources.

I'm yet to find out where the issue is from, probably I need to do a little tweaking on the .env file of my gitpod workspace.

CORS bugged me for a whole night. I'm not one to back out of a challenge let alone a bug but due to my 9-5 job (non-tech), I knew I had to try something else.

Attempt 2: Using Appwrite Web SDK in a Proxy server (API)

The last time I encountered CORS issues when communicating with a remote backend, I had to set up a proxy API that would bypass the CORS mechanism.

This article by William Sayama was very helpful in setting up one.

This was what I did:

Created an express server
Installed Appwrite Web SDK on it. I installed node-appwrite this time since I will be using a server to interact with Appwrite API.
Added the necessary configurations to it
Installed other dependencies like CORS to bypass CORS issues
Created endpoints on the server that my react app can call

This is how the express server works:

It serves as an intermediary between my Appwrite backend and my react frontend
The react frontend sends HTTP requests to the expressJs server, the server sends an equivalent request to Appwrite, Appwrite responds appropriately and the server sends Appwrite's response back to the react app.

Using this method, I was able to create user accounts and I could access all endpoints on the Appwrite rest API.

The challenge with this attempt:

I couldn't implement user authentication using createSession.

How so?

I could access the createSession endpoint which would return the access tokens that I can use to authenticate subsequent user requests to the server but...

I couldn't transfer these tokens received by my express server to my react app so that it can use the tokens in subsequent requests.

Still, with little time on my hands, I had to think of another way to go about this quickly.

Attempt 3: Disabling CORS on Chrome (My temporary Solution)

StackOverflow came to the rescue here. I was able to disable CORS by creating a Chrome shortcut on windows and editing its properties.

See how to do so here

Now I don't need a proxy API and my react app can interact with the Appwrite API.

At the moment, I have no bugs or errors, or warnings. I hope it stays that way.

Now I can focus on implementing Appwrite services in my app.

How I could have avoided the issues altogether

If I had installed docker on my local machine and then installed Appwrite on it, then I wouldn't have CORS issues while developing.

In production, I can install Appwrite on digital ocean. I have seen several articles and tutorials on how to do so. I don't think I'll have any issue with it.

Production in this terms means hosting both my frontend and backend on live servers (or hosting them virtually).

If you've faced any of the above-mentioned challenges and you were able to resolve them do let me know in the comment section.

For now, let me go back to completing the app. It's almost submission time.

I'll be writing one or two more articles in this series.

Do stay tuned!

Dev x Appwrite Hackathon: #2 UI with ReactJs & TailWindCSS

Georgie — Wed, 20 Apr 2022 17:44:31 +0000

Welcome back 👋

If you've checked out part 1 of this series here, you probably must have visited the GitHub repository.

Notice any changes?

I have added the code for a simple UI. Just a welcome page.

See it here below:

How did I do so?

Here's a summary of how I did it

#1 Create a new React Project

See this link here on how to create a new react project.

It's pretty straightforward.

#2 Add Tailwind CSS to your React Project

See this link here for quick steps to add tailwindcss to your app.

By now, when you run npm start, you should see something like this:

Hoping you did it properly and you've got no bugs, let's continue.

#3 Creating files, adding contents

Before you proceed, I hope you know the following:

Create a new folder inside the src folder, call it Components.

If you've built an app with ReactJs before, I'm sure you know ReactJs is all about creating components and reusing them. Hence the need to have a folder where all the components of our app should be.

Inside Components, create two files: Welcome.js and Toggler.js.

The Welcome.js components will hold the UI for the welcome page while Toggler.js handles state logic.

Toggler.js:

import React, {Component} from "react"

class Toggler extends Component {

    state = {
        on: this.props.defaultOnValue
    }

    static defaultProps = {
        defaultOnValue: false
    }

    toggle = () => {
        this.setState(prevState => ({on: !prevState.on}))
    }

    render() {
        return (
            <div>
                {this.props.children({
                    on: this.state.on, 
                    toggle: this.toggle
                })}
            </div>
        )
    }
}

export default Toggler

Toggler.js is a bit advanced ReactJs concept. It is a component that uses render props to pass state to another component.

See info on render props

To explain in simple terms, any component passed into Toggler.js as its child will have access to its on state and toggle method.

Welcome.js:

import React, { useState } from "react"
import Header from "./WelcomeComponents/Header"
import Main from "./WelcomeComponents/Content"
import Footer from "./SubComponents/Footer"

export default function Welcome() {
    /**
     * This welcome component will show for unauthenticated users
     */

    // this show modal state will determine welcome component UI behaviour when the modals in the <Header/> is active
    const [showModal, setShowModal] = useState(false)

    const showModalHandler = () => {
        setShowModal(prevState => !prevState)
    }

    return (
        // Add overflow-hidden to the welcome component UI when modal in <Header/> is active
        <div className={`${showModal ? "overflow-y-hidden h-screen" : " "} app-style`}>
            <Header showModalHandler={showModalHandler}/>
            <Main />
            <Footer />
        </div>
    )
}

In other not to make our Welcome.js too long, I created sub-components for a Header, Main and Footer section of the welcome page.

I placed these in two new folders inside the components directory. See the image below:

You can see the github repo here to properly view the code structure.

#4 How to use Tailwind CSS

Lastly, about Tailwind CSS.

Tailwind CSS gives you the freedom to specify how you want any part of your UI to look using utility classes.

To create mobile-first responsive designs, tailwind gives us 3 utilities: sm:, md:, lg: and xl:

These are prefixes that represent small screens, medium screens, large screens, and extra-large screens.

They are called prefixes because you put them just before other utility classes to specify on what screen that utility class should work e.g md:border means that on medium screens, there should be a border on that element.

In my app, the banner section of the welcome page contains two columns: a text and an image-side by side to each other (scroll up to see screenshot)

To create this, here's my code.

First for the row that will hold the two columns:

<div className="grid grid-col-1 px-16
                lg:grid-cols-12 
                xl:gap-10 xl:my-10 xl:px-24">
</div>

On mobile screens, I specified that the columns appear in a grid, each column should occupy full width grid-col-1 and there should be padding both left and right px-16.

For large screens (desktop), I divided the columns into 12 grid-cols-12. I will have to share the 12 columns between the two contents in the row. I'll give the text 7 columns:

<div className="lg:col-span-7">Welcome to DevSpace Forum</div>

While the image 5 columns:

<img src="..." alt="..." className="lg:col-span-5" />

This means the text will occupy more space than the image

Then on extra-large screens, I specified the gap between the two contents as 10 gap-10, margin-top and bottom as 10 my-10, padding-left and right as 24 px-24.

Okay. Hopefully, you get the gist now but you don't, no worries.

I will be writing a separate article focused on tailwind CSS.

For now, I will be integrating my react app (i.e DevSpace forum) with appwrite (backend).

I'm glad I don't have to write codes for the backend.

Appwrite console has everything I need.

Stay tuned for the next article in this series.

Bye! 👋

Dev x Appwrite Hackathon: #1 Introduction

Georgie — Wed, 20 Apr 2022 15:35:45 +0000

Overview of My Submission

Hi there! After a week-long deliberation, I'm entering the appwrite x dev hackathon.😁

What I'm building

I call the app DevSpace Forum. What's it about?

DevSpace Forum is an online community where you can get your tech-related questions answered via video conferencing (or sessions). You can also talk about the latest technology you're using in live video sessions.

Questions on DevSpace can be in the form of "how to's", "getting started", "introduction", "onboarding experience", etc.

I know what you're thinking. There's youtube! (and many others)

What's the difference?

On DevSpace, you can ask coding-related questions like on StackOverflow only that another user gets to provide an answer to your question in a live session.

That way, you get to ask follow-up questions during the live sessions.

DevSpace is about asking, sharing, networking, and learning.

You can also raise a question or tutorial too and let users in the community join your live sessions.

Finding loopholes in the idea already (or possibly have a contribution) do share.

Thanks 😁

How I will build it

I'll be using the opportunity to learn Tailwind CSS. I've always wanted to use it.

I'll be sharpening my React skills as well.

The inspiration

I've almost completed my React Course on Scrimba and ever since, I keep getting this urge to share my knowledge.

I could create a youtube channel for it but how about an app (a forum or community) that is specifically for learning and sharing (I thought to myself)

Fun fact: You can combine your youtube channel with DevSpace.

During every video session, the tutor (the person answering or sharing ideas) records the session and can upload it on his youtube channel.

S/he will also share the link to the record session so that members of the community could watch it at a later time.

Submission Category:

This submission is under the Web2 Wizards Category

Link to Code

Find the GitHub repository here https://github.com/Mr-Georgie/Dev-Space-Forum

Mr-Georgie / dev-space-forum

DevSpace Forum is an online community where you can get your tech related questions answered via video conferencing. You can also talk about the latest technology you're using in live sessions.

DevSpace Forum ·

DevSpace Forum is an online community where you can get your tech related questions answered via video conferencing. You can also talk about the latest technology you're using in live sessions.

Questions on DevSpace can be in the form of "how to's", "getting started", "introduction", "onboarding experience", etc.

Preview

Description

The DevSpace Forum was made with the following technologies:

React & React-Router (FrontEnd)
TailWind CSS
AppWrite (API, Authentication & Database)

Installation

In the project directory, you can run:

npm start

This will install all the dependencies from the package.json file

Contributing

DevSpace Forum is open sourced so it can be used by others. See the LICENSE file for terms and conditions

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Thanks

License

Apache-2 permissive license

View on GitHub

Additional Resources / Info

This is a series so the next post will be about setting up the user interface

Links

See ya' in the next post 👋

DEV Community: Georgie

I just finished building my Portfolio! Here are 3 key features I added

The Key Features

Pre-Loading Screen

How to create a pre-loader in a ReactJS app:

Explanation:

Transition

Now how can you add page transitions to your app?

Explanation:

Explanation:

Light/Dark Theme

How can you add a switch between light and dark mode in your React App?

How to build a Modal Component with Vite, React Custom Hooks and TailwindCSS

What You'll Learn

What We Will Build

Step 1: Setup

Step 2: Start the server

Step 3: Add TailwindCSS to your project

Step 3: Getting our hands dirty

Explanation

Now let's create a product card that a user can click on.

Step 4: Creating our modal component

Explanation

Now let's add the modal content

Step 5: Adding logic to our modal using Custom Hooks

Explanation

Step 6: View the App

Read More:

Dev x Appwrite Hackathon: #5 Getting Started on DevSpace Forum

DevSpace Forum

Features

Future features

Source Code / Repo

Mr-Georgie / Dev-Space-Forum

DevSpace Forum is an online community where you can get your tech related questions answered via video conferencing. You can also talk about the latest technology you're using in live sessions.

DevSpace Forum ·

Preview

Description

Installation

Contributing

License

Take-aways

Dev x Appwrite Hackathon: #4 Installing Appwrite on Digital Ocean

Step 1: Go to Appwrite Docs

Step 2: Filling out the form

Step 3: Configuration

SMTP Disabled Warning

Step 4: Enable SMTP from Digital Ocean console

Step 5: Rebuild your Appwrite stack

Update on the DevSpace Forum App

Useful resources I used for this article:

See DevSpace Forum Repo here

Mr-Georgie / Dev-Space-Forum

DevSpace Forum is an online community where you can get your tech related questions answered via video conferencing. You can also talk about the latest technology you're using in live sessions.

DevSpace Forum ·

Preview

Description

Installation

Contributing

License

Dev x Appwrite Hackathon: #3 CORS Challenges when using Appwrite on Gitpod

My Appwrite Setup

Attempt 1: Using Appwrite Web SDK directly in my React Frontend.

Attempt 2: Using Appwrite Web SDK in a Proxy server (API)

Attempt 3: Disabling CORS on Chrome (My temporary Solution)

How I could have avoided the issues altogether

Dev x Appwrite Hackathon: #2 UI with ReactJs & TailWindCSS

Here's a summary of how I did it

#1 Create a new React Project

#2 Add Tailwind CSS to your React Project

#3 Creating files, adding contents

#4 How to use Tailwind CSS

Dev x Appwrite Hackathon: #1 Introduction

Overview of My Submission

What I'm building

How I will build it

The inspiration

Submission Category:

Link to Code

Mr-Georgie / dev-space-forum