Sluck is a Python and React project meant to emulate core functionality of the popular messaging app, Slack.
The application is hosted on Render.com and can be accessed by clicking the Live Site Badge above
pip install -r requirements.txt
pip install psycopg2
flask db upgrade
flask seed all
npm install --prefix react-app
npm run build --prefix react-app
After a successful build the application can then be ran using gunicorn
gunicorn --worker-class eventlet -w 1 --bind 0.0.0.0:5000 app:app
To remove all messages, channels, dms and reset back to initial DB state run:
flask seed undo
- Live chat
- Rich Text including Underline, Italics, Bold, and Lists
- User and Message Search
- User status updates
- Dynamic message loading
- Channel Browser
- Direct Messages
The database is has a simple design putting all types of communication (Channels, DMs, Group DMs) into a single table 'Rooms', that relates to a constants table called 'Types' to determine what kind of room it is. This design allows for quickly adding and removing types for further changes and features.
Coming into this project I had experience with Socket-IO, but not with integrating it along-side React, Flask and Python. This project gave me a lot of confidence that I can learn new technologies and combine them as I learn. I also was forced to learn a lot of new design patterns that I will absolutely be taking with me for future projects.
- Rich Text Editor
Using Facebook's DraftJS framework was challenging at first but incredibly rewarding. DraftJS provides a state-driven input editor that is incredibly powerful and extensible. Custom additions to the editor like @user-mentions can be added using the entity and decorator system provided by DraftJS- allowing you to insert custom HTML or full react components into the editor when the user types a certain phrase or interacts with buttons. This allowed me to open a modal when the user types "@" that contains a list of user's in the room, and insert a 'user-mention' entity inside the editor once the user clicks or presses TAB. This particular function
confirmMentiongrabs the content state, adds the mention entity to the end, and modifies the editor state to include the new content state
Properly managing editor state was a challenge, but resulted in a very customizable editor for user messages, that was easy to drop into and use elsewhere, like for allowing editing.
edited.webm
- Controlling Windows With Redux
A challenge I had faced in the past with applications has been keeping multiple pop-up windows and modals organized and 'always-on-top' even when embedded deep within layers of divs. Using redux, I took a new approach to managing these by simply setting the state of all the modals into a redux slice, and drawing them after the rest of the application while keeping each window in it's own separate React Component.
This allowed me for the first time to not worry about z-index or layers or breaking the design with whatever window I wanted to show. It also gave me a central place of logic to close all open windows.
The initial state and the toggle functions of the modal slice can be seen here:
Along with a simple way to handle when to draw them shown here. This is just added after the rest of the MainWindow component to ensure it is always on top:
I'm very happy with this solution and it allowed me to have many windows and states managed quickly and easily, as seen here:
