Project Details
- Title: Chat app
- Tools: React, Node.js, Express.js, Multer, Sharp, MYSQL
- Team: Myself; Nicholas Olsen
- Purpose: Conceptual CRUD Project
Features
- Real-Time Messages: Instant messaging enabled using WebSockets (Socket.io) which is toggleable to turn on and off.
- Authentication: Secures user credentials using industry-standard hashing.
- Account Management: Create, manage and delete profiles created by the user which provides access to a contacts list, profile data including profile pictures.
- Data Persistence: All profile, and message data stored in relational database to save data, allowing users to edit profile data including profile picture.
- Responsive Design: Functional design across several device sizes using bootstrap5 and css.
Architecture
Architected with a classic Client-Server-Database structure
Frontend (React)
This app is built as a Single Page Application (SPA) using the React JavaScript library written in JSX.
- State Management: Utilizes React Hooks such as useState and useEffect to do asynchronous fetch requests and update data without reloading page.
- Networking: Asynchronous fetch requests utilizing the useEffect hook and global variables to update chat data without reloading page.
- Storage: Utilizes internal browser databases to store chat data to lighten the load of the database and only refresh new messages.
- Styling: Implemented with CSS modules and Bootstrap5 classes for a clean and responsive UI.
Backend (Node.js & Express.js)
This app utilizes a simple backend library express.js to deliver the api for data transfer and real-time events.
- REST API: Handles authentication, profile management, and refreshing data.
- Socket.io: Manages active web socket connections and broadcasts signals to users when a message is read or sent. If sent then that user is contacted and instructed to force a refresh of state.
- Middleware: Implements CORS for security, multer for file processing, and sharp for resizing photo size.
Database (MYSQL)
Relational database used to store and query all user data including profiles, messages, and contacts.
- Users: Stores hashed credentials for users and display names.
- Profile: Stores profile data linked to user by id.
- Profile Pictures: Stores all profile pictures that a user may have uploaded. Returns a standard template if none exist.
- Messages: Stores all messages linked with a from and to id linked to each user.
Challenges
Throughout development as simple features grew into more complex ones several problems occurred such as:
- Pictures: Implementing photos both in profile pictures and sending photos required several tweaks to how data was stored in the database and parsed back into photos by the frontend
- Socket.io: Implementing the sockets to send live data was quite the challenge. Learning how the sockets were triggered and what state functions should hold their functions to allow updating of the state. To maintain state integrity without a full architectural refactor, I implemented Socket.io as a signaling layer. The sockets act as triggers that notify the client to perform an asynchronous fetch for the latest data, ensuring the UI stays synchronized with the database.
- Data Consistency: Ensuring all messages are returned and retrieved with correct timestamps was another challenge. I chose to use the database to determine timestamps and order of messages, new messages from either party would only appear in the frontend once the database validated and inserted the records and sent them back.
