harshmangalam / hydrogen-solidjs-client Goto Github PK

View Code? Open in Web Editor NEW

78.0 3.0 54.0 677 KB

A social media web app powered by SolidJS

License: GNU General Public License v3.0

HTML 0.48% JavaScript 99.11% CSS 0.42%

prisma social-media solidjs tailwindcss vercel chat hacktoberfest hacktoberfest2022 mesenger notifications

hydrogen-solidjs-client's Introduction

Hydrogen - Social media web app (Powered by SolidJs)

Installation

install pnpm globally npm i -g pnpm
install dependencies pnpm i
run dev server pnpm run dev

Setup env file

copy .env.example inside .env

Update .env

SERVER REPO

SERVER REPO

Dependencies

Tailwind form
Tailwind css
Axios
Dayjs
Js cookies
Platform
Shortid
Socket io client
Solid app router
Solid icons
Solidjs

80+ Components

25+ hooks

50+ Screens

Dark and light mode

Authentication

Login
Signup

Home

Navigation
Posts feeds
My friends

Posts

My posts
Trending Posts
Friends Posts
Create Post
- Post content
- Post privacy
- Add specific friend who will see the post
- Tag friend
- Add Images
- Add feelings
- Add locations
Add and remove heart on post
Comment on post
Delete post
Show post privacy
Show post title dynamically generated

Post details screen

Write Comment on post
View comments

Groups

Groups Feeds
Created Groups
Created Group posts
Groups Invited
Groups Joined
Suggestions
Notifications
Create Group Post
- Post content
- Post image
- Choose group
Like group post
Create Group
- Group name
- Group privacy
- Group profile image
- Group cover image
- Invite friend when group privacy is private
Delete group option
Group members count
Accept group invitation
Send group invitation
Ignore group invitation

Group details

Cover and profile image of group
Group name
Group members count
Group privacy info
Edit group options
Group posts
Group members
Change profile and cover image

Notifications

Realtime notifications using socket.io
Clear notifications
See all notifications
Notification avatar based on Post , Group or friend related generated dynamically
Notification content generated dynamically
Navigate to user profile from notification

Messenger Navbar

Show friends on menu bar who send message
Show last sent or received message on menu
Navigate to user profile from notification
Show friend status (active or idle or logout)
Show link to navigate on messenger screen

Messenger Screen

Different ui from main screen using nested routing (solid app router)
Navbar
Home
Theme switcher
Logo
Mobile
Splitting screen using solid-app-router
1st screen for friend lists on tap on friend navigate to chat screen
2nd screen for chat screen
Left side friend lists
Right side chat screen
Chat screen show friend info on top
Clear chat
Exit from chat
Message textarea
Send message button
Messages append in realtime
Message status (send , received,seen)

Notifications Page

Profile

Cover image
Profile image
Profile info
Friend count
Friend avatar
Navigate to friend profile on clicking the avatar
Edit profile
Change cover image
Change profile image
Posts lists created by user
Friends lists of user which nested friends count
Navigate to friend profile on taping friend

Settings

General settings
- Show users details
- Edit details
Password settings
- Change password
Login activity - Clear login session delete login session accept current session - Login details Os Browser Location Time Active status Current status

Networking

Automatically notify if network is unavialable
Automatically notify if network recovered

Utility Dayjs utility for getting relative time

Services

Auth services
Comment services
Friends services
Group services
Messenger services
Notification services
Post services
Search services
Settings services
User services

Context for state management

Auth context
- Handle account and authenticated related data
- Manage relatime socket instance
- Manage account session
- Manage global auth loader status
Messenger context
- Handle mutations on message
- Clear message
- Fetch message
- Send message
- Fetch friends with last message
- Shoes active friends
- Show active chat
- Notify on new message
UI context
- Manage snackbars
- Add snackbar
- Remove snackbar
Notifications context
- Clear notifications
- Fetch notifications
- Realtime notification state mange
- Manage notifications Count
- Manage notifications list

Formatted date and time using dayjs

Image will be uploaded to cludinary or you can provide any valid image url. This will show image preview befor upload

Realtime friend status

Active —>Login and Surfing on site
Idle —-> Login but not surfing on site
Logout —-> when user logout from site

hydrogen-solidjs-client's People

Contributors

Stargazers

Watchers

hydrogen-solidjs-client's Issues

[FEATURE] Add open graph image

An open graph is a preview image that shows when a link is shared on social media

for more info about open graphs read the blog below
https://ahrefs.com/blog/open-graph-meta-tags/

Below is how the website appeared when shared 👇👇👇

Enhance create post button

Add spinner in place of Creating post...
Disable button during creating post
Change disabled button background

Enhance create group section

Add spinner in create button
Change disabled btn background

Enhance image accessibility

Enhance image accessibility in Post card by adding

Aspect ratio in image
Proper alt attribute in image
Width and Height in image

Add location features in create post

In create post section Check in add

Add location autocomplete in text field
Add feature to get user current location from Geolocation api

Add tooltip

Add tooltip in post card icons and icon button

Delete icon
Post privacy icon
Like icon button
Comment icon button

Add user details page

In profile page for now there is two tab Posts and Friends .
Add one more tab About and add all user details available using api.

Add debouncing optimization in Search

Optimize search component of global navbar by add Debouncing in search input.

Disable button for empty comment field

In post comment disable Comment button when there is no text in textarea

I noticed you're not validating your password. Creating an account with a password of "123" works, but it doesn't sound secure. I suggest adding a validation that prevents the creation of an account if a password:

does not contain an uppercase
does not have a number
does not have a minimum length of 12

This ensures that it would be difficult for other people to access another user's account easily

I would like to work on this if possible

ui: group name should be ellipsized

Currently, a long group name looks like this:

It should be of maximum 1 line and ellipsized to show there is more content, like below:

And also the group card needs to be updated with max 2 lines and ellipsized.

Like this

Add last seen in user profile

In user profile page show user last seen info and user active status

Remove extra comma

After tagging friends in create post showing extra comma , after last friend name

Add joined date in profile page

In user profile page add joined date below friends count in a tag

Fix avatar UI break

Make avatar flex-none so that it will not break when content will increase.

Add link in tagged friend

In post card header add link to connect tagged friend with their profile page

Add new tab in settings

Inside Settings and Privacy add new tab below Login history Delete Account when open Delete Account tab show warning message and delete button.

missing dependencies

error when starting dev server:
Error: The following dependencies are imported but could not be resolved:

  lodash.debounce (imported by /home/chankruze/hydrogen-solidjs-client/src/components/header/Search.jsx)

Are they installed?
    at optimizeDeps (/home/chankruze/hydrogen-solidjs-client/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-f5552faa.js:56527:15)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runOptimize (/home/chankruze/hydrogen-solidjs-client/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60549:48)
    at async Server.httpServer.listen (/home/chankruze/hydrogen-solidjs-client/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60565:21)
 ELIFECYCLE  Command failed with exit code 1.
 ```

Most probably happening after merging https://github.com/harshmangalam/hydrogen-solidjs-client/pull/72. @harshmangalam please have a look.

Submitting empty comment

Inside post comment add validation to stop submitting empty comment and trim all empty spaces

Enhance accessibility of friends suggestions

Enhance lighthouse accessibility of Friends Suggestions page https://hydrogen-solid.vercel.app/friends/suggestions

Background and foreground colors do not have a sufficient contrast ratio.
Heading elements are not in a sequentially-descending orde

Add meta description

Enhance page SEO by adding meta description .

whenever im trying Yarn run dev/start its showing this error

because of this issue i cant run this project on my PC after clone

Update post details

Update post details inside Post comment

When add new comment
When remove any comment

404 error

https://hydrogen-solidjs-client.vercel.app/

Improve lighthouse accessibility of profile page

Image elements do not have [alt] attributes
Background and foreground colors do not have a sufficient contrast ratio.
Heading elements are not in a sequentially-descending order

Enhance page accessibility

Enhance accessibility of Home page by adding

accessible name to icon button like Create, Notifications etc...
Add link discernible name

Delete Comment deletes last comment.

On Post Details page if we click on delete comment button on any comment . after Conformation through popup it always deletes the last( which is created Earliest) Comment.

Enhance Friends Suggestion page accessibility

Run lighthouse on Friends > Suggestions and fix accessibility issues

Background and foreground colors do not have a sufficient contrast ratio.
Heading elements are not in a sequentially-descending order

Add link to user profile

In post card title only user name is showing . Now add a link that will connect user with their profile page.

Add delete functionality for post comments

Enhance post comment feature by adding delete comment

Show delete btn to only comment author
To delete comment make api call to /comments/:commentId
After comment deleted fetch all comments to show updated comments

CORs blocked

Issue
API calls are blocked. (CORS header ‘Access-Control-Allow-Origin’ missing)

Environment
Browser: Firefox version 102.0.1
Enhanced tracking protection ON (does not work even with Enhanced tracking protection OFF)

Remove image from cloudinary

Image component is a shared component that is used by profile pic upload screen, post create screen etc...
Now when image upload it create blob and show the preview at same time when image successfully uploaded to cloudinary then cloudinary url added to image preview and blob destroyed. But suppose if someone remove image then it only remove from the state it should also remove that image from cloudinary.

Make DELETE api call to /cloudinary/:public_id when someone remove image during preview.
public_id you can get during image uploaded to cloudinary

Enhance login button UI

Add Enhancement in login button

Add spinner in login button while loading...
Disable button during loading...
Change disable button background

Enhance create post page accessibility

Improve lighthouse accessibility of Create Post page

Background and foreground colors do not have a sufficient contrast ratio.
Links do not have a discernible name

Enhance signup button

Add Enhancement in signup button

Add spinner in signup button while loading...
Disable button during loading...
Change disable button background

Add group admin name

Inside Group add group admin name

Add admin info in group profile

In group profile page add admin info

first name
profile pic
first name should be link which will navigate to admin profile

Add unfriend feature

Inside Friends > My Friends shows current user friends card and card action button is showing Unfriend button reuse same functonality inside Profile > Friends Cards and add Unfriend button.

Add title for icon button

In Navbar icon button add title attributes

Create
Notifications
Messenger
Theme toggle
Account

Add tooltip in post privacy

Add tooltip for Post privacy icon in Post card.

Enhance My Friends page accessibility

Run lighthouse on Friends > My Friends page and fix accessibility issues

Background and foreground colors do not have a sufficient contrast ratio.
Heading elements are not in a sequentially-descending order

Show group admin name on Group card

Add admin name in right side of group card

Add more feelings emoji

In create post section Add feeligs add more emojis

Add emoji picker

Inside chat messenger add emoji picker

Add image upload size limit

Limit image size during upload and show warning message.

Post ,Group Post and Cover image - Limit image size 2mb
Other all - Limit image size 1mb

Image upload is a shared component that are used everywhere from profile pic change to post image upload hence accept image limit from props

Add spinner in create button
Change disabled btn background