Slack App

Purpose and Goals

I built this as a capstone project for the front end development course at Avion School. This project is important to me because it gave me an opportunity to move through every step of the front end development process, exhausting everything I knew with the user in mind. I wanted to make sure that I was using my new skills in React to make the app experience as seamless as the original Slack application. Through this project, I practiced React techniques like useState, useEffect, Custom Hooks, and Context API. For styling and ease of use, I utilized styled-components. These were the expected outcomes of this project:

• User is able to create his/her account with email and password
• User is able to login his/her credentials
• User is able to create new channel
• User is able to add users on a channel
• User is able to send message to other user (Direct message)
• User is able to send message to a channel
• User is able to receive message from other user (Direct message)
• User is able to receive message from his/her channels

Spotlight

Like most projects, I ran into some problems creating this application. The app allows users to create their own accounts and allows them to login to their account afterwards. This took the most time for me to create because there were a lot of requirements on the API side. I also wanted the site to be secure so I also created private routes with React Router for user authentication. Another problem I had creating this application was that I couldn’t make the app exactly like Slack because of the limitations of the API we were using. However, the core functionalities are still present. One of the limitations we had was the lack of a database. Since we didn’t have a database to store users, I utilized Context API and localStorage to persist user data, like to set user details to communicate with the REST API and storing the other user that the users contacted through direct messaging