• Explore the Slack app.

• You may follow npm (recommended) or yarn to get started with the project.

• Search for React dev tools and Redux dev tools in Chrome extensions and add them for your own testing purpose.

• Use react developer tools throughout the project to debug your code better. If new to it refer this to understand how to use it. Also check this out!

• Ideally, this is a React app. So start by creating one and keep only the relevant files needed for the project (all major files are shown below).

  

• Install necessary dependency packages (you may refer and use the ones mentioned below) using npm (or yarn).

  

• Create basic (UI) forms(like this for starters) for registering and logging in a user using react (you can use semantic-ui react for faster styling). Give specific endpoints for the two forms.

• To add functionality to it, register users with email and password and authenticate the user into the database by enabling email/password sign-in method in Firebase. Extend this step further by adding google, Facebook and other sign-in methods too.

  

• After registration, make the login page functional, i.e. it should redirect the user to the app page (blank as of now). In case of error in any of the credentials, the appropriate error must be displayed.

• In the process, make sure that the user is added to the database and the form reloads on submission and clear errors upon successful registration/login.

• The following figure is what your realtime database (entries) of your application should look like (with respect to the parameters assigned to each user, channel, message,etc.).

  

• Use a firebase listener to see whether a user is logged in or not and redirect them to the main application page.

• Use redux to make user data available on global state. This will pass the props from parent to grandchild components without having to pass the props through all child components.

• Then start scaffolding the app components as shown in the following image (side panel, messages, metadata panel and user). Scaffolding here refers to creating the skeleton form on which the functionality work is to be done.

• Build the app header and the dropdown of the user panel.

• In the dropdown, add sign-out functionality, avatar (only mentioned now) and make a mention (using redux state via props) of the user details that are signed in currently.

• All the components mentioned in the previous point will have its place in the final app like this-

  

• Don’t get intimidated but rather get excited after looking at the above image. This image is just to give you a familiarity of the terminologies followed.

• Add channels component; create a modal for adding channels and then add them to the database as and when a user creates one. Using modals will enable screen overlay and have better visual appeal.
• Display channels (may use child_added listener) and put it on global state (using reducers is recommended).
• Important step to be done – Set the first channel as default on page load. Users should not see a blank page on reload but instead a default channel.

• Scaffold the message components and form a skeleton UI as desired in the final app.
• Create message collection in your database using custom components and props and add your first message to the database.
• Make sure that the submit button is disabled on sending a message and the message is cleared from the input messaging panel using controlled input.
• Now the message is stored in the database collection. Display them in the messaging panel using componentDidMount lifecycle method.
• Create a file (photo for starters) modal to upload photos. Keep the media file in state, use a validation step to ensure it is a file. You may use MIME type validation to indicate specific file types like .png and .jpg/.jpeg.

• Just like in milestone 4, start by creating a channel for Direct Messages. Add all users to the DM channel (that is convenient for now).
• Keep the data of the DM channel in the global state and set it as private.
• Finally implement the messaging functionality. Point to be noted here is that each set of messages of a private channel should be limited to that channel’s scope only. So, implement the private class to all such relevant areas.

Here are some recommendations you can adopt to make your app even better:

• Users should be able to change their avatars
• Users should be able search messages - Use regex and searching algorithms
• Users should get notified for new messages
• Users should have the option of starring (bookmarking) their favorite/important channel
• There can be a metadata panel which displays the metadata of a specific channel such as the channel’s creator, posters, and description
• Users should have the feature of adding emojis while writing a message
• The app can have some keyboard shortcuts, like pressing one key to send a new message or press a combo-key to type in a new line

• Use firebase tools to build your app. Give appropriate rules to your realtime database and storage, similar to these

  

  

• Then deploy the app on Firebase.

• Finally host it to get your own URL.

Share your unique URL among your peers and proudly mention it in your resume and be one-step ahead of the crowd.