Social Network

Mock social network for superheroes and villains.

Context
Tech Stack
Installation
Features
Todos
Contact && License

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.

Reichstag - a static landing page
Kitty Carousel - a carousel/slideshow element that displays kitties picture
Resizable Panes - an element to display before and after photos
Incremental Search - search field that allows users to select matching results
Connect Four - the vertical checkers game
Spotify API Search
Github API Search
Ticker Twitter API - a sliding twitter news feed element
Petition - A server-side render app for collecting signatures for a pledge.
Imageboard - An app that allows users to upload images, comment, and like images.
Social Network - Mock social network project for superheroes and villains.
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:

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.

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

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

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

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

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.

Raulif/socialnetwork