Shack Chat
Scope
What's the best way to stay sharp at your craft? That's right. Practice.
This project served as a personal test of how quickly I could develop the frontend of a realtime online chatroom via Next.js and TailwindCSS for styling, AND an experimental learning experience with building a realtime database via Firebase.
The task, just like any other conceptual development project, was simple on paper;
Create a realtime, discord-like online chat room with Firebase authentication that allows Users to sign-in with standard providers (Google, Facebook, Github), as well as offer new Users the ability to register with an email and password combination.
Goals
1. Design an online chatroom that vaguely resembles Discord and utilizes a mobile-first design flow.
2. Develop the frontend of the application with Next.js and styled with TailwindCSS.
3. Build a Firebase backend with a Firestore database to house a 'messages' collection that stores 'chatMessage' data (uuid, text, timestamp, user data, etc.).
4. Develop login and registration options for new and existing users that incorporates user authentication via email and password with the ability to allow users to login with established providers (Google, Facebook, Github)
5. Utilize react-firebase-hooks to continuously listen for new messages received in the database and render them within the chatroom.
Execution
The project was executed in multiple steps. First, I created a lo-fi mockup of what the UI would look like based on the optimal user flow. These mockups were done in excalidraw and transferred to Figma. No hi-fi mockups were made as the goal of this project was to spend a the afternoon focusing on my development skills.
Secondly, I bootstrapped the project with create-next-app and began development of the app by building out the Login, RegisterUser, Chatroom, and ChatMessage components as they make up the entirety of the frontend of this single-page application.
Third, Firebase was initialized within the project (/firebase/index.js) and user authentication was integrated (/context/userContext.js)
Fourth, /components/Auth.js was built utilizing the useState hook and conditional rendering of the Login & RegisterUser components was completed.
Fifth, the Chatroom.js and ChatMessage.js components were built to fulfill the logic of a messaging app and the interactions between the database, newly submitted ChatMessages, and frontend rendering of ChatMessages from all users.
Finally, the project was pushed to production utilizing the Vercel CLI and can be visited by clicking 'Live Preview' above the Project Scope section.
Results
A realtime Chatroom application that provides a platform for online discorse amongst authenticated users was successfully designed and styled with Figma and TailwindCSS, developed with Next.js and Firebase, and deployed with Vercel.