Skip to content
This repository has been archived by the owner on Aug 17, 2020. It is now read-only.

Mock social network project for superheros and villans built as a single page application with React, Redux and Socket.Io.

Notifications You must be signed in to change notification settings

suddenlyGiovanni/spiced_academy--socialnetwork

Repository files navigation

Social Network

Mock social network for superheroes and villains.

Table of contents

Context

Between July and October 2017, I attend SPICED Academy, an intensive 12-week coding program focused on Full Stack JavaScript Web Development in Berlin. During this program, I built a portfolio of web applications.

  1. Reichstag - a static landing page
  2. Kitty Carousel - a carousel/slideshow element that displays kitties picture
  3. Resizable Panes - an element to display before and after photos
  4. Incremental Search - search field that allows users to select matching results
  5. Connect Four - the vertical checkers game
  6. Spotify API Search
  7. Github API Search
  8. Ticker Twitter API - a sliding twitter news feed element
  9. Petition - A server-side render app for collecting signatures for a pledge.
  10. Imageboard - An app that allows users to upload images, comment, and like images.
  11. Social Network - Mock social network project for superheroes and villains.
  12. Final Project - one-week coding challenge - P2P Chat

Social Network was my last big full stack project before the graduation coding challenge. This project taught me how to build single page applications with React, Redux and Socket.Io.

Time frame: Three weeks
New Technologies:
  • React.js
  • Redux
  • Socket.io

Tech Stack:

Frontend Backend Database
React.js Node.js PostgreSQL
Redux.js Express.js AWS S3
Socket.io - client Socket.io - server

Installation

$ git clone https://github.com/suddenlyGiovanni/socialnetwork.git
$ cd socialnetwork
$ npm install
$ cd config && touch secrets.json
Secret.json

Paste in the following code and remember to configure it accordingly...

{
    "psqlConfig": "postgres:postgres:postgres@localhost:5432/socialnetwork",
    "sessionSecret": "this is a secret!!",
    "bcryptSalt": "this is a secret!!",
    "AWS_KEY": "XXXXXXX",
    "AWS_SECRET": "XXXXXXX/XXXXXXX/",
    "AWS_BUCKET": "socialnetwork",
    "s3Url": "https://s3.amazonaws.com/XXXXXXX/"
}
Map of client-side compoinents:

social_network_structure

Features:

As a user, I can register and login. If I am already login, I can skip this step.

The user can create or submit its credentials: Passwords are hashed using the bcrypt library. Forms include CSRF protection using the csurf npm package. social_network-register social_network-login

As a user, I can personalize my page by adding a bio and profile picture. I can also update this information whenever I want.

social_network-profile_pic social_network-profile_edit

As a user, I can see who is online now.

social_network-online_users

As a user, I can see a list of all of my friends. I can also manage friendship status: I can send a friendship request, I can cancel ann erroneous friendship request, I can accept friends requests, I can terminate friendships

social_network-friend_list

As a user, I can use the group chat feature to chat with everyone that is online.

social_network-public_chat

As a user, I can use the private chat to talk to other friends that can be either online or offline.

Todos of additional features:

  • User Search:

This should be implemented as an incremental search field. Input events should result in ajax requests and the route hit should do database queries with pattern matching to find matches. Note that if the users gives more input before the previous request is complete, you should probably abort it. You probably also should come up with a way to throttle the requests to avoid overloading your server if you have fast typers. It would be real nice if the results did not just show matching users' names but their profile pics as well.

  • Private Messages:

Use Socket.io - server to allow users to conduct private, one-on-one chats with other users who are their friends (but disallow private chats between two users who are not friends).

  • Wall Posts:

Allow users to add textual messages to their own and their friends' profile screens. These should be shown in reverse chronological order and should only be visible to friends of the user whose profile the post appears on. Posts should show the author of the post, the time and date it was created, and the text. You can take this even further by allowing users to post images or links. For link posts you could crawl the submitted url to find the page's title and an image to display. Yet another enhancement would be to allow friends to comment on posts.

  • Friend Request Notifications:

Use socket.io to alert users when they receive a friend request if the request occurs while they are using the site. You could modify the Friends link in your navigation to show in parentheses the number of open requests and increment this number every time a friend request happens. Alternatively, you could make some sort of pop up message appear.

  • Friends on Profile Pages:

When users view the profile page of a user with whom they are friends, show them a selection of other users that are also friends with the user whose profile is being viewed.

  • Extend the use of Redux to all the application:

If you do this, you'll have to create a whole bunch of new actions, and your reducer will get a lot bigger. It would be a good time to try splitting up your reducer logic.

Contact


MIT © suddenlyGiovanni Free Software, Hell Yeah!

About

Mock social network project for superheros and villans built as a single page application with React, Redux and Socket.Io.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published