ShareHive is a social networking web application that empowers users to connect, share, and engage with each other. The platform allows users to register, log in, and create various types of posts, including text, video, and image posts. With its smooth single-page functionalities, ShareHive offers a seamless user experience. The application is designed to be highly responsive, and it includes a customizable dark and light mode feature. Coming from a background in Firebase and full-stack development, I was passionate about exploring open-source contributions and discovering alternative solutions. Appwrite caught my attention as a promising Firebase alternative, and I embarked on building something great with this powerful platform. Through this project, I aimed to gain hands-on experience, identify potential challenges, and actively contribute to the Appwrite community.
React (JavaScript)
Context API and useReducer hooks for global state management
Styled Components for styling
Appwrite played a vital role in the development of ShareHive, providing a robust backend architecture that allowed me to focus on the front end and user interface. Leveraging Appwrite's powerful features, I could seamlessly implement functionalities such as image upload, authentication management, and database management without worrying about the complexities of setting up and maintaining my backend infrastructure. Appwrite's documentation and easy-to-use APIs enabled me to integrate these features smoothly into my application, saving me significant development time and effort.
During the development process, I encountered a couple of challenges that I had to overcome. One notable challenge was Appwrite's current limitation in handling complex queries like JOINS. As a result, displaying posts associated with a specific user on the home page became a challenge. To address this limitation, I developed a JavaScript function that retrieved the users' data and posts' data separately, and then merged them using JavaScript's powerful array methods like .map and .reduce. While it presented an interesting problem to solve, I am enthusiastic about contributing to the open-source project and collaborating with the Appwrite community to address this limitation and improve the querying capabilities.
const fetch_posts = async () => {
try {
// Fetch posts
const postsResponse = await databases.listDocuments(
process.env.REACT_APP_APPWRITE_DATABASE_ID,
process.env.REACT_APP_POST_COLLECTION_ID,
[Query.orderDesc("$createdAt")]
);
// Fetch users
const usersResponse = await databases.listDocuments(
process.env.REACT_APP_APPWRITE_DATABASE_ID,
process.env.REACT_APP_PROFILE_COLLECTION_ID
);
console.log(usersResponse);
//Merge and group the posts and users
const mergePostsAndUsers = (posts, users) => {
return posts.documents.map((post) => {
const user = users.documents.find(
(user) => user.userID === post.userID
);
return { ...post, post_id: post.$id, ...user };
});
};
const mergedData = mergePostsAndUsers(postsResponse, usersResponse);
console.log(mergedData);
post_dispatch({ type: "FETCH_POSTS", payload: mergedData });
} catch (error) {
console.error("Error fetching posts and users", error);
}
};Another challenge I faced was ensuring a smooth user experience when redirecting users based on their authentication status (logged in or logged out). The process of determining the user's authentication status using the account.get() method introduced a slight delay in the redirection process. To address this, I implemented a clever workaround by adding a component that displayed a launcher or a blank page with the logo during the initial app launch. This provided users with visual feedback while the authentication status was being determined, improving the overall user experience and reducing confusion.