{"id":15575673,"url":"https://github.com/hsyntes/instamern","last_synced_at":"2026-03-05T00:03:08.357Z","repository":{"id":185143048,"uuid":"673035753","full_name":"hsyntes/instamern","owner":"hsyntes","description":"The InstaMERN frontend is built using React, React-Query, Redux, React-Router, and Tailwind CSS. It provides a user-friendly interface for users to interact with the InstaMERN social media platform.","archived":false,"fork":false,"pushed_at":"2024-06-18T13:28:24.000Z","size":2677,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-24T02:12:02.581Z","etag":null,"topics":["aws","react","react-query","react-router-dom","redux","rest-api","tailwindcss"],"latest_commit_sha":null,"homepage":"https://instamern.netlify.app","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/hsyntes.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":"2023-07-31T18:09:52.000Z","updated_at":"2024-09-22T08:52:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"808f25a4-4d94-4d35-b989-74907640369d","html_url":"https://github.com/hsyntes/instamern","commit_stats":null,"previous_names":["hsyntes/instamern"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/hsyntes/instamern","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsyntes%2Finstamern","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsyntes%2Finstamern/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsyntes%2Finstamern/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsyntes%2Finstamern/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hsyntes","download_url":"https://codeload.github.com/hsyntes/instamern/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsyntes%2Finstamern/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30101688,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T23:59:36.199Z","status":"ssl_error","status_checked_at":"2026-03-04T23:56:48.556Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["aws","react","react-query","react-router-dom","redux","rest-api","tailwindcss"],"created_at":"2024-10-02T18:40:20.914Z","updated_at":"2026-03-05T00:03:08.317Z","avatar_url":"https://github.com/hsyntes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# InstaMERN\n\nThe InstaMERN frontend is built using React, React-Query, Redux, React-Router, and Tailwind CSS. It provides a user-friendly interface for users to interact with the InstaMERN social media platform.\n\n[![InstaMERN](/public/logo.png)](https://instamern.netlify.app)\n\n## API\n\n### InstaMERN Backend API\n\nThe InstaMERN Backend API serves as the core of the InstaMERN platform, providing user authentication, data management, **AWS Cloud** and more. Explore the API documentation for detailed information on endpoints, usage, and integration.\n\n- [instamern-api](https://github.com/hsyntes/instamern-api)\n\n## Technologies Used\n\nReact: A JavaScript library for building user interfaces, providing a component-based architecture and efficient rendering.\n\nReact-Query: A data-fetching library for React applications, enabling seamless data management and caching.\n\nRedux: A state management library, enabling centralized data storage and easy state updates.\n\nReact-Router: A routing library for React applications, enabling navigation and URL handling.\n\nTailwind CSS: A utility-first CSS framework, providing a set of pre-defined classes for styling components.\n\n### Dark \u0026 Light Theme according to device settings\n\n![logo](/src/screenshots/desktop-dark.png)\n\n![logo](/src/screenshots/desktop-light.png)\n\n\u003cbr /\u003e\n\n## React-Query Integration\n\nReact-Query is used to fetch and manage data in the frontend. The library provides hooks for fetching data from the backend API, caching responses, and handling loading and error states.\n\n## Redux Integration\n\nRedux is used for global state management in the frontend. It stores user authentication information, such as the JWT token, and manages user-related actions like logging in and logging out.\n\n## React-Router Integration\n\nReact-Router is used for client-side routing, allowing smooth navigation between different pages and managing URLs for specific content.\n\n## Tailwind CSS Styling\n\nTailwind CSS classes are used to style the components, providing a consistent and responsive design throughout the application.\n\n### Responsive Design\n\n![logo](/src/screenshots/mobile-dark.png)\u0026emsp;![logo](/src/screenshots/mobile-light.png)\n\n\u003cbr /\u003e\n\n## Powerful \u0026 Fast MongoDB Atlas Search Engine\n\n![logo](/src/screenshots/search-mobile-dark.png)\u0026emsp;![logo](/src/screenshots/search-mobile-light.png)\n\n\u003cbr /\u003e\n\n## Authentication\n\nUser authentication is managed using JWT tokens obtained from the backend upon successful login. The JWT token is stored in the **Secure Response Headers** and included in the Authorization header for protected API requests also hashing passwords and save them to **MongoDB**\n\n![logo](/src/screenshots/signup-mobile-dark.png)\u0026emsp;![logo](/src/screenshots/signup-mobile-light.png)\n\n\u003cbr /\u003e\n\n### Uploading \u0026 Loading Images via AWS Cloud\n\n![logo](/src/screenshots/upload-post-desktop-dark.png)\n\n![logo](/src/screenshots/upload-story-mobile-dark.png)\u0026emsp;![logo](/src/screenshots/upload-story-mobile-light.png)\n\n\u003cbr /\u003e\n\n## Notifications via MongoDB\n\n![logo](/src/screenshots/notifications-mobile-dark.png)\u0026emsp;![logo](/src/screenshots/notifications-mobile-light.png)\n\n\u003cbr /\u003e\n\nThis documentation provides an overview of the frontend technologies used, project structure, and key components and pages in the InstaMERN frontend. Developers can explore the source code for more in-depth details on how each component, library, and feature is implemented.\n\n## 🔗 Links\n\n[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/in/hsyntes)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsyntes%2Finstamern","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhsyntes%2Finstamern","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsyntes%2Finstamern/lists"}