When the user in bottom if the user switches between routers it is not moving upwards.
I am gssoc'24 contributor i can do this @harshalhonde21

Adding category menu (shoe, T-shirt, skirt, watch, etc) might be useful for overall user experience rather than a simple search bar for everything

Hey There @harshalhonde21 ,

UX (old):
In the existing product page , Since user is not aware of what are the categories are there which are in stock or not. This does not prompt the user what to be searched for initially.

Proposed Idea:
-->From backend we can fetch what are the categories that are currently in stock or what are the categories available and show them as an tab option on the frontend part
-->We can also add the feature that shows most viewed project in each category and render them initially.
-->And also improving UI for the featured part to make it adjust acc to the current website theme!

Conclusion:
Implementing this part improve UX to some extent.

If you like the idea assign this part to me.
Hoping to contribute soon :).

The image for the idea is attached below

Currently, during the signup process, we're only collecting essential user information such as name, email, and password at backend but we are not storing user's profile pic at database. And after signup or login reset password is also not working.
To address this issue, I suggest integrating multer to handle file uploads and modifying our backend to store user profile information. By implementing this enhancement, users will be able to upload and display their profile pictures and other relevant details on their profile page, enriching their experience on our platform. Additionally we can implement otp verification using nodemailer.

I want to implent a rating feature so that please can rate the product . please assgin me this issue under GSSOC'24

The current version of the SpectaStyle website lacks user authentication, a wishlist component, and a shopping cart ("the bucket"). These features are crucial for personalizing the user experience

👋 Hi @harshalhonde21,

I am Prince,web developer Girlscript Summer of Code. I'll be collaborating with you on preparing your repo for GSSoC'24 Program

Why are these changes required?
After Analysing last year's contributions and feedback it would be great for students to have a couple of standard readme files on the repo to understand what the project is all about and some issues detailing what they can contribute. This will help you to see increased engagement in your repository as well.

As mentioned students get a chance to learn step by step, how to build this project as well as invite mentors to collaborate and add features to this repo. I will generate issues, which will provide guidance on how to prepare your repo for Girlscript summer of code 2024 on 10th May.

This issue will serve as a tracking issue to track all issues related to GSSoC'24. I recommend creating a new branch for every issue and opening a pull request to track changes so we can effectively collaborate with each other and merge changes when you and I feel like those changes are ready to be merged on your primary branch.

If you have any questions or concerns, please feel free to leave a comment on this issue or any of the other issues that are generated.

I look forward to working with you

• #2
• #3
• #4
• #5
• #6

Description:

Our project aims to redesign the footer section to ensure responsiveness across all screen sizes, prioritizing seamless navigation and user engagement. Below are the specific issues to address:

Issues:

1. Responsive Layout Issue: The current footer design lacks responsiveness, causing alignment and layout issues on different screen sizes.

   • Steps to Reproduce:
     1. Open the website on various devices with different screen sizes (desktop, tablet, mobile).
     2. Navigate to any page with the footer section.
     3. Observe how the footer elements behave and whether they adapt well to different screen sizes.
   • Expected Behavior: The footer should adjust its layout and content to fit appropriately on all screen sizes without causing any misalignment or overlap.

2. Navigation Links Accessibility: Some navigation links in the footer are not easily accessible or noticeable, affecting user engagement and navigation flow.

   • Steps to Reproduce:
     1. Visit any page on the website.
     2. Scroll down to the footer section.
     3. Evaluate the visibility and accessibility of navigation links.
   • Expected Behavior: All navigation links in the footer should be clearly visible and easily accessible, facilitating smooth navigation for users.

It's good to display the number of products added to the cart.
It can be displayed by showing the number on the cart icon above

Issue Title: Implement User Visit Counter on Website

Description:
As part of enhancing user engagement and tracking website traffic, we aim to implement a user visit counter feature on our website. This feature will display the total number of visits to the website, providing valuable insights into user activity and popularity of our platform. The user visit counter should be prominently displayed on all pages of the website, ensuring visibility to users and stakeholders.

Acceptance Criteria:

Incremental Counter: The user visit counter should increment by one each time a user visits any page of the website.
Persistent Count: The counter value should persist across page refreshes and user sessions, ensuring accurate tracking of total visits.
Display Consistency: The counter display should be consistent across all pages of the website, maintaining uniformity in user experience.

The Counter should be display on Navbar right hand side.

The project is great! A few UI Enhancements can make it even better!

Issues

• Navbar - right now the links in the navbar change color from blue to purple as they are links.
• Responsiveness - The website's responsiveness is a little off, some adjustments are needed to be made so that it can be better responsive than it is as of now.
• Colours and Fonts - Colours at some places are off key and not related to the website which can be changed. Even the font can be changed.

Solving the Issues

• I will change the css accordingly so the colour does not change.
• I will make the website's responsiveness better, so it will work on all kinds of devices.
• I will change the colours and the font's to the ones which look the best on the website.

Screenshots

for further enhance the user experience on the SpectaStyle website, consider integrating filters for price (allowing sorting from low to high and vice versa), brands, and sizes

I want to add the feature of google authentication your project so that user find easy to login and register please assign me this issue under GSSOC'24

Description:

The application currently lacks the "Forgot Password" feature, which is crucial for user account recovery. This issue is to implement the necessary pages and functionality required for the "Forgot Password" feature.

Tasks:

1. Create Forgot Password Page: Develop a new page or modal for the "Forgot Password" functionality.

   • Steps to Implement:
     1. Design the user interface for entering email addresses for password reset requests.
     2. Implement the frontend components for the Forgot Password page/modal.
   • Expected Behavior: Users should be able to access the Forgot Password page/modal to initiate the password reset process.

2. Backend Logic for Password Reset: Develop backend logic to handle password reset requests and send reset instructions to the user's email.

   • Steps to Implement:
     1. Define API endpoints or backend routes to handle password reset requests.
     2. Implement logic to generate and store password reset tokens securely.
     3. Integrate with email services to send password reset instructions to users.
   • Expected Behavior: Upon submitting a password reset request, users should receive instructions on how to reset their passwords via email.

**improve the style for cards **

please permit me to change .

Description: User can change their profile picture After sign-in, "Once signed in, users have the flexibility to personalize their profile by changing their profile picture, adding a touch of individuality to their online presence."

steps:
Click on your current profile picture.
Choose a new image from your device.
Save your changes to update your profile picture.

The place order page of the website is not responsive and looks something like this on small devices

I will correct the issue and make it responsive so that it looks good on all devices.

Request - Please assign the issue to me, I am a contributor in GSSoC.

Assign this issue to me i want to work on this under ?GSSOC'24

Issue templates are very helpful for a collaboration repo. When users identify a bug or want to add a new feature, you can provide templates so you can collect all the pertinent information you need to fix a bug or add a new feature.

We recommend creating a “Report Bug” and “Feature Request” issue template.
you can refer this: https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository

Some suggested prompts/questions you can add to a “Report Bug” template are:

Briefly describe the bug
What is the expected behavior?
Please provide step by step instructions on how to reproduce the bug
Some suggested prompts/questions you can add to a “Feature Request” issue template are:

Briefly describe your feature request
What problem is this feature trying to solve?
How do we know when the feature is complete?

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/issues/new/choose
Click on Get Started button and copy the template to yours.

As the maintainer of a Collaborate repo, keeping Issues up-to-date will help the student community understand what they can do to contribute. Issues should vary by the easy (update documentation) to the difficult (add a new feature). The more involved you are, the more opportunities there are to collaborate.

Recommendations:

Add issues of varying difficulty to the repo often. you must add the tag GSSoC'24, Level 1, Level2, Level 3 good first issue etc.
How we cacluclate the Scores on Leaderboard: Every PR one point
Level 1: 10 points
Level 2: 25 points
Level 3: 45 points
Try to add some documentation issues as well it would be easy for beginner contributor to explore opensource through your repo.
Generate issues even if you plan on solving them, so the repository appears as active.
Contribute/commit often to the repo so it does not go stale.
Reference https://github.com/Recode-Hive/Stackoverflow-Analysis/issues

0 replies

sanjay-kv
5 days ago
Add templates for issues

Issue templates are very helpful for a collaboration repo. When users identify a bug or want to add a new feature, you can provide templates so you can collect all the pertinent information you need to fix a bug or add a new feature.

We recommend creating a “Report Bug” and “Feature Request” issue template.
you can refer this: https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository

Some suggested prompts/questions you can add to a “Report Bug” template are:

Briefly describe the bug
What is the expected behavior?
Please provide step by step instructions on how to reproduce the bug
Some suggested prompts/questions you can add to a “Feature Request” issue template are:

Briefly describe your feature request
What problem is this feature trying to solve?
How do we know when the feature is complete?

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/issues/new/choose
Click on Get Started button and copy the template to yours.

Description:

We propose integrating wishlist functionality across all products, enabling users to conveniently save and revisit desired items. This enhancement aims to elevate user experience by providing seamless item tracking and fostering engagement. Below are the tasks required to implement this feature:

Tasks:

1. Create Wishlist UI Components: Develop UI components to allow users to add items to their wishlist and view/manage their wishlist.

   • Steps to Implement:
     1. Design the UI elements for adding items to the wishlist and viewing/managing the wishlist.
     2. Implement frontend components for adding items to the wishlist and displaying wishlist items.
   • Expected Behavior: Users should be able to add products to their wishlist and view/manage their wishlist seamlessly.

2. Backend Logic for Wishlist Management: Develop backend logic to handle wishlist functionality, including adding/removing items from the wishlist and retrieving wishlist data.

   • Steps to Implement:
     1. Define API endpoints or backend routes for managing wishlist operations.
     2. Implement logic to add/remove items to/from the wishlist and retrieve wishlist data for users.
   • Expected Behavior: Backend should support CRUD operations for wishlist items and provide necessary data to frontend for wishlist management.

3. Integrate Wishlist Functionality Across Product Pages: Modify product pages to include options for adding products to the wishlist.

   • Steps to Implement:
     1. Update product page UI to include a button or option for adding products to the wishlist.
     2. Integrate frontend functionality to add/remove products to/from the wishlist directly from product pages.
   • Expected Behavior: Users should be able to add/remove products to/from their wishlist directly from product pages.

Description:

We propose transitioning from modal displays to dedicated individual product pages for a more immersive and informative user experience. This change aims to streamline browsing, provide comprehensive details, and enable personalized features, aligning with industry standards and enhancing user satisfaction. Below are the tasks required for this transition:

Tasks:

1. Design Individual Product Page Layout: Design the layout and structure of individual product pages to provide comprehensive product details and a seamless browsing experience.

   • Steps to Implement:
     1. Define the essential elements and information to be included on individual product pages (e.g., product images, descriptions, specifications, reviews).
     2. Design the layout to ensure easy navigation and accessibility of product details.
   • Expected Behavior: Individual product pages should offer a visually appealing layout with all necessary product information accessible to users.

2. Develop Individual Product Page Components: Implement frontend components for individual product pages to display product details and enable interactive features.

   • Steps to Implement:
     1. Create React components or templates for displaying product images, descriptions, specifications, and reviews.
     2. Integrate components with backend APIs to fetch and display product data dynamically.
   • Expected Behavior: Users should be able to view comprehensive product details and interact with features like image zoom, product variants, and reviews on individual product pages.

3. Update Navigation and Routing: Modify navigation menus and routing to direct users to individual product pages instead of modal displays.

   • Steps to Implement:
     1. Update navigation menus and links to point to individual product pages.
     2. Configure routing to handle requests for individual product pages and load the corresponding product data.
   • Expected Behavior: Clicking on product links or navigating through product categories should lead users to dedicated individual product pages.

Currently, I have identified two key areas for improvement:
Issues:-

1. Variable Size Image Display: The image size of the product cards is not fixed, leading to inconsistency in the display of images. This can be addressed by modifying some CSS properties of the card to enforce fixed dimensions for the images.

2. Adding "View More" Option: To enhance user interaction and navigation in the product section, we propose adding a "View More" option. This feature would allow users to explore additional product details beyond what is initially displayed on the page.
   To achieve these enhancements, we plan to implement the following solutions:
   Solution:-

3. To address the variable size image display, we will modify the CSS properties of the card to enforce fixed dimensions for the images.

4. To add the "View More" option, we will integrate query search functionality in the fetch function of both the frontend and backend. This will enable users to fetch additional products dynamically as needed.

I believe that these enhancements will contribute positively to the overall user experience of our project.

Assignee: Assign this issue to me

This issue is to introduce a dark mode feature on our website to provide users with an alternative viewing option that is easier on the eyes, particularly in low-light environments. The implementation will involve updating the website's stylesheets to support a dark color scheme, ensuring readability and accessibility are maintained across all pages and elements. This enhancement aims to improve user experience and align with current design trends.

Issue: In Mobile View Products Card is Not Responsive

Description:

The products section in home is currently not responsive.

Proposed Solution:

Investigate the current CSS styles and media queries related to the Product page. Make necessary adjustments to ensure that the Product pager is responsive and functions correctly on mobile devices.

can you please assign me this issue?

the overall look of the website can be made to look more professional and eye catching by switching fonts and colors

Issue:

There is a typing error in Learn.md file. The error has occurred at line 40 of the Learn.md file

Visual:

The About page of the website has overlapping text from 500px to 905px screen width. This could have a significant impact on users opening the website on a tablet

Images ->

500px -

905px -

Request - Please assign the issue to me, I am a contributor in GSSoC

Description:
When user tries to sign up it asks for a profile picture, but users should be allowed to continue without a profile picture and we should provide a default profile picture.

Uploading SPECTASTYLE and 5 more pages - Personal - Microsoft_ Edge 2024-05-10 21-20-53.mp4…

Steps to Reproduce:
We can provide a default image as profile picture if user doesn't add one.

@harshalhonde21 Please assign it to me so that I can start working

Navbar is not responsive for (width: 1001px - 1170px)

Issues

After signing up on the website, users encounter issues with resetting their password and updating their profile image. When attempting to reset the password, the system fails to send the reset email, and updating the profile picture feature does not function as expected. This issue obstructs users from accessing essential account management functionalities, impacting user experience and site usability.

Solving the Issues

We will create an reset password flow through which user can reset password easily and will use multer for updating profile photo

Screenshots

Issue:

When the window size is 693 x 440 px, the profile and shopping cart buttons have disoriented black borders surrounding them. This issue is faced when these buttons are hovered upon.

Visuals:

Steps to Reproduce:

• Make the browser window dimensions 693 x 440 px
• Hover on the profile or the shopping cart buttons on the navbar

Expected Behavior:

The black border should be removed so that the UI becomes better

When a product is selected the whole webpage is scrolling and cross button is not alligned properly!

The current contact form on the website is not functioning properly. Users are unable to submit their inquiries, and the emails are not being sent. To address this issue, I propose fixing the existing contact form and implementing a new one using web3 forms.

Proposed Solution:
I plan to fix the non-working contact form by identifying and resolving any underlying issues with the form submission process. Additionally, I will implement a new contact form using web3 forms (https://web3forms.com) , which are known for their reliability and ease of integration. The new form will include validation checks to ensure that all required fields are filled out correctly before submission. Upon successful submission, users will be presented with a pop-up confirmation message to indicate that their inquiry has been received.

Additional Information:

• I have experience working with web development technologies, including MERN stack and web3 forms.
• I am willing to take ownership of this issue and work on implementing the proposed solution.
• If there are any specific design preferences or integration requirements for the new contact form, please provide guidance, and I will accommodate them accordingly.

Can you please assign me this issue

Integrating razorpay payment gateway in the application

It is good to fix the profile dashboard.
I can also add the functionality to change the profile picture . Also , update it to the backend.

Issue:

The current color scheme and links' colors are not well-suited to the interface, making text difficult to read against the background.
The number of products added to the cart is not being displayed, leading to user confusion.
The font could be improved for better readability.
Hovering over "Products" in the navbar does not show any options, which could enhance navigation.
The footer needs improvement for better user engagement and information accessibility.

Proposed Enhancements:

Improve the color scheme and link colors for better visibility and readability.
Ensure that the number of products added to the cart is prominently displayed.
Enhance the font selection to improve readability across the site.
Implement product options display upon hovering over "Products" link in the navbar.
Enhance the footer to improve user engagement and accessibility to important information.

Responsiveness -->

I will enhance text readability on the home page as it is not attractive aur fix the link style.
So, Please assign this to me

In GSSoC'24, GitHub Topics will help the discoverability of your project.

I see that you already have great topics on your repository!
I would recommend adding the name of the company like the software you use to build like "vs-code, ghdesktop" to improve your discoverability.

If you are happy with the topics you have, feel free to close this issue. 👍

whenever we visit website there is no direct navigation to cart and profile they are hidden because of wrong margin

can we make them visible so that user interaction could be improvised

We recommend that every repo has a code of conduct. If you don’t feel comfortable creating your own Code of Conduct from scratch we highly recommend using one of the templates provided by GitHub. If you do use a template, please read through the template and ensure that you can and will abide by the Code of Conduct.

Please follow these instructions on how to add a Code of Conduct.

Sample: https://github.com/Recode-Hive/Stackoverflow-Analysis/blob/main/CODE_OF_CONDUCT.md

Implementing Register and login system on the homepage itself rather than browsing to the product and then getting asked.This will enhance user experience

Learn repos should have a LEARN.md file to teach student how to build your project step by step. You can explain how to build your project with text, code snippets, images, or even short (5 minute) long video lessons. As the maintainer of a Learn repo, the LEARN.md file requires you to think critically about how to explain the building of your project and how to also make it engaging. We don't expect you to be an expert teacher, but we would like you to reflect on how difficult it was to get to your level of knowledge, and then provide friendly guidance to help other students to learn.

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/blob/main/Learn.md

Adding an infinite scroll feature would enhance user experience significantly, as it eliminates the need for multiple page loads or a "more" button. This approach allows users to continuously explore content without interruption, making the browsing experience smoother and more engaging.

Hey there,

I noticed a minor but impactful issue with the logo on your app's website. Currently, when users hover over the logo, it displays a text cursor instead of a pointer, and it doesn't redirect to the homepage when clicked.

Steps to Reproduce:

1. Visit the homepage of the website.
2. Hover over the logo in the header.

Expected Behavior:
The cursor should change to a pointer indicating clickability. Clicking on the logo should redirect the user to the homepage.

Actual Behavior:
The cursor remains as a text cursor. Clicking on the logo doesn't redirect the user.

This small fix could enhance user experience and streamline navigation. I'd be happy to contribute to resolving this issue as an open-source contribution.

Looking forward to your feedback.

Best regards,
Apurv Panchal

Login Page UI Issues:

• Issue: The login page UI is not visually appealing and lacks consistency with the overall design.

• Details: Elements such as buttons, input fields, and layout need refinement to enhance user experience.

• Expected Behavior: The login page should have a polished appearance that aligns with the app's design language.

• Priority: Medium

Profile Photo Chanigng Functionality:

• Feature Request: Integrate the ability for users to edit and change their profile photos within the app.

• Description: Users should have the option to upload, crop, and adjust their profile photos directly from their account settings.

• Expected Behavior: Upon selecting the profile photo section, users should be able to upload an image, crop it if necessary, and save the changes.

• Priority: High

Please feel free to provide additional details or suggestions. Contributions and feedback are welcome!

Assignees: Assigned me this issue.