{"id":19399548,"url":"https://github.com/5hraddha/around-react","last_synced_at":"2026-04-08T18:01:43.908Z","repository":{"id":107170658,"uuid":"424960935","full_name":"5hraddha/around-react","owner":"5hraddha","description":"Around The U.S. - a responsive website made in ReactJS where a user can have a collection of the pictures of his journey around the US. ","archived":false,"fork":false,"pushed_at":"2021-12-08T21:38:45.000Z","size":1333,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-03T16:13:56.926Z","etag":null,"topics":["bem-css","css-grid","css3","html5","npm","react","react-components","react-hooks","reactjs","rest-api","webpack"],"latest_commit_sha":null,"homepage":"https://5hraddha.github.io/around-react/","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/5hraddha.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":"2021-11-05T13:38:12.000Z","updated_at":"2022-01-11T23:20:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"448ee14a-6bf9-4987-b54c-c788b540d32d","html_url":"https://github.com/5hraddha/around-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/5hraddha/around-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5hraddha%2Faround-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5hraddha%2Faround-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5hraddha%2Faround-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5hraddha%2Faround-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/5hraddha","download_url":"https://codeload.github.com/5hraddha/around-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5hraddha%2Faround-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31567227,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"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":["bem-css","css-grid","css3","html5","npm","react","react-components","react-hooks","reactjs","rest-api","webpack"],"created_at":"2024-11-10T11:10:01.379Z","updated_at":"2026-04-08T18:01:43.885Z","avatar_url":"https://github.com/5hraddha.png","language":"JavaScript","readme":"\u003c!-- omit in toc --\u003e\n# Project: Around The U.S.\n- [About the Project](#about-the-project)\n- [Technologies and Standards Used](#technologies-and-standards-used)\n- [Product Specification Document](#product-specification-document)\n- [Future Improvements](#future-improvements)\n- [Live Demo](#live-demo)\n\n## About the Project\n\n![around-the-us](https://raw.githubusercontent.com/5hraddha/misc/master/images/around-the-us.png)\n\n**Around the U.S.** is a responsive website where a user can have a collection of the pictures of his journey around the US. The webpage interacts with the API endpoints using REST API calls. As of now, the functionalities available on the webpage are:\n1. When the page loads, all the existing image cards load from the server.\n2. When the page loads, the current user's name and about info are loaded from the server.\n3. User can edit and save his profile details to the server.\n4. User can update his avatar by uploading a new image to the server.\n5. User can like or unlike the images. The status is stored on the server.\n6. User can view the number of likes on an image card.\n7. User can add a new card with the title and the link for the image. The new card is stored on the server.\n8. User can delete the image cards that he has added, if he wishes to. The card would be deleted from the server too.\n9. User can also have a closer look of the images by clicking on them.\n10. Live input validation on all the forms.\n11. Users can close the popup by clicking on the overlay, i.e. anywhere outside the popup's borders.\n12. Users can close the popup by pressing the Esc key.\n\n## Technologies and Standards Used\n**The technologies that have been used are:**\n1. HTML (Hyper Text Markup Language)\n2. CSS (Cascading Style Sheets)\n3. React.js\n\n**There are various tools that have been used throughout the project design and development:**\n| Tools                                             | Usage                                             |\n|---------------------------------------------------|---------------------------------------------------|\n| Figma                                             | For referring to the product design specification |\n| [TinyPng](https://tinypng.com/)                   | For JPEG/PNG Image Compression                    |\n| [SVGOMG](https://jakearchibald.github.io/svgomg/) | For refining and compressing SVGs                 |\n| [Webpack](https://webpack.js.org/)                | For bundling all the ES modules                   |\n| [Babel](https://babeljs.io/)                      | For transpiling JS code                           |\n\n**The main concepts that have been emphasized are:**\n1. **Responsive Web Design**\n    - The webpage has been developed following the *desktop first approach*.\n    - The webpage has been designed and developed for:  \n        - Maximum Width: `1280px`\n        - Minimum Width: `320px`\n\n2. [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)\n3. [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n4. **BEM Specification**  \n  The website is using [BEM — Block Element Modifier](https://en.bem.info/methodology/quick-start/) methodology to create reusable and understandable components in CSS. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast and it allows reuse of existing code without copying and pasting. We are also using [Nested BEM File structure organization](https://en.bem.info/methodology/filestructure/#nested) for CSS.  \n\n5. **Git Conventional Commits Specification**  \n  We are using [Git Conventional Commits 1.0.0](https://www.conventionalcommits.org/en/v1.0.0/). It provides an easy set of rules for creating an explicit commit history making it easier for people to contribute to our projects by communicating the nature of changes clearly.\n\n6. **API (Application Programming Interface)**  \n   An API is a set of definitions and protocols for building and integrating application software. It’s sometimes referred to as a contract between an information provider and an information user—establishing the content required from the consumer (the call) and the content required by the producer (the response).\n\n7. **REST API Methods**  \n   [REST guidelines](https://restfulapi.net/http-methods/) suggest using a specific HTTP method on a particular type of call made to the server (though technically it is possible to violate this guideline, yet it is highly discouraged). We have used the following methods:\n    | HTTP Methods | Function |\n    |:---:|---|\n    | HTTP GET | To retrieve resource representation/information only – and not to modify it in any way. |\n    | HTTP POST | To create a new resource into the collection of resources |\n    | HTTP PUT | Primarily to update an existing resource (if the resource does not exist, then API may decide to create a new resource or not). |\n    | HTTP PATCH | To make a partial update on a resource. |\n    | HTTP DELETE | To delete resources (identified by the Request-URI). |\n\n## Product Specification Document\nYou can view the product specification document [here](https://www.figma.com/file/xQVeb8gprjukPVKXiLXS5T/Sprint-9:-Applied-JavaScript?node-id=1%3A266)\n\n## Future Improvements\n1. The data on the webpage should persist between page reloads - Done\n2. The user should have ability to add pictures. - Done\n\n## Live Demo\n[Enjoy the live project](https://5hraddha.github.io/around-react/)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5hraddha%2Faround-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F5hraddha%2Faround-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5hraddha%2Faround-react/lists"}