CASE STUDY
Slack App Clone
Role:
Sole developer & designer.
Tech Stack:
JavaScript, React, Tailwind CSS, Vite, Vitest, Axios, REST API, Avion School API, Local Storage, Git, GitHub, React Router
Project Overview & Goal:
This web app, built for Avion School, challenged me to reverse-engineer Slack’s desktop interface with pixel-perfect design and smooth animations. The goal was to create a responsive and accessible chat platform that demonstrates real-time messaging and user interaction using Avion’s API.
Development Process:
I designed and developed the frontend from scratch using React and Tailwind CSS. The backend integration utilized Avion’s API to manage data and user sessions.
Challenges:
My main challenge with the Slack App was the limited functionality of the Avion API. For example, I wanted to display detailed channel information such as the members' names or emails. However, the API only returned user IDs when I fetched the channel details.
Solution:
By carefully studying the Avion API documentation, I found a workaround. I fetched the complete list of users from the API, which included additional information like user IDs and email addresses. Then, I matched each member ID from the channel details with the corresponding user data using .find() after mapping through the channel members. This not only solved the limitation but also improved the user experience by providing clearer, more human-readable information in the UI.
Outcome:
The project successfully demonstrates my ability to build complex UIs and effectively integrate with third-party APIs under constraints, showcasing my frontend development and API integration skills.
Contributions:
Reverse-engineered Slack’s desktop UI, built all React components, styled with Tailwind, and integrated Avion’s API (auth, channels, messages) using Axios and React Router.
Learnings:
This experience enhanced my knowledge of React, Tailwind CSS, API integration, and working within platform limitations.
Completed:
May 2025