Mock social network for superheroes and villains.
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.
- React.js
- Redux
- Socket.io
| Frontend | Backend | Database |
|---|---|---|
| React.js | Node.js | PostgreSQL |
| Redux.js | Express.js | AWS S3 |
| Socket.io - client | Socket.io - server |
$ git clone https://github.com/suddenlyGiovanni/socialnetwork.git
$ cd socialnetwork
$ npm install
$ cd config && touch secrets.jsonPaste 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/"
}
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.
- 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.
- e-mail: ravalico.giovanni@gmail.com
- Twitter: @superspacezova
- LinkdeIn: /giovanni-ravalico License
MIT © suddenlyGiovanni Free Software, Hell Yeah!