Social Network (React JS)
Website
https://wasabian-social-network.herokuapp.com/
Overview
Social Network - Fullstack project, using React.js, where user can create an account, informations about theirselves, make friends, send message and chat with other users.
Details
Working on this project helped me to consolidate my knowledge about databases queries (using PostgreSQL database), server side routes (using Node JS), middleware as "body parser" or "multer", and I learnt a lot about React JS.
This is a 10 days project, focusing on the basis of a social network : creating an account, adding friend, and creating a chat. I like this project, and I had a pretty good feeling with React JS, that's why I would love to keep working with React JS in the future. I made severals gifs to show you the different steps and parts of this project.
When you get on the website, you can register or sign in. I worked on alert messages popping up when something goes wrong with your registration. You will find some others on the sign in page.
Then you can set your profile, by uploading a profile picture, and writing a bio. I used an Amazon S3 bucket to store all the images online.
After that step, you can search you future friends! I made the MVP about the search feature, but it's working!
This is how the friending features works... This gif is a bit tricky to understand : every time I set a new friendship status, I refresh the pages to see the new status.I invite you to create to account to test it for real !
The "friend" page looks like this. Here you can see that you won't need to refresh the page to see the changes. I cancelled a friend request I made, I accepted an other I received.
I was really proud to work on the next two features : the online page and the chat room. I used the socket.io technology to listen, on the server side, to every connection or disconnection on the website, and to make a reactive and efficient chat room. This is the online page
And this is the chat room : on the left, a mobile screen, on the right, a laptop screen, communicating with two different sessions.
Finally I worked to make this website responsive. For example, I spent lot of time working on the menu, to create a nice user experience.
Another gif showing how responsive is this website.
