Overview of My Submission

I would like to start this by saying that complex backend development is not a pain anymore! As a Laravel developer, I really had no idea that Appwrite could do all these amazing stuff and save hours of coding for me.

When this hackathon was announced, I didn't know what is Appwrite or how to use it. After reading the DOCs and asking many questions in the Help Thread , Twitter and anywhere I could find information, It became clear to me that I can make something unique using this magnificent technology.

I didn't want to recreate something that already exists or to make a clone of anything. What I really wanted to do is to think of a complex structured website that solves an issue or adding value to the community. And one the things I love the most since I started coding is TailwindCSS for my CSS work. It makes our lives much easier and it's pretty simple even for backend developers. So I thought why not creating a COMPLETE community for Tailwind users where they can create, share, learn, comment and update. Using appwrite's Web SDK and Node SDK, that became possible.

From that 👆 I created Tailwinder 🚀 :

At first, I just thought of creating TailwindCSS online tools. But after awhile of discovering Appwrite, I figured that it can be much more than what I have ever had in mind for this project. It has dynamic URLs, pictures, buttons and dynamic everything! 😍

Tailwinder is an open source community for creative Tailwind lovers. It has everything you need to get inspired or to inspire others by adding your own content.

Let's have a look at Tailwinder features and how I utilized Appwrite to create the perfect backend of the community.

If you are interested more to watch a quick demo video of the project, I have what you need 👉Right here👈 I tried to make it as quick as I could but the project has so many details.

1- Homepage:

• Dynamic Profile Picture (Appwrite Feature)

The profile picture in the Navbar is dynamic, Appwrite fetches the picture for this specific user and display it in the Navbar across the website.
It also detects if the user doesn't have a profile picture and display an Avatar with the first letter of the user's first and last name. We will see that in action when we get to Userprofiles section.

Utilized from Appwrite:
Get File Preview Web SDK.
Get User Initials Web SDK.

• Dynamic Dark/Bright Theme Toggle (Appwrite Feature)

The dark/bright theme toggle isn't just changing the theme in general, It registers the the user's choice to the user preferences with Appwrite to automatically change the theme when this specific user is logged in 🌞🌙.

Utilized from Appwrite:
Update Account Preferences Web SDK.
Get Account Prefrences Web SDK.

• Fading Navbar

The Navbar fades out while scrolling down but appears again on scroll up. It includes the logo, important links and user dropdown.

• Cool Tailwinder Logo view

This is an opensource component by Claire Larsen created in October 21, 2015 and the codepen is available. I have added few adjustments to make it a VueJS component and change few things to fit the theme.

2- Signup/Signin:

• Dynamic User URL (Appwrite Feature)

The user is able to insert username which will be used to create a dynamic unique URL for this specific user. The code catches the username and saves it as a user preference and then fetches the username for the URL.

• User Login/Logout (Appwrite Feature)

Simple auth to login and logout the user using appwrite.

Utilized from Appwrite:
Create Account Web SDK.
Create Account Session Web SDK.
Update Account Preferences Web SDK.
Get Account Web SDK.
Delete Account Session Web SDK.

3- User Profile:

• Dynamic Profile Picture (Appwrite Feature)

The user profile again, is dynamic. Fetched by Appwrite for this specific user same as the profile picture in the user dropdown Navbar. It detects if the user didn't add a picture then it adds an Avatar instead.

Utilized from Appwrite:
Get File Preview Web SDK.
Get User Initials Web SDK.
Update Account Preferences Web SDK.

• Dynamic User Information (Appwrite Feature)

As you can see, every user has the ability to update their info and it's being displayed in their profile with Appwrite Node-SDK. Of course I could come up for a better design for the way it's displayed but I think that's okay.

Utilized from Appwrite:
Get User Preferences Node SDK.

• User Information Update (Appwrite Feature)

In the above video, you can notice that I'm changing the user's profile picture, name, email and preferences.

The code checks if the user already has a profile picture, if not it displays an avatar.

The User can:

• update a new profile picture, the code checks if there is already one, if yes then Appwrite deletes the previous bucket that contains the profile picture, create new bucket, create new file and display it. If the user didn't add a profile picture, it just updates it for the user.
• The can update their name.
• The user can update email, if the user made any changes in the email input, a new input for password will be displayed. -The user can update prefrences.

This is being done with Appwrite Node-SDK as it displays the already existing information and allows the user to update them.

Utilized from Appwrite:
List Users Node SDK.
Get User Node SDK.
Delete Bucket Node SDK.
Create bucket Node SDK.
Create File Web SDK.
List Files Node SDK.
Get File Preview Web SDK.
Get User Initials Web SDK.
Update Account Name Web SDK.
Update Account Email Web SDK.
Update Account Preferences Web SDK.
Get User Preferences Node SDK.

• Dynamic User Contributions (Appwrite Feature)

The above GIF demonstrates how Appwrite can fetch the user's contributions and categories and display them with dynamic URL that leads to the actual contribution. The code gets all collections and files and loop over them filtering only the ones created by the user and provides a dynamic URL.

Utilized from Appwrite:
List Collections Node SDK.
List Documents Web SDK.

4- Components:

• Dynamic Components Fetching (Appwrite Feature)

As you can see in the above GIF, appwrite is dynamically fetching all submitted components by users, and every component has a unique identified URL and every user has a unique URL as explained before. Also component thumbnails are being fetched from their buckets and displayed to the user.

Components category are being identified and displayed as well dynamically with appwrite.

Components submitters user's profile picture is being dynamically fetched as well.

Utilized from Appwrite:
List Collections Node SDK.
List Documents Web SDK.
List Files Node SDK.
Get File Preview Web SDK.
Get User Initials Web SDK.
Get File Preview Web SDK.

• Add New Component (Appwrite Feature)

The user is able to add new components to the community. Every component has category, sample pictures, name, description and component code.

The code is catching the component name and transform it into a slug to be used as a dynamic URL for the component.

Appwrite creates new bucket and then add the pictures to this specific bucket with ID same as the component slug.

Then appwrite creates new document with collection name, id, name of component, name of user, id of user, component code and description.

The code automatically and dynamically redirects the user to the submitted component and shows a flash message of success.

Utilized from Appwrite:
Create bucket Node SDK.
Create File Web SDK.
Create Document Web SDK.

• Component View (Appwrite Feature)

As explained above, I have created a unique slug for the component URL along with the users as well. Appwrite fetches the component details and dynamically inject them in the URL. Vue Router is being used for this piece of action.

I also used Swiper JS with Appwrite to display the component sample pictures.

The user is able to view the component sample pictures, name, description, component submitter's details and also is able to copy the code and test it in TailwindCSS Playground.

Comments are available on the table too, and will be displayed to all users who visits this specific component. The user who created the comment is able to delete the component as well.

Utilized from Appwrite:
Get Document Web SDK.
Get User Preferences Node SDK.
List Documents Web SDK.
List Files Node SDK.
Delete Document Node SDK.
Get User Initials Web SDK.

5- Tailwinder Academy:

• Dynamic Resources Fetching (Appwrite Feature)

This section is my favorite. It's where users are able to share learning resources with the community. My code uses almost the same structure as Components ,So there is no point of repeating the same here again.

• Add New Resources to The Academy (Appwrite Feature)
• View Resources(Appwrite Feature)

Combining Youtube API with Appwrite turned out to be super fun! The user is able to add new learning resources and others can view them, leave a comment and learn something new. The structure is almost the same so there is no need to repeat it here.

6- Tailwinder Community:

This can be considered as a blog for Tailwinders. The user is able to view posts submitted by others or add his own.

The design structure is the same but I added Deepgram touch to it by allowing the user to write articles with their voice.

Submission Category:

Web2 Wizards

Link to Code

Additional Resources / Info

Demo Video:

I hope I didn't miss anything here 😅 I'm really proud of this one and every effort was put to learn Appwrite was absolutely worth it ❤️ Thank you for checking this out and please let me know what you think.