zahramirzaei / online-shop

An E-Commerce project, developed by Nextjs and typescript. styled with Tailwind css and it is fully responsive.

An E-commerce site template, implemented with Next.js and TypeScript. Styled with TailwindCSS. This is one of my portfolios, but I would be pleased if these codes helped others, so I published it as an open-source project. feel free to explore it, and if you need help, ask me. I would respond as soon as possible.

To support me, please create Pull request and give star⭐ to this repository.
I appreciate your support in advance. ❤

         

Technologies • Demo • Features • Pages • Getting started • Contributing • Contact Me

🔧Technologies

       

✨Demo

You can visit and explore in the ZiShop template at ZiShop.vercel.app.

🔥Features

• Using Redux toolkit as state manager
• Using Sanity.io as database
• Fully responsive
• Multi-language (EN-FA)
• Multi-theme (Dark/Light)

📃Pages

• Main (index)
• Login/SignUp
• Products List
• Product Details
• Cart
• Favorites
• About

(BACK TO TOP 🔝)

🚀Getting Started

1. Sign up in sanity.io and get projectId and token

Warning  To work with sanity, people how live in Iran should run VPN.

2. Clone the project

git clone https://github.com/ZahraMirzaei/online-shop.git

3. Install project dependencies

npm install
#or
yarn add

4. Enter your projectId into lib/client.ts
5. Add .env file to root project, and enter your token into .env

NEXT_PUBLIC_SANITY_TOKEN= [ENTER YOUR TOKEN]

6. Go to sanity_onlineshop folder and open new terminal in this path, then

sanity start

open http://localhost:3333 and enter products.

7. Run the development server in project root path:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

🤝Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

💬Contact Me

---

(BACK TO TOP🔝)

online-shop's Issues

add content to contact us page

link it to LinkedIn account and [email protected].

Favorites items removed after reload

Whenever I reload the page, Favorites items will be gone.

add comment section in product pages

add comments section on each product page. it probably takes lots of time and have some sub-tasks.

add functionality to share product on product pages

when users clicks on the share button, they can share the product with others.

add error boundaries for 404 error into project

when entering /anything after the domain, it goes to the category page, this is wrong. it should show a 404 page.

update redux hook

add custom hook for useDispatch and useSelector instead of using type for all RootState.

add dropdown section to search bar

add category and product, in the search bar dropdown and add functionality.

add comment component to use in product pages

to users can leave comments on the product.

Website SEO

Hello, @ZahraMirzaei , sorry for the disturbance. I'm having a problem understanding SEO, please help me with the procedure or guidelines. Thank you

implement rating component ui

rating component to use on product pages.

implement searchbar functionality

Users should be able to search for products by name