- π¨ Modern, minimalist design
- π± Fully responsive layout
- π Real-time cart management
- π³ Secure checkout process
- π Advanced product filtering
- πΌοΈ Dynamic image galleries
- π Smooth animations
- π User authentication
- π Wishlist functionality
- π Product comparison
- Framework: Next.js 14
- Styling: Tailwind CSS
- Animations: Framer Motion
- State Management: Context API
- Icons: Lucide Icons
- Form Handling: React Hook Form
- Image Optimization: Next/Image
- Type Safety: TypeScript
-
Clone the repository:
git clone https://github.com/usama7871/hackathon-2.git cd hackathon-2
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
funiro/
βββ src/
β βββ app/ # App router pages
β β βββ about/ # About page
β β β βββ page.tsx # About page component
β β βββ blog/ # Blog pages
β β β βββ [slug]/ # Dynamic blog post pages
β β β β βββ page.tsx # Blog post component
β β β βββ category/ # Blog category pages
β β β β βββ [category]/ # Dynamic category pages
β β β β β βββ page.tsx # Category page component
β β β βββ tag/ # Blog tag pages
β β β βββ [tag]/ # Dynamic tag pages
β β β β βββ page.tsx # Tag page component
β β βββ cart/ # Cart page
β β β βββ page.tsx # Cart page component
β β βββ checkout/ # Checkout pages
β β β βββ page.tsx # Checkout page component
β β β βββ success/ # Checkout success page
β β β βββ page.tsx # Success page component
β β βββ compare/ # Compare page
β β β βββ page.tsx # Compare page component
β β βββ contact/ # Contact page
β β β βββ page.tsx # Contact page component
β β βββ shop/ # Shop pages
β β β βββ [productId]/ # Dynamic product detail pages
β β β β βββ page.tsx # Product detail component
β β β βββ page.tsx # Shop page component
β β βββ wishlist/ # Wishlist page
β β β βββ page.tsx # Wishlist page component
β β βββ layout.tsx # App layout
β β βββ page.tsx # Main entry point
β β βββ globals.css # Global styles
β βββ components/ # Reusable components
β β βββ AdminDashboard.tsx # Admin dashboard component
β β βββ Auth/ # Authentication components
β β βββ Blog/ # Blog components
β β βββ Cart/ # Cart components
β β βββ Checkout/ # Checkout components
β β βββ Contact/ # Contact components
β β βββ Home/ # Home page components
β β βββ Shop/ # Shop components
β β βββ common/ # Common components
β β βββ ... # Other components
β βββ context/ # Context providers
β β βββ CartContext.tsx # Cart context
β β βββ WishlistContext.tsx # Wishlist context
β β βββ CompareContext.tsx # Compare context
β βββ data/ # Static data
β β βββ blogContent.ts # Blog content data
β β βββ products.ts # Product data
β βββ types/ # TypeScript types
β β βββ product.ts # Product types
β β βββ blog.ts # Blog types
β β βββ cart.ts # Cart types
β βββ utils/ # Utility functions
β βββ formatPrice.ts # Price formatting functions
β βββ stripe.js # Stripe utility functions
βββ public/ # Static assets
β βββ Logo.png # Logo image
β βββ Pictures/ # Additional images
βββ tailwind.config.js # Tailwind configuration
βββ next.config.mjs # Next.js configuration
βββ package.json # Project metadata and dependencies
βββ .eslintrc.json # ESLint configuration
Tailwind CSS configuration includes:
- Custom colors
- Extended animations
- Custom plugins
- Responsive breakpoints
- Mobile-first approach
- Breakpoints:
sm
: 640pxmd
: 768pxlg
: 1024pxxl
: 1280px2xl
: 1536px
- Optimized for fast loading times
- Uses Next.js for server-side rendering (SSR) and static site generation (SSG)
This project is licensed under the MIT License.
Contributions are welcome! Please feel free to submit a pull request.
For any inquiries, please contact us at kusamakhan1234@gmail.com.