A modern, responsive e-commerce store built with Next.js, Tailwind CSS, and JavaScript. It provides a sleek shopping experience with dynamic product pages, responsive design, and easy deployment via Vercel.
- ⚡ Next.js for SSR & SSG
- 🎨 Tailwind CSS for styling
- 🔒 Javascript for logic
- 🖼️ Optimized product image rendering
- 📱 Fully responsive design
- 🛍️ Dynamic product pages
- 🚀 Deployed with Vercel
whatbytes-store/
├── .next/
├── node_modules/
├── public/
├── src/
│ ├── app/
│ │ ├── cart/
│ │ │ └── page.jsx
│ │ ├── components/
│ │ │ ├── Footer.jsx
│ │ │ ├── Header.jsx
│ │ │ ├── ProductCard.jsx
│ │ │ ├── ProductGrid.jsx
│ │ │ └── Sidebar.jsx
│ │ ├── context/
│ │ │ └── CartContext.jsx
│ │ ├── data/
│ │ │ └── products.js
│ │ ├── product/
│ │ │ └── [id]/page.jsx
│ │ ├── favicon.ico
│ │ ├── globals.css
│ │ ├── layout.js
│ │ └── page.js
├── .gitignore
├── eslint.config.mjs
├── jsconfig.json
├── next.config.mjs
├── package.json
├── package-lock.json
├── postcss.config.mjs
└── README.md
Clone the repository and install dependencies:
git clone https://github.com/gyanthakur/whatbytes-store.git
cd whatbytes-store
npm installRun the development server:
npm run devOpen http://localhost:3000 in your browser.
| Page Name | Screenshot |
|---|---|
| 🏠 Homepage | ![]() |
| 📦 Product Page | ![]() |
| 🛒 Cart Page | ![]() |
| 🛒 Footer | ![]() |
Easily deploy with Vercel:
vercel- Fork the repo
- Create a new branch (
feature/your-feature) - Commit changes (
git commit -m 'Add new feature') - Push branch (
git push origin feature/your-feature) - Open a Pull Request
👤 Gyan Pratap Singh – Developer & Maintainer
📧 Contact: gps.96169@gmail.com
🔗 GitHub: @gyanthakur
- Name: Gyan Pratap Singh
- Email: gps.96169@gmail.com
- GitHub: Gyanthakur
- Portfolio: Gyan's Portfolio
Give a ⭐ if you like this project!
Made with ❤️ by Gyan Pratap Singh
If you like this project, don't forget to leave a ⭐ Star on GitHub! 🚀



