{"id":18024877,"url":"https://github.com/sachinkumar579/full-stack-project","last_synced_at":"2026-04-12T06:35:02.764Z","repository":{"id":134598109,"uuid":"485022405","full_name":"sachinkumar579/full-stack-project","owner":"sachinkumar579","description":"Full fledged UI application created using ReactJS library and a backend REST API created using Express.js","archived":false,"fork":false,"pushed_at":"2022-04-24T13:13:34.000Z","size":1846,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-03T03:38:30.455Z","etag":null,"topics":["babel","expressjs","nodejs","react-redux","reactjs","redux","redux-toolkit","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/sachinkumar579.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}},"created_at":"2022-04-24T12:33:40.000Z","updated_at":"2022-04-24T13:05:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"ea91586e-1712-4ed0-be36-d6cc4fda854f","html_url":"https://github.com/sachinkumar579/full-stack-project","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sachinkumar579/full-stack-project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sachinkumar579%2Ffull-stack-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sachinkumar579%2Ffull-stack-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sachinkumar579%2Ffull-stack-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sachinkumar579%2Ffull-stack-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sachinkumar579","download_url":"https://codeload.github.com/sachinkumar579/full-stack-project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sachinkumar579%2Ffull-stack-project/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31706765,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-12T06:22:27.080Z","status":"ssl_error","status_checked_at":"2026-04-12T06:21:52.710Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["babel","expressjs","nodejs","react-redux","reactjs","redux","redux-toolkit","webpack"],"created_at":"2024-10-30T07:13:53.237Z","updated_at":"2026-04-12T06:35:02.724Z","avatar_url":"https://github.com/sachinkumar579.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# full-stack-project\n\nContains 2 folders \u003cbr\u003e\u003cbr\u003e\n\n1. react-webpack-reduxtk-axios \u003cbr\u003e UI created using ReactJS library \u003cbr\u003e Uses Webpack for build \u003cbr\u003e redux , react-redux, reduxjs/toolkit libraries are used for state management \u003cbr\u003e axios library for making HTTP calls \u003cbr\u003e Configuring Webpack and babel https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9 \u003cbr\u003e Setting up the store   \u003cbr\u003e 1. Create store object using configureStore of RTK \u003cbr\u003e 2. Create action object and reducer using createSlice of RTK \u003cbr\u003e 3. Export store and update action in index.js \u003cbr\u003e 4. Call dispatch function of react-redux with JSON payload size in fetchUsers function \u003cbr\u003e 5. Use useSelector hook to get redux stores data . It works as a subscriber \u003cbr\u003e 6. When dispatch function is called it updates the store and DisplayCount component is rerendered with new total count value \u003cbr\u003e\u003cbr\u003e How does it work? When you click 'Display All' or 'Display Few' button axios makes a REST API call and receives a JSON payload. On receiving the payload the handler in then is called where it updates users list and calls dispatch function which will update the store . The update in store will trigger useSelector hook in DisplayCount and it will be rerendered to display the new count of users list \u003cbr\u003e \u003cbr\u003e \n\n2. express-rest-api \u003cbr\u003e REST API created using express.js \u003cbr\u003e\nendpoints - \u003cbr\u003e http://localhost:3003/all/ returns a 1.35 MB JSON payload \u003cbr\u003e http://localhost:3003/few/ returns a 1KB JSON payload \u003cbr\u003e Dummy JSON payload generator https://json-generator.com/# \u003cbr\u003e\u003cbr\u003e\n\n\n![](./assets/Page.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsachinkumar579%2Ffull-stack-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsachinkumar579%2Ffull-stack-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsachinkumar579%2Ffull-stack-project/lists"}