DESCRIPTION
A social network platform using React/Redux, Express-Server & PostgresSQL.
FEATURES
- Authentication: User registration, login, and password reset functionality are available to ensure secure access to the app.
- User Profile: Users can customize their profile with bio and profile picture updates to reflect their personal preferences and interests.
- Friend Search: Users can search for other users and send friend requests to connect with people they know or share similar interests.
- Friend Requests: Users can manage their friend requests by accepting or rejecting incoming requests, as well as sending friend requests to others.
- Friend List: Users can view their current friends, as well as any outstanding friend requests they have sent or received. This helps users keep track of their social connections and expand their network as desired.
CHALLENGES
Learning React: As a first-time React user, I faced a steep learning curve and had to adapt to a completely different style of programming compared to my previous experience with Vue. At first, I found the use of class components quite cumbersome, with numerous instances of '.this' making the code less readable. Eventually, I was able to refactor all components to function components, which greatly improved readability and practicality.
Props Drilling: One of the challenges I faced in building the app was passing functions and properties deep within the component hierarchy, which can make it difficult to keep track of everything. Initially, I attempted to avoid this by fetching all user data from the database and passing it from the top-level 'App' component. However, I soon realized that this approach wasn't scalable or practical. Fortunately, I was able to leverage Redux to manage global state and avoid excessive props drilling.
Redux: While Redux provided an effective solution to the problem of props drilling, it was also the most time-consuming and challenging aspect of the project. Setting up Redux and getting the hang of its global state management system took a lot of effort, but the payoff was worth it. With Redux, I was able to implement a single source of truth for my app's state, which greatly simplified data management and made my code more maintainable. Moreover, Redux-Toolkit provided some useful browser DevTools and graphical representations of state that were quite helpful.
GALLERY
