{"id":25900574,"url":"https://github.com/altyalty/demo-spa-source-code","last_synced_at":"2026-04-14T02:30:55.986Z","repository":{"id":209170569,"uuid":"361480309","full_name":"AltyAlty/demo-spa-source-code","owner":"AltyAlty","description":"React tutorial project based on the \"React - Путь Самурая\" course from IT-Incubator","archived":false,"fork":false,"pushed_at":"2025-08-05T20:40:56.000Z","size":5671,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-05T22:27:06.845Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://altyalty.github.io/demo-spa-source-code/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AltyAlty.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-04-25T16:29:45.000Z","updated_at":"2025-08-05T21:39:59.000Z","dependencies_parsed_at":"2025-08-05T22:13:43.904Z","dependency_job_id":"99d40557-bc30-4bf4-8cb6-d8145083e2a6","html_url":"https://github.com/AltyAlty/demo-spa-source-code","commit_stats":null,"previous_names":["altyalty/demo-spa-source-code"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AltyAlty/demo-spa-source-code","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AltyAlty%2Fdemo-spa-source-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AltyAlty%2Fdemo-spa-source-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AltyAlty%2Fdemo-spa-source-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AltyAlty%2Fdemo-spa-source-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AltyAlty","download_url":"https://codeload.github.com/AltyAlty/demo-spa-source-code/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AltyAlty%2Fdemo-spa-source-code/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31779942,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-03-03T02:17:42.455Z","updated_at":"2026-04-14T02:30:55.978Z","avatar_url":"https://github.com/AltyAlty.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact Tutorial: Social Network Demo SPA\u003c/h1\u003e\n\nThis is a learning project created to master **`React`** and related technologies. The project is based on the \n\"**`React - Путь Самурая`**\" course from **`IT-Incubator`**. It is a simplified version of a social network, \nbuilt as a **`Single Page Application`** (SPA), where I implemented core features like user authentication, \nprofile management, and post creation. Additionally, I developed a real-time chat feature using **`WebSocket`**.\nI also implemented a paginated user search, allowing users to browse through profiles efficiently.\n\nAt its core, the project leverages **`React`** and **`TypeScript`**, providing a strong foundation for building \nscalable and type-safe components. To handle routing, I used React **`Router DOM`**. For state management, I \nintegrated **`Redux`** alongside **`React Redux`**, utilizing **`Redux Thunk`** for handling asynchronous \nactions and **`Reselect`** for efficient state selection. For forms implementation, I used both **`Redux Form`**\nand **`Formik`**, ensuring solid validation and user-friendly interactions. To handle HTTP requests, I relied \non **`Axios`**, which allowed me to interact with APIs smoothly, and **`querystring`** for encoding URL \nparameters. For generating unique identifiers, I used **`UUID`**, while **`Classnames`** helped me manage \nconditional class names in a clean and readable way. The user interface is built with **`Ant Design`**. I used \n**`Jest`** alongside **`React Test Renderer`** to write unit tests for components and application logic. \nFinally, I deployed the project using **`GitHub Pages`**, making it accessible to anyone who wants to explore \nthe demo.\n\nThroughout the codebase, I have included extensive comments to explain the logic, structure, and purpose of \neach component, function, and module. These comments are designed to make the code more accessible to other \ndevelopers, as well as to serve as a learning resource for myself when revisiting the project in the future.\n\n\u003chr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://altyalty.github.io/demo-spa-source-code/\"\u003e\n    \u003cstrong\u003eLink to the demo\u003c/strong\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003chr\u003e\n\n\u003ch3 align=\"center\" font-size='25px'\u003eTech Stack\u003c/h3\u003e\n\n\u003ctable align=\"center\"\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"121\"\u003e\n        \u003cimg src=\"./readme-images/javascript-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eJavascript\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"121\"\u003e\n        \u003cimg src=\"./readme-images/npm-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eNPM\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"121\"\u003e\n        \u003cimg src=\"./readme-images/typescript-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eTypescript 4.3.5\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"121\"\u003e\n        \u003cimg src=\"./readme-images/node-js-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eNode.js 16.20.2\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"121\"\u003e\n        \u003cimg src=\"./readme-images/react-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eReact 17.0.2\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"121\"\u003e\n        \u003cimg src=\"./readme-images/react-router-dom.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eReact Router DOM 5.2.0\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"./readme-images/redux-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eRedux 4.1.0\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"./readme-images/redux-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eReact Redux 7.2.4\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"./readme-images/redux-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eRedux Thunk 2.3.0\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"./readme-images/redux-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eReselect 4.0.0\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"./readme-images/redux-form-icon.jpg\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eRedux Form\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"./readme-images/formik-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eFormik 2.2.9\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"./readme-images/axios-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eAxios 0.21.1\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"./readme-images/uuid-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eUUID 8.3.2\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"./readme-images/ant-design-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eAnt Design 4.16.9\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"./readme-images/jest-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eJest 5.14.1\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"./readme-images/react-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eReact Test Renderer 17.0.2\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"./readme-images/github-pages-icon.png\" alt=\"icon\" width=\"65\" height=\"65\" /\u003e\n      \u003cbr\u003eGitHub Pages 3.2.3\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003chr\u003e\n\n\u003ch3 align=\"center\" font-size='25px'\u003eScripts\u003c/h3\u003e\n\n\u003ctable align=\"center\"\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"200\"\u003e\n        \u003cb\u003eScript\u003c/b\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"500\"\u003e\n        \u003cb\u003eDescription\u003c/b\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e\n        npm install\n    \u003c/td\u003e\n    \u003ctd\u003e\n        Installs project dependencies \n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e\n        npm start\n    \u003c/td\u003e\n    \u003ctd\u003e\n        Runs application\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e\n        npm test\n    \u003c/td\u003e\n    \u003ctd\u003e\n        Runs unit tests\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e\n        npm run build\n    \u003c/td\u003e\n    \u003ctd\u003e\n        Makes a build for GitHub Pages (read index.js before doing that)\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e\n        gh-pages -d build\n    \u003c/td\u003e\n    \u003ctd\u003e\n        Deploys the build to GitHub Pages\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003chr\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faltyalty%2Fdemo-spa-source-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faltyalty%2Fdemo-spa-source-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faltyalty%2Fdemo-spa-source-code/lists"}