https://github.com/altyalty/demo-spa-source-code

React tutorial project based on the "React - Путь Самурая" course from IT-Incubator
https://github.com/altyalty/demo-spa-source-code

ant-design axios formik github-pages javascript jest nodejs npm react react-redux react-router-dom react-test-renderer redux redux-form redux-thunk reselect spa typescript uuid

Last synced: about 2 months ago
JSON representation

React tutorial project based on the "React - Путь Самурая" course from IT-Incubator

Host: GitHub
URL: https://github.com/altyalty/demo-spa-source-code
Owner: AltyAlty
Created: 2021-04-25T16:29:45.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2025-08-05T20:40:56.000Z (10 months ago)
Last Synced: 2025-08-05T22:27:06.845Z (10 months ago)
Topics: ant-design, axios, formik, github-pages, javascript, jest, nodejs, npm, react, react-redux, react-router-dom, react-test-renderer, redux, redux-form, redux-thunk, reselect, spa, typescript, uuid
Language: TypeScript
Homepage: https://altyalty.github.io/demo-spa-source-code/
Size: 5.41 MB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

React Tutorial: Social Network Demo SPA

This is a learning project created to master **`React`** and related technologies. The project is based on the
"**`React - Путь Самурая`**" course from **`IT-Incubator`**. It is a simplified version of a social network,
built as a **`Single Page Application`** (SPA), where I implemented core features like user authentication,
profile management, and post creation. Additionally, I developed a real-time chat feature using **`WebSocket`**.
I also implemented a paginated user search, allowing users to browse through profiles efficiently.

At its core, the project leverages **`React`** and **`TypeScript`**, providing a strong foundation for building
scalable and type-safe components. To handle routing, I used React **`Router DOM`**. For state management, I
integrated **`Redux`** alongside **`React Redux`**, utilizing **`Redux Thunk`** for handling asynchronous
actions and **`Reselect`** for efficient state selection. For forms implementation, I used both **`Redux Form`**
and **`Formik`**, ensuring solid validation and user-friendly interactions. To handle HTTP requests, I relied
on **`Axios`**, which allowed me to interact with APIs smoothly, and **`querystring`** for encoding URL
parameters. For generating unique identifiers, I used **`UUID`**, while **`Classnames`** helped me manage
conditional class names in a clean and readable way. The user interface is built with **`Ant Design`**. I used
**`Jest`** alongside **`React Test Renderer`** to write unit tests for components and application logic.
Finally, I deployed the project using **`GitHub Pages`**, making it accessible to anyone who wants to explore
the demo.

Throughout the codebase, I have included extensive comments to explain the logic, structure, and purpose of
each component, function, and module. These comments are designed to make the code more accessible to other
developers, as well as to serve as a learning resource for myself when revisiting the project in the future.

Link to the demo