An open source community for tailwind fans - powered by Appwrite
This project was built for Appwrite hackathon on Dev Community
✨ Demo
| Used Stack |
|---|
| Appwrite |
| Appwrite Node SDK |
| TailwindCSS |
| VueJS |
| Vue Router |
| SwiperJS |
| AnimateCSS |
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.
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.
The Navbar fades out while scrolling down but appears again on scroll up. It includes the logo, important links and user dropdown.
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.
https://www.youtube.com/watch?v=t3-PSxNbzI8
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 | 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 |
👤 Mostafa Said
- Website: https://linktr.ee/moosesaid
- Twitter: @Moose_Said
- Github: @MooseSaeed
- LinkedIn: @moosesaid
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ⭐️ if this project helped you!
Copyright © 2022 Mostafa Said.
This project is MIT licensed.