varunkt001 / tomper-wear-ecommerce

E-commerce web-application for selling clothing essentials 😀

E-commerce web-application for selling clothing essentials

tomper-wear.netlify.app

---

This is the frontend of TomperWear build with MERN stack and deployed with Netlify

🚀 Link to Admin panel, Backend

📷 Link to Screenshots

🎥 Link to Video demo

🧾 Description

TomperWear is an E-commerce platform for small bussiness owners who want to expand their bussiness by providing an online purchase solution to their customers.

✨ Features

Client

Users shopping through this platform enjoys following features:

• User authentication using google firebase.
• Secure payments via stripe.
• Users can change their username and display image.
• Users can filter products on various parameters.
• Users can sort products according to price and name.
• Users can add products to cart.
• Users can order products by providing their shipping information and card details for payments.
• Users can view their order's status and their previous orders.
• Users can review the products (or update their previous reviews) and benefit other customers.
• Users can send feedbacks to the owner.
• Responsive for all screen sizes.

Admin

The admin panel of TomperWear contains three classes of admins:

1. Super privileged admin Super privileged admins are the topmost in the hierarchy. They have the following permissions:

• Can view, create, update, and delete admin users.
• Can view, create, update, and delete products.
• Can view orders and update their status.
• Can delete orders.

This is privilege is ideal for the owner(s) of the bussiness.

2. Moderate privileged admin Moderate privileged admins comes below Super privileged admins. They have the following permissions:

• Can view, create, update, and delete admin users.
• Can view, create, update, and delete products.
• Can view orders and update their status.
• Can delete orders.

This is privilege is ideal for the manager(s).

3. Low privileged admin Low privileged admins are the lowermost in the hierarchy and have the least amount of privileges. The have the following permission:

• Can view, create, update, and delete admin users.
• Can view, create, update, and delete products.
• Can view orders and update their status.
• Can delete orders.

This is privilege is ideal for the delivery-agent(s).

Here is a table dipicting the admin privileges for better clarity

	Admins				Product				Orders
	view	create	update	delete	view	create	update	delete	view	update	delete
Super	✔	✔	✔	✔	✔	✔	✔	✔	✔	✔	✔
Moderate	-	-	-	-	✔	✔	✔	✔	✔	✔	✔
Low	-	-	-	-	-	-	-	-	✔	✔	-

⚙ Tools and Technologies used

Client

1. React.js
2. React-icons
3. Styled-Components
4. Firebase
5. Stripe
6. Formspree

Admin panel

1. React.js
2. Chakra-ui
3. React-icons

Backend

1. Node.js
2. Express.js
3. MongoDB
4. JWT
5. Cloudinary
6. Bcrypt.js
7. Stripe

🛠 Installation and setup

1. Clone the repo to your local machine.

2. Install the required dependency for server using :

   npm install

3. Create a .env file and copy-paste the contents of .env.sample in it.

4. Start the dev server using :

   npm start

🏎 Creating production built

1. Create a production ready react app using the command :

   npm run build

🤝 Test user credentials

E-mail	Password
[email protected]	bob1212
[email protected]	test1212

🙌 Open souce programs

GirlScript Summer of Code 2022 (GSSoC'22)

🙌 Other events

Awarded as the Best Web App in Winter Projects organized by GDSC and AASF, IIITM, Gwalior

😎 Team Members

Varun Kumar Tiwari 2020IMT-112 LinkedIn Github

🙌 Thanks to all the contributors

⚖ License

MIT

(If you liked the project, give it star 😃)

tomper-wear-ecommerce's Issues

Feature Request: Customize the login page

Is your feature request related to a problem? Please describe.

I want to customize the login page and will be adding some hover effects etc.

Describe the solution you'd like.

NA

Additional context (if any)

Na

Bug: Improper error message at forgot password place

What happened?

User must get a proper error
message like
" USER NOT REGISTERED" while
submitting an invalid email id at
forgot password page but they get a very bad error message.

How can we reproduce this bug?

It happens when user enters an email address that is not registered.

Additional context (if any)

Please assign this task to me.

Urgency (Optional)

High priority

Backend Routes and Models.

Describe your issue.

I will create a userModel according to the details in the signUp form for now later more fields can be added, accordingly the entries will be added to the user colletion.
Then I will also create login and register API endpoints at the backend where I will also connect to the database(locally for now).
I wish to work with the backend part.

Participant under Gssoc'22.

Screenshots (if applicable).

No response

Additional context (if any)

No response

Feature Request: Add The Feature for Hide/Show Password.

Is your feature request related to a problem? Please describe

hey @varunKT001, what I am thinking is to add the hide/show feature in the password? What do you say? Let me Know.

Describe the solution you thought

Without any disturbance of full code, I will just small code for this by adding icons for both the options wherever you provided the feature of entering a password.

Additional context (if any)

No That's it about what I'm thinking

Also, I'm a GSSOC'2022 participant, Let me know If you are okay with it If Yes then please assign this to me.

Thank You

Feature Request: Adding hover effect on home page slides

Is your feature request related to a problem? Please describe.

Hey, I am a GSSoC22 contributor, would be glad to contribute in your project
It would look more dynamic if you allow me to add hover effect on these 3 slides

Describe the solution you'd like.

The solution would make them dynamic

Additional context (if any)

No response

Bug: Logging in should be required before filling the cart

What happened?

I think before starting feeling the cart, the user must log in.
Because it can happen that some user just surfed the website and added items to the cart but didn't purchase/log in.
Then when another person will log in, then those previous items will get added to his cart.

How can we reproduce this bug?

We can keep a button of login in /cart if user isn't logged in

Additional context (if any)

I am contributor at gssoc'22
Please assign this task to me

Urgency (Optional)

No response

Search bar is needed at navigation bar

Removing routes display in about, checkout and products pages.

Describe your issue.

I think there is no need of displaying a current page route in about, products and checkout page.
We have not displayed the route in /orders page and it is looking nice but in case of /about, /products and /checkout pages, we are displaying the route in too much big font which is grabbing attention of user.
Instead we can give some background colour to our Navbar. It will look nice.

Screenshots (if applicable).

Additional context (if any)

I am contributor at gssoc'22
Please assign this task to me.

Feature Request: Back to top button

Is your feature request related to a problem? Please describe.

Hi
While going through the Home page and Product page, I find out that there is no back-to -top button on these pages of the website.

I feel it is a serious feature which needs to be implemented as soon as possible.
I want to work on it and add a back-to-top button using my frontend skills under the GSSoC22 contribution.

Describe the solution you'd like.

Add a Hovering effect and transition effect on Go to Top button of Resourse and product Page

Additional context (if any)

No response

Feature Request: Create a better footer

Is your feature request related to a problem? Please describe

The current footer is pretty basic:

Create a new footer strictly following the design provided.

You have to follow this design:

Use the following color variables:

	css-variable
Background	--clr-black
Grey text	--clr-grey-7
Brown text	--clr-primary-5

These CSS variables are defined in the src/index.css file. You can use these variables in the components.

Social media icons:
You have to use react-icons for the social media icons.

Describe the solution you thought

You may add all the code in the same file, but that would be difficult to maintain.

My suggestions:

1. Add the data for the social media and the links in the src/utils/contants.js file. You can get an idea about what to do by looking at some already added data in the file.
2. Import the values and use them inside the component.

Additional context (if any)

Please make sure that the footer is responsive for all screen sizes

adding animation to home page

Describe the bug

Steps to reproduce the behavior

Expected behavior

Screenshots (if applicable)

Additional context (if any)

Feature Request: Add confirm password field

While registering it may happen that the user accidentally typed wrong password

We can add a Confirm password field

I am gssoc'22 contributor.Please assign this task to me

Thank You

Bug: No check for mobile number in checkout

While checking out there is no check if mobile number is 10 digits or not this can be improved. Please assign the task so I can work on it.

Feature Request: Adding issue forms for the repo

I want to add a few issue forms so that it will be convenient for new contributors to open issues. There are already issue templates for this project but they are deprecated now, issue forms instead work way better. I plan to create Bug Report and Feature Request forms.

The Bug Report issue form will have the following fields

• Description of the bug
• How to Reproduce
• Expected behavior
• Urgency indicator
• Desktop Info (OS, Version, Browser, etc):

The Feature Request issue form will have the following fields

• Is your feature request related to a problem? Please describe.
• Describe the solution you'd like
• Describe alternatives you've considered

Feature Request: adding animation to homepage :

I am a participant of GSSoC22 and request to add animation in buttons ,images and slides

Feature Request: Existing password needed while changing password

Is your feature request related to a problem? Please describe.

I will never like that someone changes password of my account.
In /profile route there is a provision for changing the password.
To change the current password, user must enter the existing password, If it doesn't match then password should not change.

Describe the solution you'd like.

We should take current password as input from user.
if it matched ,let the user change the password, else he/she can't.

Additional context (if any)

I am contributor at gssoc'22.
Please assign this task to me

Feature Request: Zoom in Effect to See Particular Product in Detail

Is your feature request related to a problem? Please describe.

Users would love to watch more detailed images by hovering them on the image. The same feature is available on different e-commerce applications where a user can hover on a product image to see it in detail. I think it would enrich the user experience.

Describe the solution you'd like.

When we hover on any image in that particular product, we would be able to see more details of the product. Just like in Flipkart, if we hover on any image in a particular product, we get to see a more precise and detailed image of the product.

Eg -

Additional context (if any)

I would like to work on it as GSSoC '22 contributor.

Feature Request: Social media icons

Is your feature request related to a problem? Please describe.

If we add some attractive social media icons then it will look great

Describe the solution you'd like.

I want to take this issue and add social media icons on footer of the page

Additional context (if any)

I want to work on this under GSSOC2022. Can you assign it to me.

Title: Compress Images for Better Page Speed and User Experience

Describe your issue.

Since I was working on another issue of creating a better footer, I noticed that it takes lots of time to reload the site due to extreme high-quality images on the page. Both of the images on Frontpage take around 9 MB in size. It's a huge size for images as it will hamper the user experience while surfing the site.

We can compress both images so that they will load faster. Could I work on it for GSoC'22?

Screenshots (if applicable).

Additional context (if any)

No response

Bug: Search Bar Functionality To Filter Out Projects based on names

Describe the Bug

To add the search bar functionality to filter out products. In the sidebar, of the filter category, the search bar should allow users to search for products when there is a large number of products to avoid the tedious task of scrolling for their product.

Steps to reproduce the behavior

On navigating to "/products" there is a search bar at the sidebar which at present moment doesn't give any search results.

Expected behavior

On searching any value that matches the product's name it will filter out the data and display the results, thus saving a lot of time.

Now its not showing any result, I would like to work on it and make it work

Kindly assign this issue to me, under GSsoC22

Feature Request: Loading spinner when button is disabled

Is your feature request related to a problem? Please describe.
Currently while loading, the then is disabled and its opacity is reduced:

Change it to something like this when loading:

Describe the solution you thought
You may opt for any solution you are comfortable with. Just make sure that whatever you implement is maintainable and does not break any existing functionality.
My suggestion would be to create a global button component accepting all the required props and make a check inside the button if the loading state is true.

Additional context (if any)

• Make sure you don't change anything for the src/components/StripeCheckout component for this issue.
• You can use the following resource for getting an animated loader SVG: loading.io

Feature Request: Toggle Password visibility while changing the password.

Is your feature request related to a problem? Please describe.

It is necessary for the user to know what password he/she has entered.
For this, there must be a button which toggles its visibility.

Describe the solution you'd like.

We can use react hook useState for implementing this functionality.

Additional context (if any)

I am contributor at gssoc'22.
Please assign this issue to me.

Bug: Price range is not having a lower limit

Describe the bug
I think it will be good if it also has a lower limit in price range while filtering, as users can choose their range according to their budget.
Steps to reproduce the behavior

Expected behavior
It will have both lower and upper limit
Screenshots (if applicable)

Additional context (if any)

Feature Request: User must be able to click on product title at products page and go to product details page .

Is your feature request related to a problem? Please describe.

It is frustrating for a user when he is not able to access the product details page to confirm the details of the products present in his cart. Users must be given the functionality to access product details from the cart page.

Circled part should be clickable.

Describe the solution you'd like.

User must be able to click on product title at products page and go to product details page . It will smoothen the shopping experience for users

Additional context (if any)

Please assign this task to me.

Feature Request: Adding invoice pdf

Is your feature request related to a problem? Please describe.

I would like to have the ability to download invoice for purchases.

Describe the solution you'd like.

Adding button in the orders page for individual purchases to download invoice

Additional context (if any)

No response

Bug: When nav-bar is opened in small screen, user can still scroll down the homepage hidden behind navbar.

What happened?

I opened nav-bar in my mobile, but was able to scroll down homepage directly from opened nav-bar.

How can we reproduce this bug?

Open this project on your mobile. At homepage open nav-bar, then try scrolling. Close nav-bar you will notice homepage has scrolled down.

In this screenshot you can see scrollbar at right of navbar being scrolled down.

Additional context (if any)

No response

Urgency (Optional)

Medium priority

Feature Request: Make the cards Responsive

Is your feature request related to a problem? Please describe.

In above image we can make the cards named - Mission, Vision and History as responsive.

Describe the solution you'd like.

I will be installing vanilla-tilt.js file and also calling it which has many pre-defined js functions that have many interactive and stunning functions that can convert static card view to a much dynamic card view.

Additional context (if any)

Not any thing much for now!!!

Title: Updating react router to v6

Describe your issue.

Currently the project uses react router v5, i propose to update it to latest v6.

Screenshots (if applicable).

No response

Additional context (if any)

No response

Implement a price filter but with a price range.

Is your feature request related to a problem? Please describe.

The price filter currently has only a slider with a upper price tag, but rather that could be a filter with a range just like on Amazon making it easy to search by the end users.

Describe the solution you'd like.

Additional context (if any)

I myself would like to work on this issue as a GSSOC '22 contributor.

Feature Request: Want to add Search functionality

I want to add search functionality to the search bar based on names in the filter and would filter the data. Currently its not working,please assign this issue to me under GSSoc 22

Bug: Spelling mistake

In the about page of the website, in the last line, it is given 'react' instead of 'reach'

*I would like to modify it

'reach'

**I would like to solve this issue under GSSOC'22 @varunKT001 **

Feature Request: Enhancing style of scroll bar

Is your feature request related to a problem? Please describe.

The scroll bar doesn't match the theme of the website

Describe the solution you'd like.

I would like to add customized scroll bar for this website

Additional context (if any)

No response

Bug: Shipping Address Page Missing Out Certain Checks

What happened?

While entering the Shipping address, certain checks like Phone Number check (10-12 digit number) and Zip Code should allow only Numeric values are missing out.

How can we reproduce this bug?

1. Login with the test credentials
2. Add some products to the cart
3. Proceed to the Checkout page
4. Now it will ask you to enter the Shipping address
5. You can write alphabetic, Special-Characters, etc in Zip and Phone number box.

Additional context (if any)

Can I work on it for GSSoC '22? This issue won't take much time to be solved.

Urgency (Optional)

Low priority

Feature Request: adding animation to home page

Is your feature request related to a problem? Please describe.

Describe the solution you thought

Additional context (if any)

Feature Request: Add a image magnifier

Is your feature request related to a problem? Please describe.

When we hover around the product to get a good look, if the image provided is not big enough then we can't notice the details .

Describe the solution you'd like.

I want to add a magnifier which would enlarge the image when hovered over providing a clear clarity for the customer.

Additional context (if any)

Issue is raised under GSSOC'22

Feature Request : Adding liked products to wishlist

Feature Description

In the site the products are directly added to cart but if user likes the product he/she can add that to the Wishlist.

Solution

Creating a wishlist component for listing down all the products present in the wishlist

Feature Request: Adding Dark Mode

Is your feature request related to a problem? Please describe.

So many users have habit of using Dark mode.
So its very uncomfortable for them to use light mode.

Describe the solution you'd like.

We can create a button on top-right corner which will toggle the theme of our website.

Additional context (if any)

I am Contributor at GSSOC'22.
Please assign this task to me.

Feature Request: User must not be able to write the review without buying it once.

Is your feature request related to a problem? Please describe.

It will hamper the sellers if users start posting bad reviews about their products even without buying it once.

Describe the solution you'd like.

Before publishing a review of the product it should be checked in the backend whether user has purchased the product once or not.

Additional context (if any)

Please assign this task to me.

Title: The Feature Product section is not responding

Describe your issue.

The page is not responding

Screenshots (if applicable).

No response

Additional context (if any)

No response

Feature Request: Image box section as a link

*Not working image box section as a link, I think if it will work, if it will work all over the box section as a link then it would more friendly.

Title: Responsiveness issue on Home/ Cart page

Describe your issue.

Delete button getting out of screen width when an item is added to cart.

Screenshots (if applicable).

Additional context (if any)

Decreasing Font size for small screen size will fix this issue.

Feature Request: Change footer icon colors and apply hover effect on footer links

Is your feature request related to a problem? Please describe.

Currently, we can see the dark footer background through the icons, which looks odd 😕

Describe the solution you'd like.

• Change the icon color of all footer icons to var(--clr-primary-5)
• Change the text color of the footer links and the bottom-most text to var(--clr-grey-6)
• Apply hover effect on the footer links: Change text color to var(--clr-primary-5) on hover

Additional context (if any)

No response

Authentication with Email

Please assign this task to me