{"id":22055699,"url":"https://github.com/harshmangalam/hydrogen-solidjs-client","last_synced_at":"2025-04-04T21:08:08.502Z","repository":{"id":53270531,"uuid":"453410665","full_name":"harshmangalam/hydrogen-solidjs-client","owner":"harshmangalam","description":"A social media web app powered by SolidJS","archived":false,"fork":false,"pushed_at":"2024-10-22T02:45:47.000Z","size":625,"stargazers_count":85,"open_issues_count":18,"forks_count":59,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T20:09:32.819Z","etag":null,"topics":["chat","hacktoberfest","hacktoberfest10","hacktoberfest2022","hacktoberfest2023","javascript","mesenger","notifications","prisma","realtime","social","social-media","social-network","socket-io-client","solidjs","tailwindcss","vercel"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/harshmangalam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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-01-29T13:48:34.000Z","updated_at":"2025-03-14T16:05:26.000Z","dependencies_parsed_at":"2024-10-23T00:32:01.382Z","dependency_job_id":null,"html_url":"https://github.com/harshmangalam/hydrogen-solidjs-client","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshmangalam%2Fhydrogen-solidjs-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshmangalam%2Fhydrogen-solidjs-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshmangalam%2Fhydrogen-solidjs-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshmangalam%2Fhydrogen-solidjs-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/harshmangalam","download_url":"https://codeload.github.com/harshmangalam/hydrogen-solidjs-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247249525,"owners_count":20908212,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["chat","hacktoberfest","hacktoberfest10","hacktoberfest2022","hacktoberfest2023","javascript","mesenger","notifications","prisma","realtime","social","social-media","social-network","socket-io-client","solidjs","tailwindcss","vercel"],"created_at":"2024-11-30T16:10:41.043Z","updated_at":"2025-04-04T21:08:08.485Z","avatar_url":"https://github.com/harshmangalam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"---\n\n# Hydrogen - Social Media Web App (Powered by SolidJs)\n\nWelcome to Hydrogen, a feature-rich social media web app built with SolidJs. Explore a vast array of functionalities including real-time notifications, dynamic posts, group management, and more.\n\n![image](https://github.com/user-attachments/assets/eae5477d-6f27-4ede-b5b3-146640091487)\n\n\n\n## Table of Contents\n\n1. [Installation](#installation)\n2. [Setup `.env` File](#setup-env-file)\n3. [Server Repo](#server-repo)\n4. [Dependencies](#dependencies)\n5. [Key Features](#key-features)\n    - [Authentication](#authentication)\n    - [Home](#home)\n    - [Friends](#friends)\n    - [Posts](#posts)\n    - [Post Details](#post-details)\n    - [Groups](#groups)\n    - [Group Details](#group-details)\n    - [Notifications](#notifications)\n    - [Messenger](#messenger)\n    - [Profile](#profile)\n    - [Settings](#settings)\n    - [Networking](#networking)\n6. [Utilities](#utilities)\n7. [Services](#services)\n8. [Context for State Management](#context-for-state-management)\n9. [Date and Time Formatting](#date-and-time-formatting)\n10. [Real-time Friend Status](#realtime-friend-status)\n\n---\n\n## Installation\n\nFollow these steps to install the project:\n\n#### Install pnpm globally\n```bash\nnpm i -g pnpm\n```\n\n#### Install dependencies\n```bash\npnpm i\n```\n\n#### Run the development server\n```bash\npnpm run dev\n```\n\n\n## Setup `.env` File\n\n1. Create a new file named `.env` in the root directory of your project.\n2. Copy the contents of the `.env.example` file into the `.env` file.\n3. Replace the placeholder values with your actual credentials.\n\nHere's an example of what your `.env` file might look like:\n\n```\nVITE_ENDPOINT=\nVITE_CLOUDINARY_UPLOAD_PRESET=\nVITE_CLOUDINARY_API_KEY=\n```\n\n### SERVER REPO\n\n**[SERVER REPO](https://github.com/harshmangalam/hydrogen-nodejs-server)**\n\n## Dependencies\n\n- Tailwind form\n- Tailwind css\n- Axios\n- Dayjs\n- Js cookies\n- Platform\n- Shortid\n- Socket io client\n- Solid app router\n- Solid icons\n- Solidjs\n\n## 80+ Components\n\n## 25+ hooks\n\n## 50+ Screens\n\n## Dark and light mode\n\n## Authentication\n\n- Login\n- Signup\n\n## Home\n\n- Navigation\n- Posts feeds\n- My friends\n\n## Friends\n\n- My friends\n- Requests received\n- Requests sent\n- Friends Suggestions\n- Send friend request\n- Receive friend request\n- Decline friend request\n- Accept friend request\n- Cancel sent request\n\n## Posts\n\n- My posts\n- Trending Posts\n- Friends Posts\n- Create Post\n  - Post content\n  - Post privacy\n  - Add specific friend who will see the post\n  - Tag friend\n  - Add Images\n  - Add feelings\n  - Add locations\n- Add and remove heart on post\n- Comment on post\n- Delete post\n- Show post privacy\n- Show post title dynamically generated\n\n## Post details screen\n\n- Write Comment on post\n- View comments\n\n## Groups\n\n- Groups Feeds\n- Created Groups\n- Created Group posts\n- Groups Invited\n- Groups Joined\n- Suggestions\n- Notifications\n- Create Group Post\n  - Post content\n  - Post image\n  - Choose group\n- Like group post\n- Create Group\n  - Group name\n  - Group privacy\n  - Group profile image\n  - Group cover image\n  - Invite friend when group privacy is private\n- Delete group option\n- Group members count\n- Accept group invitation\n- Send group invitation\n- Ignore group invitation\n\n## Group details\n\n- Cover and profile image of group\n- Group name\n- Group members count\n- Group privacy info\n- Edit group options\n- Group posts\n- Group members\n- Change profile and cover image\n\n## Notifications\n\n- Realtime notifications using socket.io\n- Clear notifications\n- See all notifications\n- Notification avatar based on Post , Group or friend related generated dynamically\n- Notification content generated dynamically\n- Navigate to user profile from notification\n\n## Messenger Navbar\n\n- Show friends on menu bar who send message\n- Show last sent or received message on menu\n- Navigate to user profile from notification\n- Show friend status (active or idle or logout)\n- Show link to navigate on messenger screen\n\n## Messenger Screen\n\n- Different ui from main screen using nested routing (solid app router)\n- Navbar\n- Home\n- Theme switcher\n- Logo\n- Mobile\n- Splitting screen using solid-app-router\n- 1st screen for friend lists on tap on friend navigate to chat screen\n- 2nd screen for chat screen\n- Left side friend lists\n- Right side chat screen\n- Chat screen show friend info on top\n- Clear chat\n- Exit from chat\n- Message textarea\n- Send message button\n- Messages append in realtime\n- Message status (send , received,seen)\n\n## Notifications Page\n\n## Profile\n\n- Cover image\n- Profile image\n- Profile info\n- Friend count\n- Friend avatar\n- Navigate to friend profile on clicking the avatar\n- Edit profile\n- Change cover image\n- Change profile image\n- Posts lists created by user\n- Friends lists of user which nested friends count\n- Navigate to friend profile on taping friend\n\n## Settings\n\n- General settings\n  - Show users details\n  - Edit details\n- Password settings\n  - Change password\n- Login activity - Clear login session delete login session accept current session - Login details\n  Os\n  Browser\n  Location\n  Time\n  Active status\n  Current status\n\n## Networking\n\n- Automatically notify if network is unavialable\n- Automatically notify if network recovered\n\nUtility\nDayjs utility for getting relative time\n\n## Services\n\n- Auth services\n- Comment services\n- Friends services\n- Group services\n- Messenger services\n- Notification services\n- Post services\n- Search services\n- Settings services\n- User services\n\n## Context for state management\n\n- Auth context\n\n  - Handle account and authenticated related data\n  - Manage relatime socket instance\n  - Manage account session\n  - Manage global auth loader status\n\n- Messenger context\n\n  - Handle mutations on message\n  - Clear message\n  - Fetch message\n  - Send message\n  - Fetch friends with last message\n  - Shoes active friends\n  - Show active chat\n  - Notify on new message\n\n- UI context\n\n  - Manage snackbars\n  - Add snackbar\n  - Remove snackbar\n\n- Notifications context\n  - Clear notifications\n  - Fetch notifications\n  - Realtime notification state mange\n  - Manage notifications Count\n  - Manage notifications list\n\n## Formatted date and time using dayjs\n\nImage will be uploaded to cludinary or you can provide any valid image url. This will show image preview befor upload\n\n## Realtime friend status\n\n- Active —\u003eLogin and Surfing on site\n- Idle —-\u003e Login but not surfing on site\n- Logout —-\u003e when user logout from site\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharshmangalam%2Fhydrogen-solidjs-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharshmangalam%2Fhydrogen-solidjs-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharshmangalam%2Fhydrogen-solidjs-client/lists"}