Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/101beardo/mytheresa-clone

An e-commerce fully responsive website made using redux Chakra UI with all CRUD operations. Mytheresa is the finest edit in luxury fashion for women, men and kids.
https://github.com/101beardo/mytheresa-clone

chakra-ui crud css css3 ecommerce firebase html javascript react redux responsive responsive-design shopping-cart vercel

Last synced: 3 months ago
JSON representation

An e-commerce fully responsive website made using redux Chakra UI with all CRUD operations. Mytheresa is the finest edit in luxury fashion for women, men and kids.

Awesome Lists containing this project

README

        

# Mytheresa - Luxury Fashion & Designer Shopping Clone
An e-commerce website made using redux Chakra UI with all CRUD operations at admin panel.

Mytheresa is the finest edit in luxury fashion for women, men and kids. We have over 200 of the best international designers, 600 new arrivals each week, fast and reliable delivery, excellent customer service, utmost security and data protection, and free returns and exchanges within 30 days.

Entirely responsive website


Netlify Link

https://luminous-swan-cc6644.netlify.app/


Working Feautres :-
- Entirely responsive Kids Page
- Entirely responsive Life Page
- Entirely responsive Men Page
- Entirely responsive Women Page
- Entirely responsive Landing Page
- Entirely responsive Navbar and Footer part
- All Product page with filtering and sorting features
- Search functionality
- Cart Secion with private routing
- Removing of product from cart using redux
- Wishlist with private routing
- Removing of product from wishlist using redux
- Login for User as well as admin through firebase
- Sign Up for new user through firebase
- Adding new product in admin panel using redux
- Updating the price of the already existing product
- Deleting the product form the backend data through admin panel

Tech Stack :-
- React
- Redux
- Firebase
- Chakra UI
- Javascript
- External Css
- For backend-server deployment we have used Vercel.

Steps to start :-
- npm install
- npm run server for running sever in localhost at port 8080
- npm run start
Now site is infront of you

Team Members :-
- Tarun Sharma
- Shiv Pratap Singh Yada
- Shubham Patel
- Ashish

HOMEPAGE :-


Here is the homepage which is entirely responsive and is made by using Chakra UI

![Homepage](https://user-images.githubusercontent.com/76995063/215413474-5d5820d4-bf83-4a7c-8b95-25b95995829b.png)

Men Page :-


Here is the Men page which is entirely responsive and is made by using Chakra UI

![men](https://user-images.githubusercontent.com/76995063/215414405-da66dc47-aa0f-4d1d-aa5f-6f02899a34fc.png)

Kids Page :-


Here is the Kids page which is entirely responsive and is made by using Chakra UI

![kids](https://user-images.githubusercontent.com/76995063/215414435-e8d185bd-fe03-440c-8559-4edff2e71c64.png)

Life Page :-


Here is the Life page which is entirely responsive and is made by using Chakra UI

![life](https://user-images.githubusercontent.com/76995063/215414790-012b0e40-1d53-4d61-b08e-ebc73757800c.png)

All Products Page :-

This page shows user all the products which are available in the database and user can sort them according to their price from low to high or vice versa. User can search for a specific item by using the search bar.
User can choose the product for a specific brand by clicking on the brand listed on the sidebar also. User can click on any product and he/she will be redirected on single product page
![all product](https://user-images.githubusercontent.com/76995063/215414920-61e4a503-6f14-4c4e-8838-92c537877136.png)

Single Product Page :-

This is single product page where user can see more details about the product and compare the product according to their needs. Further user can add the product in wishlist or in the cart after logging in the website.
![singleProduct](https://user-images.githubusercontent.com/76995063/215415512-21630de9-9f99-464d-b087-0518d7e85916.png)

User can either go directly for purchasing the product or he can add the product in the wishlist as per user wish.
![either](https://user-images.githubusercontent.com/76995063/215417030-01b082cb-1fba-418d-a08a-221ca7ec4e0c.png)

Login Page :-

Here user can login to proceed before purchasing the product, so that in future they can track their order details and track order too. This login
![login](https://user-images.githubusercontent.com/76995063/215415970-71bc4019-f94b-4239-b848-efa5acf5c6d1.png)

Cart Page :-

This is our cart page where user can remove or keep the product, see what's the total price of all products in the cart and can proceed further to checkout page before payment.

![cart](https://user-images.githubusercontent.com/76995063/215418100-e0903953-9d12-4135-833f-d06a740452cb.png)

Address Page :-

Before Checking out user have to fill in the details about his address where he/she wants the product to get delivered. Here we have primarily focused upon the form validation part, if any field is kept empty the user will get to about the mandatory fields.

![address](https://user-images.githubusercontent.com/76995063/215418379-4f0c3e60-c590-4c1e-99ca-bbb67fb7d9e3.png)

Checkout Page :-

Once the user have filled all the details of his/her address they will be redirected to the checkout page so they can verify once more before placing the order so they don't make any mistakes.

![checkout](https://user-images.githubusercontent.com/76995063/215418672-79907f55-de7a-4e9e-95e9-f0f8eb9311fd.png)

Payment Page :-

After checkout Page User will be redirected to the payment page where they have to put 16 digits of pin, 3 digits of cvv and expiry date too otherwise order won't be placed.

![payment](https://user-images.githubusercontent.com/76995063/215418876-8878c657-03a9-41d3-ab92-b7f32dbaab7c.png)

Order Confirmation :-

Once all the details are filled user will get the confirmation of placed order.

![confirmed](https://user-images.githubusercontent.com/76995063/215419282-64d86de3-0c5e-42a5-9c50-53941b030d77.png)

Admin Panel Access :-

Admin would be able to see the icon shown below on navbar after logging in with the specific given admin ID and password.
![admin](https://user-images.githubusercontent.com/76995063/215420106-4d474721-9868-464e-ae4d-7721fb8af7ef.png)

After clicking on admin icon he will be redirected to admin panle page where admin can
- Add new Product in the database
- Delete alredy existing product from database.
- Update the price of already existing product.
![adminpanel](https://user-images.githubusercontent.com/76995063/215421618-e6a5fb84-82c1-4bb1-b249-dbce4accee52.png)