Social Network

Social Network is a large single-page app, built with TypeScript, JavaScript, React, Redux, HTML, CSS3, SASS, Material-UI and Jest for testing.

During the IT-Incubator front-end course I created this app and I could apply my knowledge into practice using a modern approach of codding.

After that course, to make the existing JavaScript code more predictable and reduce the number of mistakes in the next developing process I decided to refactor the existing JavaScript codebase into TypeScript.

Also to make sure that an expected result of executing code is correct, I wrote a few tests using Jest library.

The functionality of the app:
- Cookie-based authentication with controlled forms.
- Personal page with changeable information and user's photo.
- Users page. Subscriptions functionality, pagination, filter by name and sort dependence of subscription were implemented there.
- Chat page. To create it I used the JavaScript library Socket.IO which allows participants to communicate with each other. Besides the messages are displayed names and user photos of participants.
- Weather page allows checking current weather depending on the input city.
- etc.

Finaly the project was deployed on AWS.

Developmet

To make an app easily scalable I've chosen Redux for state management. Initially, I used classes components and life-cycle methods to handle behave components. But then to make components easier to read, test and debug I refactored and changed the code to functional components and React Hooks. To change the browser URL, and keep the UI in sync with the URL I used React Router. For the cases when a server returns code responses 400 and 500, I created a feature that shows a message with a current error. Also before the app is rendered users can see a pre-loader gif, which helps them realize that the app works well and improves the user experience in general. Going through a ton of challenging tasks during development helped me understand dipper an application workflow and patterns which help to reduce mistakes and make code more predictable.

View Live

Social Network

Project design

Developmet