Skip to content

Latest commit

 

History

History
333 lines (226 loc) · 19.4 KB

README.md

File metadata and controls

333 lines (226 loc) · 19.4 KB

Welcome to Tailwinder 👋

Version Documentation License: MIT Twitter: Moose_Said

Tailwinder Overview

An open source community for tailwind fans - powered by Appwrite

This project was built for Appwrite hackathon on Dev Community

Demo

Appwrite Node SDK API Location

HERE

⚙️ Built With

Used Stack
Appwrite
Appwrite Node SDK
TailwindCSS
VueJS
Vue Router
SwiperJS
AnimateCSS

More Info

Content Table (Tailwinder Structure):
1- Homepage
1-a- Dynamic Profile Picture (Appwrite Feature)
1-b- Dynamic Dark/Bright Theme Toggle (Appwrite Feature)
1-c- Fading Navbar
1-d- Cool Tailwinder Logo view
2- Signup/Signin
2-a- Dynamic User URL (Appwrite Feature)
2-b- User Login/Logout (Appwrite Feature)
3- User Profile
3-a- Dynamic Profile Picture (Appwrite Feature)
3-b- Dynamic User Information (Appwrite Feature)
3-c- User Information Update (Appwrite Feature)
3-d- Dynamic User Contributions (Appwrite Feature)
4- Components
4-a- Dynamic Components Fetching (Appwrite Feature)
4-b- Add New Component (Appwrite Feature)
4-c- Component View (Appwrite Feature)
5- Tailwinder Academy
5-a- Dynamic Resources Fetching (Appwrite Feature)
5-b- Add / View Academy Resources (Appwrite Feature)
6- Tailwinder Community
Development Stack Used
Appwrite Utilization

1- Homepage:

Tailwinder 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:

https://www.youtube.com/watch?v=t3-PSxNbzI8

  • 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:

User Profile Overview

  • 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)

https://www.youtube.com/watch?v=cS86TZGh46I

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)

Tailwinder Contributio

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)

https://www.youtube.com/watch?v=OmuTzSwrvrw

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)

https://www.youtube.com/watch?v=UBrBPC34HUg

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:

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)

Tailwinder Academy Add/View

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:

https://www.youtube.com/watch?v=T_JYcbKMlvo

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.

Appwrite Utilization

Appwrite Utilization SDK
Get File Preview Web SDK
Get User Initials Web SDK
Update Account Preferences Web SDK
Get Account Prefrences Web SDK
Create Account Web SDK
Create Account Session Web SDK
Delete Account Session Web SDK
Get Account Web SDK
List Documents Web SDK
Create Document Web SDK
Get Document Web SDK
Create File Web SDK
Update Account Name Web SDK
Get User Preferences Node SDK
List Users Node SDK
Get User Node SDK
Delete Bucket Node SDK
Create bucket Node SDK
List Files Node SDK
Update Account Email Web SDK
List Collections Node SDK
Delete Document Node SDK

Author

👤 Mostafa Said

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2022 Mostafa Said.
This project is MIT licensed.