pooranjoyb / popshop

eCommerce Shoping Platform (with Admin Panel) based on ReactTS & Daisy UI, integrating Supabase as BaaS

🌟 PopShop 🌟

Description 🔖

PopShop is an eCommerce Website based on React TypeScript and Daisy UI, integrating Supabase for Backend and Database.

The main aim of this project is to foster a collaborative community of creative individuals, where ideas grow and innovation flourishes. Whether you're a developer, designer, or simply someone passionate about projects, this repository provides an ideal platform to display your work and connect with others who share similar interests.

Sneak Peak of the project : Youtube

Click here to view the production deployment Username : admin & Password : Admin@123

Click here to view the development deployment Username : admin & Password : Admin@123

Key Features 📌

• eCommerce Shoping Website
• User Authentication
• Seamless User Interface
• Open Source Community

Tech Stacks used 💻:

• React TS
• TypeSCript
• Supabase (A Firebase Alternative)
• Daisy UI (A component library for Tailwind CSS)
• Tailwind CSS
• HTML, CSS, JS

Getting Started 🚀

Follow the guidelines below to contribute to BeatBridge.

Guidelines for Contributions

• Ensure that your component is well-documented and follows best practices.
• Use meaningful names for your components and keep the codebase clean and organized.
• Write clear and concise commit messages.
• Be kind and respectful to other contributors.

For more details read CONTRIBUTING GUIDELINES

Code of Conduct ⚡

Please review our CODE OF CONDUCT before contributing.

License 🗒️

This project is licensed under the MIT License

😍 Our Valuable Contributors

Thanks to these wonderful people ✨

💙 Happy Contributions !! 💙

popshop's Issues

Issue in Cart functionality

Description

When I am increasing the quantity of one item than it updates quantity of other items also, and the subtotal is also not updating.

Reproduce Issue

Open Cart Section then try to increase or decrease the quantity of items.

ScreenRecording

Screen.Recording.2024-05-12.at.3.49.25.PM.mov

I am a GSSOC'24 contributor. Can you please assign this issue to me? @pooranjoyb
Please also mention GSSOC and level labels.
thank you.

[Feat] : Profile Page

Describe

There is no profile page or modal which gives user info.

Please assign me this issue under GSSOC'24

Regarding Styling & Alignment

Hi @pooranjoyb I found some issues in styling and alignment

Description of Issue 1

When I am clicking on cart section then the popup window is hiding the text.

Reproduce Issue
Open in Mobile view to view issue.

Screenshot

Description of Issue 2

The alignment of Footer is not in centre.

Reproduce Issue
Open in Mobile view to view issue.

Screenshot

Description of Issue 3

When I am clicking on Profile section then the popup window is hiding the search bar.
Reproduce Issue
Open in Mobile view to view issue.

Screenshot

I am a GSSOC'24 contributor. Can you please assign this issue to me? @pooranjoyb
Please also mention GSSOC and level labels.
thank you.

Clothes Size Options Not Functional

Description: When you try to click on the given size options : XL, L, M, S, there is no response.

Expected Behavior: Clicking on size options should trigger the selection process, allowing users to choose their preferred size effortlessly.
I am a GSSOC'24 contributor. Can you please assign this issue to me? @pooranjoyb
Please also mention GSSOC and level labels.
thank you.

Adding an arrow to scroll to top

I want to add an arrow which on clicking will return to top of the page
@pooranjoyb Please assign this issue to me under GSSOC 2024 and add necessary labels to it.

Updating Twitter Logo

React-Redux Setup for Authentication

Tasks

• Setup React-Redux for the Project
• Maintain Proper folder structure inside utils
• Login/Logout (Logout button doesnot exist in Navbar so Add it lol :))
• Maintain the States, User shouldnot be able to redirect to /home without authorization.
• Replace the Profile to the username of the Logged in User.

[Bug] The submenu in profile section

It should show Logout when it's logged in

Can you please assign this to me?

Go to Login page UI design enhancement

this page has not designed yet

Basically Cart is static adding items to cart deleting items and sending products details to the backend ...

If it is possible then i would love to add this functionality where we would click add to cart then we would add/remove and update items
to cart using redux. what im thinking is to use redux and redux persist when users add items to cart it would immediately changes the ui if everything is fine then would send data to the backend else error dilaog would appear or something like toas type which would tell that we failed to update .... please do tell me if something efficient or more accurate approach is there according to you Thank you ..

The login and signup by google is not functioning

please assign me under GSSoC'24

Authentication State Needed to be persisted.

As when we are logged in and we are going through one routes to another it works fine but when we manually type in different routes browser again send the request to backend(react restart) and then redux is getting reset. This is what i observed if something other than this is happening then do tell me and also assign me this task....
Thank you

want to create issue and PR template

issue and pr template is helpful for contributor and also as well as owner

please assign me under GSSoC'24 i want to create it

[FEATURE] Add 'Favourites' Button and Page

Creating 'Favourites' Page will enhance user experience where users can add the products to their favourites just in one click. Which can later on moved to cart as oer user's choice.

Would like to work on this issue under GSSOC '24

Animation in HomePage

@pooranjoyb ,By adding animation at Homepage we can enhance User-experience.
Kindly asiign this issue to me.
Here is the sample video provided for , how animation look like:

recording-2024-05-13-09-46-11.mp4

View more Button in the home page is not Functional

i want to work on this of "view more" button, it has no functionality. I would like to add functionality (which will redirect customers to new page showing more option to customer).

Screen.Recording.2024-05-11.at.7.10.38.PM.mov

Enhancements for improved and cohesive user journey and password security

Creating pages for non-functional links in the footer to streamline navigation.
Enforcing password restrictions so that users create more secure passwords
When we view cart contents, we cant go back to product page when clicking on it, so we need to enable redirection from the cart to respective product pages to enhance user experience.
Implement a responsive design strategy to ensure optimal viewing and interaction across devices.
Redesign the navbar to adhere to UI principles and improve overall aesthetics.

[Enhancement] : Add Proper Meta Tags, Description, and Missing Icon

Hello @pooranjoyb and @Mahitej28

I've conducted a review of website and identified areas where we can improve its search engine optimization (SEO) on a basic level. As someone experienced in contributing to open-source projects, I'm confident in addressing these aspects effectively.
Let's work together to enhance the SEO performance of our website for better user engagement and brand representation by adding favicon titles , description.

Looking forward to your input and collaboration!
Please assign me this under GSSOC'24

Adding a navbar

A navbar could be added which includes the sections as Home, New collections , Our Products and Footer(Consider this under Gssoc'24)

Feat: Automate greeting using Github bot 🤖

Describe the feature

As the contributor count rises on the repo, it becomes increasingly challenging for maintainers to personally greet and encourage each contributor for their valuable input. Equally important is the reminder for them to review the project's contribution guidelines.

Add ScreenShots

PR greeting message ⬇️

ISSUE greeting message ⬇️

Record

• I agree to follow this project's Code of Conduct
• I'm a GSSoC'24 contributor
• I want to work on this issue

Bug when user is logged in and if he goes back login/sign up page appears

we need to use conditional routing if users once logged in cannot go to login in page

Cart Functionalities- + and -

On Clicking + it increases
On Clicking - the count decreases
It should happen separately for each item,
Solution: This we can achieve by passing the product name(hard-coded) as props.

Can you please assign this issue to me?

Zod Validation for User Auth

Tasks

• Create a file called schema.ts inside the /src/utils/ directory and create the schema for both Sign up and Login
• Refer to https://zod.dev for more information.
• Validate the Form using the Zod validation rules
• Remove the Alerts and Display the Validation Errors just below the Form Field.

Create the PR to dev

Implement forget password

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.

Adding carousel or pagination to the our products section

Change the favicon of the page, with Title also (there should be more meta data included)

Adding a styling feature where one can style and select clothing's by combining

I would like to add a feature where one can combine different clothing's and style it by their perspectives.
Or maybe i can try to add feature where one can get recommendations to buy item with another item to make it appealing and more selling. Please assign me this issue under GSSoC'24

[FEATURE] Add Notification Toasts when Products are Added or Removed to Cart

When customer adds a product to cart, a toast should appear at the right top area that 'Product has been added' and also when the product is removed from cart too. This gives a sense of confirmation to customers that the product has been successfully added/removed.
Would request you to assign this task to me under GSSOC '24
We can do it in below page:

Footer Navigation

Description

Navigation issue in footer section links of services

[Bug] : Cart Page Quantity

• If the Cart Pages Quatity can be added that is selelcted for the all product quantity also can added.
• If the cart option to solve for the .some , .includes and .filter method to solve the issue..
• please assign me i will ready to make fix the issues..

Screencast.from.2024-05-14.13-18-40.webm

Feat: Implement Animations and Enhance User Experience.

Best Effects on Buttons ,
Transition Effects while scrolling,
hover and animations ,
Please assign me this issuse @pooranjoyb
i'll be happy to resolve it asap.

Bug: Login with Google button is not working

Hey there, Login with google button is not working in login page and sign up page. I would like to work on this issue. could you assign this issue to me under GSSOC'24 label ?

Integration of wishlist across all the products

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.

[FEATURE] Add Filtering and Sorting Option on the Product Page

To make the products page more easy for customers, adding the filtering and sorting option at the left of the page would be a great idea. Customer can filter the products by size, price, gender, etc. which would be easy for them to find the specific products.
I request you to assign this task to me under GSSoc24.

Adding the navbar to the webpage

Animated loading page

I want to add an animated loading page something like this at the beginning of the page.

Filter feature on the products page

Tasks :

• Define the criteria by which users can filter products (e.g., price range, category, brand).
• The modal should popup upon clicking the Filter icon.
• Use <IoFilterCircleOutline /> from react-icons
• Use the responsive modal from here

[FEATURE] Add 'Buy Now' button and 'Add to Cart' icon on the Products Page

In the below Products Page, there should be a 'Buy Now' Button and 'Add to cart' icon to each product, similar to modern websites.
Customer finds this feature effecient as going into the specific product page and then adding it to cart / buying it, is a bit lengthy process.
I have been working on similar project and can get this done ASAP.
I would like to contribute to this task under GSSOC '24

Homepage is missing an interactive header with a logo

The Home Page looks a bit simple, I can make it more interactive along with a logo. I'm GSSOC'24 contributor, so can you please assign this issue to me?

[Style] : Responsive issue

There is responsive issue at https://pop-shop-github.vercel.app/home/shop

Search functionality is not working

The search functionality is not working as expected.

Steps to Reproduce

1. Go to the products page.
2. Enter the product name that you want to search.
3. Click on search button.
4. Observe the unexpected behavior i.e no products are being shown.

Expected Behavior

After performing a search, the system should display relevant search results based on the entered query.

Actual Behavior

No products are being shown

Correction in routes

Hello @pooranjoyb

I have go through your website entirely
The pages are not loading with corresponding route in url bar. It may confusing the users as well as other developers.

I would like to work on the issue.
Please assign the issue to me

Thanks in advance

Adding Checkout feature using Stripe functionality

I would like to add a feature where one can made payments through Stripe Checkout i have worked on this before too, Please assign me this issue under GSSoC'24

UI fix in Cart `-` & `+` buttons

The Cart Page looks non-functional. I can't add items, neither I can remove. It has a static value of 8 items. I can make it functional.
I'm GSSOC'24 contributor,Can you please assign this issue to me?

Google Oauth for authentication

Using google oauth we will authenticate our login/signup form .

For that i need to have access of database. so for that kindly add me to the project .

My email is [email protected].

UI-Adding Rating to Product Page

We add an UI feature of Star rating in the Products page.
I'm GSSOC'24 Contributor. Can you please assign this issue to me?

test issue

Regarding Website animations

Hi i am Ram #gssoc24
i want to add some cool scrolling animations in your website
tech stack to be used
-aos.js
-tilt.js
@pooranjoyb

Navigation Pages

Hey @pooranjoyb i have looked into the footer navigation options there are some pages missing i'll be creating some pages also i will add navigations for those pages, I would request you to assign this task to me.

Addying forgot password option

I would like to work on this issue