Zuno: A Social Media Site
Zuno is a social media platform that allows users to create profiles, post content, and engage in discussions through comments. It features OAuth for secure authentication, a user-friendly interface inspired by X.com, and supports infinite nested comments for deep conversations. The platform is designed to foster community interaction and provide a space for sharing ideas.
Intent of the Website
This project strips down the opinionated approach of most social media websites and puts the power back in the hands of users. No algorithms or focus on going viral. Users see the conversations of the people they want to listen to as they unfold. The focus is on live discussion and interaction, so likes or followers are used as a tool for communicating with others, not as a way to gain popularity. The design is heavily inspired by X.com and is not meant as a product but rather a showcase of my skills in building a social media platform with a deployed front-end, back-end, and database.
Technical Overview
Social media platforms are complex systems that require careful consideration of user experience, security, and scalability. This tech stack provides a solid foundation that is modern and fast. The use of Next.js allows for server-side rendering, improving performance and SEO. The integration of OAuth provides a secure authentication method, while the use of Postgres ensures reliable data storage and retrieval. The infinite nested comments feature uses comment database models that follow a tree-like structure. Each comment has a reference to its parent comment, post, and next level of child comments, so a comment thread can be followed like a doubly linked list, seeing only the nodes in front of and behind the current comment. The comment structure allows for deep conversations without overwhelming the user interface.
.png&w=828&q=75)
Challenges Faced
There were several challenges in building Zuno, including implementing the infinite nested comments feature and caching and updating post and comment data for instant UI changes without refreshing the page. The infinite nested comments required careful database design to ensure that comments could be easily retrieved and displayed without overwhelming the user interface. The solution involved creating a comment model that references its parent comment, allowing for a tree-like structure that can be easily traversed similarly to a doubly linked list. Representing nested comments uses a main thread line and grid layout. The consistent left sizing of the grid layout allowed for an anchored absolute positioned cover over sections that had no more siblings. Caching and updating post and comment data was also a challenge, as it required careful consideration of how to keep the UI responsive while ensuring that data was always up-to-date. The solution involved using stale-while-revalidate (SWR) caching to ensure that the UI remained responsive while still providing accurate data.
Other Projects
Artist Portfolio
An updated portfolio website for an artist to feature their work. Built with a Strapi CMS for managing content and a simple design based on their old website. Page speed is a full 6s faster than the previous site.
Finding Fiasco
A Where's Waldo-style game where players find characters in a large, detailed image. The game features a timer, score tracking, and a variety of characters to find.
Want to Collaborate?
I'm always interested in new opportunities and collaborations. Check me out at one of the links below, or drop me a message and let's discuss how we can work together!