Average achiever

Social network for average achievers

A social network for average achievers is a single page application that I built as an assignment in Spiced Academy bootcamp and a part of learning React, React Hooks, Redux and Socket.io.

Table of contents

• What I used?
• What I have?
• Showroom
• What I want?

What I used?

HTML, CSS, Node.js / Express, Bundle.js, PostgreSQL, React, React Hooks, Redux;

Socket.io

Csurf, Cookie Session, Bcrypt

What I have?

All the features:

• Log in / Registration / Log out
• Upload / change avatar
• Create / edit bio
• Find users
  • Show last registered users OR
  • Search bar for users, list updates on each input
• Other user profile
  • Image, name, bio
  • Add Friend / Accept friendship / Pending friendship / Unfriend button depending on the current status
• Friends and wannabes
  • List of friends
    • Text friend button - opens real-time private messages chat
    • Unfriend button - removes from friends list immediately
    • Notification if online
    • Notification if a message has been received from that friend
    • If no friends, link to Find people
    • Thumbnail is a link to other user's profile
  • List of pending friendships
    • Accept friendship button - user immediately moved to Friends list
    • Thumbnail is a link to other user's profile
• Chat - real-time public chat with anyone registered
• Private direct messages - real time chat with a certain user, with friendship already established

Created bonus features (outside general school requirement):

• Delete profile: show all friends in modal, delete profile from database, delete image from S3 bucket, logout, redirect
• Private messages with friends
• Notification about received private messages in header
• Notification about received messages on the profile of the sender in Friends list
• Show if a friend is online

• Added dummy users and dummy events into the database for display purposes

Showroom

Find users

Send and accept friend request

Receiving a private text message

Public chat

Delete profile

Unfriend

What I want?

Next functionalities I want to add:

• Show all private messages on another route
• Mobile responsiveness
• Get notification when friend comes online
• Create a wall on profile page where other users can post
• Show notification when a friend request arrives