Chatter
Chatter is a full-stack Next.js application designed for developers to share knowledge and insights with each other. I built the platform from the ground up, drawing design inspiration from various websites and social media platforms. The project leverages TypeScript for robust typing, Next.js for server-side rendering, Algolia for efficient search capabilities, and Firebase as the backend.
- I implemented a powerful search functionality that allows users to enter a query and instantly receive relevant posts.
- The content creation process features a rich text editor, enabling users to write posts in Markdown, which are then rendered as HTML when viewed.
- For content discovery, I developed personalized feeds based on user interests, feeds based on user follow, and recent feeds.
- I integrated social features like liking and commenting to foster interaction and community building among users.
- I provided users with detailed analytics to track the performance of their posts.
Building Chatter involved a lot of challenging features, but these are the core features that makes the app:
Why The Web Stack
- As a frontend developer, I chose Next.js for this project because of its server-side rendering capabilities, which improve performance and SEO. Another reason was that Next.js is built on top of React, a library I’m very comfortable with. During my research, I found that the packages I needed for this project had excellent support for React, making Next.js the perfect fit. NextJs
- I opted for Tailwind CSS because its pre-built utility classes significantly speed up my development process. With Tailwind, I don’t have to worry about naming conventions or creating custom styles from scratch, allowing me to focus more on building features. Tailwindcss
- For the backend, I chose Firebase due to its fully managed infrastructure. This means I didn’t have to deal with setting up or maintaining servers, which greatly accelerated my development. Its Firestore database and built-in authentication features were also key factors. Firebase
- Finally, I went with Vercel for hosting because of its reliability, speed, and seamless integration with Next.js making deployment fast and easy. Vercel
Challenges & Solutions
Like any project, I faced challenges, but the most notable one was implementing a multi-purpose content creation feature. I needed a single component that could handle three distinct actions: creating new content, editing existing content, and editing drafted content. The challenge was ensuring the component knew which action the user intended and displaying the appropriate buttons for each task.
I overcame this by leveraging props and setting up two types of routes: a standard route and a dynamic route. If the route request included a postId, the component would recognize that the user wanted to edit an existing post and show the relevant buttons for editing. Additionally, in the dynamic route, when a postId was provided, the parent page fetched the post’s status (published or draft) and passed it as a prop to the content creation component. This way, the component could tell if the user was editing a draft post and display the appropriate buttons.
On the other hand, if the route request didn’t include a postId, the component understood that the user was creating a new post, so it presented the corresponding buttons for that action.
Lessons Learned
This was my first full-stack application, and I learned a great deal, both technically and non-technically. One key takeaway was realizing my own resilience, this project challenged me in many ways, but I pushed through. On the technical side, I gained valuable experience working with technologies like Firebase and Redux, and I even implemented a custom pull-to-refresh feature using touch events, which I found really exciting.
Since this was a large-scale project, it also taught me the importance of code organization and managing the overall project flow. I’m grateful for the experience because by the end of the project, I had grown both in my technical skills and as a developer. It left me in a much better position than when I started.
Other Projects
Feel free to reach to me if you are looking for a developer or maybe you just want to connect.
ken.bassey9@gmail.com