Feat #74 : Create a Story Component #86

CoderSwarup · 2024-05-16T10:25:21Z

Fixes Issue

close #74

Changes proposed

create a Story Ui component similar to the instagram story feed section where user others user story. Here's a sample video demonstrating the UI: video.

Screenshots

Note to reviewers

Here's the frontend work I've completed. If you'd like to implement the backend (using Appwrite) to fetch real user data for the stories and display it, please let me know.

github-actions

Thank you, CoderSwarup, for creating this pull request and contributing to OpenGrame! 💗

The maintainers will review this Pull Request and provide feedback as soon as possible! 😇
We appreciate your patience and contribution, Keep up the great work! 😀

Nishitbaria

Hey @CoderSwarup We are only using Shadcn and tailwind CSS please don't use Normal Css please convert this Tailwindcss

Second Point

Check the Figma file its not look same as file contain please follow same typography as Figma file contain and this story not be a static its should be Dynamic

User must be able to upload Story

CoderSwarup · 2024-05-16T13:51:48Z

Hey @CoderSwarup We are only using Shadcn and tailwind CSS please don't use Normal Css please convert this Tailwindcss

Second Point

Check the Figma file its not look same as file contain please follow same typography as Figma file contain and this story not be a static its should be Dynamic

User must be able to upload Story

ok

one query that i use my own appwrite or you can provide the your appwrite access to me

Nishitbaria · 2024-05-16T13:53:43Z

Hey @CoderSwarup We are only using Shadcn and tailwind CSS please don't use Normal Css please convert this Tailwindcss
Second Point

Check the Figma file its not look same as file contain please follow same typography as Figma file contain and this story not be a static its should be Dynamic

User must be able to upload Story

ok

one query that i use my own appwrite or you can provide the your appwrite access to me

for now I will provide you my dummy appwrite account :

use this as id and pass : [email protected]

CoderSwarup · 2024-05-16T14:17:34Z

Hey @CoderSwarup We are only using Shadcn and tailwind CSS please don't use Normal Css please convert this Tailwindcss
Second Point

Check the Figma file its not look same as file contain please follow same typography as Figma file contain and this story not be a static its should be Dynamic

User must be able to upload Story

ok
one query that i use my own appwrite or you can provide the your appwrite access to me

for now I will provide you my dummy appwrite account :

use this as id and pass : [email protected]

please check the ui

and what is the appwrite password

Nishitbaria · 2024-05-16T14:20:08Z

Hey @CoderSwarup We are only using Shadcn and tailwind CSS please don't use Normal Css please convert this Tailwindcss
Second Point

Check the Figma file its not look same as file contain please follow same typography as Figma file contain and this story not be a static its should be Dynamic

User must be able to upload Story

ok
one query that i use my own appwrite or you can provide the your appwrite access to me

for now I will provide you my dummy appwrite account :
use this as id and pass : [email protected]

please check the ui

Just change button color other vice other things LGTM

CoderSwarup · 2024-05-16T14:22:54Z

Hey @CoderSwarup We are only using Shadcn and tailwind CSS please don't use Normal Css please convert this Tailwindcss
Second Point

Check the Figma file its not look same as file contain please follow same typography as Figma file contain and this story not be a static its should be Dynamic

User must be able to upload Story

ok
one query that i use my own appwrite or you can provide the your appwrite access to me

for now I will provide you my dummy appwrite account :
use this as id and pass : [email protected]

please check the ui

Just change button color other vice other things LGTM

check now

and any changes required here in story view Model

Nishitbaria · 2024-05-16T14:53:50Z

Hey @CoderSwarup We are only using Shadcn and tailwind CSS please don't use Normal Css please convert this Tailwindcss
Second Point

Check the Figma file its not look same as file contain please follow same typography as Figma file contain and this story not be a static its should be Dynamic

User must be able to upload Story

ok
one query that i use my own appwrite or you can provide the your appwrite access to me

for now I will provide you my dummy appwrite account :
use this as id and pass : [email protected]

please check the ui

Just change button color other vice other things LGTM

check now

and any changes required here in the story view Model

Don't make it Transparent make the background blurry

CoderSwarup · 2024-05-16T15:14:18Z

use this as id and pass : [email protected]

ok
please give me the password of the appwrite

Nishitbaria · 2024-05-16T15:37:00Z

use this as id and pass : [email protected]

ok
please give me the password of the appwrite

This email is both email and password

Atharva1723 · 2024-05-16T18:02:07Z

Hey @CoderSwarup We are only using Shadcn and tailwind CSS please don't use Normal Css please convert this Tailwindcss
Second Point

Check the Figma file its not look same as file contain please follow same typography as Figma file contain and this story not be a static its should be Dynamic

User must be able to upload Story

ok
one query that i use my own appwrite or you can provide the your appwrite access to me

for now I will provide you my dummy appwrite account :
use this as id and pass : [email protected]

please check the ui

Just change button color other vice other things LGTM

check now

and any changes required here in the story view Model

Don't make it Transparent make the background blurry

Similar when we press logout the background , its currently transparent it should be blurry !

CoderSwarup · 2024-05-17T15:33:28Z

@Nishitbaria please check the changes

Nishitbaria · 2024-05-17T18:11:20Z

@Nishitbaria please check the changes

please fix the conflicts

… from appwrite

CoderSwarup · 2024-05-18T06:56:42Z

@Nishitbaria conflicts Resolve sample video link here

Before trying the please change the VITE_APPWRITE_STORIES_DATA_COLLECTION_ID="664701060006ef1071bf" add this env with main appwrite with attribute

Nishitbaria · 2024-05-19T04:55:04Z

@Nishitbaria conflicts Resolve sample video link here

Before trying the please change the VITE_APPWRITE_STORIES_DATA_COLLECTION_ID="664701060006ef1071bf" add this env with main appwrite with attribute

Can you please provide me appwrite.json

CoderSwarup · 2024-05-19T05:01:17Z

@Nishitbaria conflicts Resolve sample video link here
Before trying the please change the VITE_APPWRITE_STORIES_DATA_COLLECTION_ID="664701060006ef1071bf" add this env with main appwrite with attribute

Can you please provide me appwrite.json

I use your give credentials for login [email protected] you can directly access this

appwrite.json

CoderSwarup · 2024-05-19T13:32:58Z

@Nishitbaria any update

Nishitbaria · 2024-05-19T14:05:43Z

@Nishitbaria any update

I check one thing is that it's not align with. Current db I have config for that

CoderSwarup · 2024-05-19T14:13:11Z

@Nishitbaria any update

I check one thing is that it's not align with. Current db I have config for that

ok
which config file you need

if you need appwrite.json file
so please help me to generate the appwrite config file how i can do that

already available config file is
appwrite.json

Nishitbaria · 2024-05-19T14:51:52Z

@Nishitbaria any update

I check one thing is that it's not align with. Current db I have config for that

ok which config file you need

if you need appwrite.json file so please help me to generate the appwrite config file how i can do that

already available config file is appwrite.json

Just wait for more 1 day I will try to solve that all issue tomorrow is my last paper

Nishitbaria · 2024-05-21T03:25:24Z

Hey @CoderSwarup I have added new project on appwrite add your stories Schema on User Schema Look at on appwrite

CoderSwarup · 2024-05-21T03:57:57Z

Hey @CoderSwarup I have added new project on appwrite add your stories Schema on User Schema Look at on appwrite

Check the project i added story schema

Nishitbaria · 2024-05-21T06:42:48Z

Hey @CoderSwarup I have added new project on appwrite add your stories Schema on User Schema Look at on appwrite

Check the project i added story schema

when User Create Post then there is ref of the post in Both Post and User Schema There is between relationship i didn't find that you make any kind of relationship its require to store the reference that who added the stories :

Nishitbaria · 2024-05-26T04:00:57Z

Hey @CoderSwarup Stories is upload and second think i want to say that did you implemented that logic that after 24hour storis is automatically removed ?

…dability and performance

Refactor stories.svg to update the fill color to #877EFF. This change improves the visual consistency of the icon. Refactor LeftSidebar component to remove unused imports and useEffect dependencies. This improves the readability and performance of the component. Related recent commits: - chore: Refactor Home and StoriesContainer components for improved readability and performance - chore: Refactor Home component for improved readability and performance - chore: Update appwriteConfig to use correct stories collection ID - fix: some Ui Part of code - Merge branch 'main' into storyui - Merge pull request #109 from Unalia09/main - Update SigninForm.tsx - Corrected the grammatical error - Merge pull request #91 from sambitsingha/main - [Feature] - Custom 404 Not Found page added - Added a timer functionality which will redirect the user back to the home page, after seeing the 404 page - Merge branch 'Nishitbaria:main' into main

Nishitbaria · 2024-05-26T05:48:34Z

@CoderSwarup Everythings Looks Good But I found Two bugs

When as User i first time added Stories its visible to everyone
but when i try to upload Stories then its uploaded but not visible for other as well for me

CoderSwarup · 2024-05-26T06:00:55Z

@CoderSwarup Everythings Looks Good But I found Two bugs

When as User i first time added Stories its visible to everyone

but when i try to upload Stories then its uploaded but not visible for other as well for me

bug : When you upload the second story in story feed section you and other user see the old story means 1st , it's write or the 2nd story complete not visible?

Nishitbaria · 2024-05-26T06:02:40Z

@CoderSwarup Everythings Looks Good But I found Two bugs

When as User i first time added Stories its visible to everyone

but when i try to upload Stories then its uploaded but not visible for other as well for me

bug : When you upload the second story in story feed section you and other user see the old story means 1st , it's write or the 2nd story complete not visible?

Yea When i login with second account then its show first account stories but when i upload with second account stories then its uploaded but not visible on my profile as well for other profile too @CoderSwarup

CoderSwarup · 2024-05-26T06:03:38Z

second account then its show first account stories but when i upload with second account stories then its uploaded but not v

you need to reload the page of the user its because of the we not use the real time connection

CoderSwarup · 2024-05-26T06:16:45Z

@Nishitbaria

User 1 Story Visible on user 2 Account

User 1 Upload Story

User 1 Story Uploaded Successfully

On user 2 Story Shows the old Data on user 2 before reload

After reload On user 2

Nishitbaria · 2024-05-26T06:31:08Z

@CoderSwarup See
Uploading OpenGrame and 1 more page - Personal - Microsoft Edge 2024-05-26 11-58-13.mp4…

CoderSwarup · 2024-05-26T06:46:00Z

@CoderSwarup See Uploading OpenGrame and 1 more page - Personal - Microsoft Edge 2024-05-26 11-58-13.mp4…

video is not upload

Nishitbaria · 2024-05-26T07:35:39Z

@CoderSwarup See Uploading OpenGrame and 1 more page - Personal - Microsoft Edge 2024-05-26 11-58-13.mp4…

video is not upload

OpenGrame.and.1.more.page.-.Personal.-.Microsoft.Edge.2024-05-26.11-58-13.mp4

CoderSwarup · 2024-05-26T08:01:50Z

ok bug is when you upload your story then it will be not showing itself

Nishitbaria · 2024-05-26T08:02:41Z

ok bug is when you upload your story then it will be not showing itself

Yes and also for other too

CoderSwarup · 2024-05-26T08:47:56Z

Ok i will see that, can you send me your envs

Nishitbaria · 2024-05-26T16:09:56Z

Ok i will see that, can you send me your envs

VITE_APPWRITE_PROJECT_ID="664b72c700235fef3e76"
VITE_APPWRITE_URL="https://cloud.appwrite.io/v1"
VITE_APPWRITE_STORAGE_ID="65478ceca6d8a49b3cf1"
VITE_APPWRITE_DATABASE_ID="3j22cy28uc3"
VITE_APPWRITE_SAVES_COLLECTION_ID="65479a44782ab930d6f3"
VITE_APPWRITE_USERS_COLLECTION_ID="65479b3f3ff36d0c3fa6"
VITE_APPWRITE_POSTS_COLLECTION_ID="65479a1224b7d12ccb6e"
VITE_APPWRITE_STORIES_COLLECTION_ID="664c1dba0005c3bb2eae"

CoderSwarup · 2024-05-26T17:10:51Z

@Nishitbaria

Their is an error in you env

VITE_APPWRITE_PROJECT_ID="664b72c700235fef3e76"
VITE_APPWRITE_URL="https://cloud.appwrite.io/v1"
VITE_APPWRITE_STORAGE_ID="65478ceca6d8a49b3cf1"
VITE_APPWRITE_DATABASE_ID="3j22cy28uc3"
VITE_APPWRITE_SAVES_COLLECTION_ID="65479a44782ab930d6f3"
VITE_APPWRITE_USERS_COLLECTION_ID="65479b3f3ff36d0c3fa6"
VITE_APPWRITE_POSTS_COLLECTION_ID="65479a1224b7d12ccb6e"
VITE_APPWRITE_STORIES_DATA_COLLECTION_ID="664c1dba0005c3bb2eae"

when i try its Work Perfectly also i see your Stories also

see the video

video

and also its work When i upload the New Story without reloading

its Take Time To Load the new Story Image

Nishitbaria · 2024-05-26T17:36:01Z

@Nishitbaria

Their is an error in you env
VITE_APPWRITE_PROJECT_ID="664b72c700235fef3e76"
VITE_APPWRITE_URL="https://cloud.appwrite.io/v1"
VITE_APPWRITE_STORAGE_ID="65478ceca6d8a49b3cf1"
VITE_APPWRITE_DATABASE_ID="3j22cy28uc3"
VITE_APPWRITE_SAVES_COLLECTION_ID="65479a44782ab930d6f3"
VITE_APPWRITE_USERS_COLLECTION_ID="65479b3f3ff36d0c3fa6"
VITE_APPWRITE_POSTS_COLLECTION_ID="65479a1224b7d12ccb6e"
VITE_APPWRITE_STORIES_DATA_COLLECTION_ID="664c1dba0005c3bb2eae"  
when i try its Work Perfectly also i see your Stories also

see the video

video

and also its work When i upload the New Story without reloading

its Take Time To Load the new Story Image

I have just one last question did you implement the Automatic Remove Stories feature?
if not then create new issue and working on that

CoderSwarup requested a review from Nishitbaria as a code owner May 16, 2024 10:25

github-actions bot assigned CoderSwarup May 16, 2024

github-actions bot reviewed May 16, 2024

View reviewed changes

vercel bot deployed to Preview May 16, 2024 13:36 View deployment

Nishitbaria requested changes May 16, 2024

View reviewed changes

Nishitbaria added the Request: Changes label May 16, 2024

CoderSwarup added 2 commits May 18, 2024 12:10

Feat #74 : Create a Story Component

79b51cb

feat Changes : Story Ui Component Changes Upload and fetch story data…

80a5479

… from appwrite

vercel bot had a problem deploying to Preview May 19, 2024 04:55 Failure

Nishitbaria added 2 commits May 26, 2024 10:08

fix: some Ui Part of code

a4bfbb6

chore: Update appwriteConfig to use correct stories collection ID

8334448

vercel bot had a problem deploying to Preview May 26, 2024 05:09 Failure

Nishitbaria added 3 commits May 26, 2024 10:40

chore: Refactor Home component for improved readability and performance

d23b82f

chore: Refactor Home and StoriesContainer components for improved rea…

3363591

…dability and performance

vercel bot deployed to Preview May 26, 2024 05:33 View deployment

Nishitbaria merged commit 9bc09dd into Nishitbaria:main May 26, 2024
6 checks passed

Nishitbaria added enhancement New feature or request gssoc Girl Script Summer of Code level3 Making completely new feature goal: new-feature New feature or request development Still being developed discussion For taking issues into discussion board and removed Request: Changes labels May 26, 2024

Feat #74 : Create a Story Component #86

Feat #74 : Create a Story Component #86

Conversation

CoderSwarup commented May 16, 2024

Fixes Issue

Changes proposed

Screenshots

Note to reviewers

github-actions bot left a comment

Choose a reason for hiding this comment

Nishitbaria left a comment

Choose a reason for hiding this comment

CoderSwarup commented May 16, 2024

Nishitbaria commented May 16, 2024

CoderSwarup commented May 16, 2024 • edited Loading

Nishitbaria commented May 16, 2024

CoderSwarup commented May 16, 2024 • edited Loading

Nishitbaria commented May 16, 2024

CoderSwarup commented May 16, 2024

Nishitbaria commented May 16, 2024

Atharva1723 commented May 16, 2024

CoderSwarup commented May 17, 2024

Nishitbaria commented May 17, 2024

CoderSwarup commented May 18, 2024

Nishitbaria commented May 19, 2024

CoderSwarup commented May 19, 2024 • edited Loading

CoderSwarup commented May 19, 2024

Nishitbaria commented May 19, 2024

CoderSwarup commented May 19, 2024

Nishitbaria commented May 19, 2024

Nishitbaria commented May 21, 2024

CoderSwarup commented May 21, 2024 • edited Loading

Nishitbaria commented May 21, 2024

Nishitbaria commented May 26, 2024

Nishitbaria commented May 26, 2024

CoderSwarup commented May 26, 2024

Nishitbaria commented May 26, 2024

CoderSwarup commented May 26, 2024 • edited Loading

CoderSwarup commented May 26, 2024 • edited Loading

Nishitbaria commented May 26, 2024

CoderSwarup commented May 26, 2024

Nishitbaria commented May 26, 2024

CoderSwarup commented May 26, 2024

Nishitbaria commented May 26, 2024

CoderSwarup commented May 26, 2024

Nishitbaria commented May 26, 2024

CoderSwarup commented May 26, 2024 • edited Loading

Nishitbaria commented May 26, 2024 • edited Loading

CoderSwarup commented May 16, 2024 •

edited

Loading

CoderSwarup commented May 16, 2024 •

edited

Loading

CoderSwarup commented May 19, 2024 •

edited

Loading

CoderSwarup commented May 21, 2024 •

edited

Loading

CoderSwarup commented May 26, 2024 •

edited

Loading

CoderSwarup commented May 26, 2024 •

edited

Loading

CoderSwarup commented May 26, 2024 •

edited

Loading

Nishitbaria commented May 26, 2024 •

edited

Loading