Hello, Every One I am Korla Goutham, and I have built the Social Network Application as a project in Appwrite Hashnode hackathon. Social Network is a fully responsive containerized social media app. Users can create profiles and can send Friend requests to other users and chat with them if they accept this is real time, users can create posts ,share a post through whatsapp, like and comment to a specific post . User can navigate to other users profile and can search other users . Users receive notifications when they get friend request from other users . Users profile views will be increased if some one view their profile.
Team Details
Project Description
This app allows users to register, with necessary particulars log in with email and password . They can enter to home page only when email is verified successfully.They need to create a profile with an image, name, Email, occupation, Password,City, and LinkedIn ,Twitter Links.
Users can view other users through search bar. Profiles can be searched by name no need to be exact . They can view other users profile, posts and send Freind requests to others . Users can view all the friend requests received in notification page. Receivers get Mail that they recieve friend request from other user.Senders also get Mail when others accept their request .They can accept or reject the request . User can only post Images and with some description. They can share post through whats app and their profile count will be increased when some others view their profile . Users can message only their friends with only text this is real time . Users can switch between dark mode to light mode.Only messages are real time so for any remaining updates they have to refresh the page .I have included loading circle so that they know some thing is happening mean while updates from appwrite are updated to the app.
When ever I make changes and push to github, github actions triggger the CI/CD pipeline and build the docker image and push to docker hub and changes will be reflected to hosted project on netlify.
All routes all private without authentication no one would be able to use social network.
Tech Stack
Appwrite cloud is used for authentication, database, storage, realtime, queries.
React.js , Material UI, light & dark Modes , Redux Toolkit for state management , Email.js for sending Mails.
Docker ,Github Actions.
Challenges I Faced
As a beginner to Appwrite I faced many Issues in the beginning itself while integrating Appwrite with app because I run my app in git hub code spaces there host is not local host and we need to mention host name while creating project in appwrite , through documentation and online videos I solved it.
I know front end with react and I always want to build full stack app like this with Appwrite with just few API calls backed is all set and I need to focus on frontend ,which is really awesome.I faced many issues in messaging, sending friend requests and notifying others in their notification box but with little bit of debugging I solved that.
I faced challenge while updating view count which means when some one view their profile their profile view count has to be updated. This one also with little bit of thinking and debugging I solved it .
I also faced challenge while creating relation among collections .
I actually thought of making this app with micro frontends and serverless but as the submission date is approaching I couldn't able to complete. But in the future I surely make this app serverless.
Public Code Repo
Demo Link
Deployed Link
How I used Appwrite
I have used Appwrite Auth for Authentication , databases for storing users data , storage for storing users photos ,posts , queries for searching effeciently from the database.
I will improve this project so that users can add all types of media while posting and chatting with friends and users can edit , delete the posts that they have posted. Thanks, Appwrite and Hashnode for giving us this amazing opportunity.
With this hackathon I have learned many technologies like redux toolkit , Email.js, Appwrite services and how to improve the react code , how to reuse the same componenents again and again. Till now I only used AWS amplify , Firebase after using Appwrite this is also as good as those cloud services.
Finally Thanks Appwrite for conducting this Hackathon.