A modern summer-themed e-commerce web application built with Next.js 16, React 19, HeroUI & Better Auth
SunCart is a fully responsive e-commerce platform focused on summer essentials — from UV protection sunglasses to portable fans and beach gear. It features smooth animations, secure authentication, and a warm golden amber UI design.
- 🏠 Home Page — Hero banner with Summer Sale 2026 offers, popular products, summer care tips blog section, and top brands carousel
- 🛍️ Products Page — Full catalog of summer essentials with ratings, stock info, categories, and pricing
- 📄 Product Details — Individual product pages with detailed information
- 👤 User Authentication — Sign up & login with Better Auth (email/password)
- 🙍 My Profile — Protected user profile page
- 💫 Smooth Animations — animate.css powered transitions throughout the UI
- 🎠 Brand Carousel — Swiper.js powered infinite brand slider
- 📱 Fully Responsive — Mobile-first layout with Tailwind CSS v4
| Category | Example Products |
|---|---|
| Accessories | UV Protection Sunglasses, Cooling Sports Cap |
| Skincare | SPF 50+ Sunscreen, Aloe Vera After Sun Gel |
| Outdoor | Hydration Water Bottle |
| Lifestyle | Summer Beach Towel |
| Electronics | Portable Mini Fan |
| Travel | Lightweight Summer Backpack |
| Footwear | Waterproof Beach Sandals |
| Category | Technology |
|---|---|
| Framework | Next.js 16.2.9 (App Router) |
| UI Library | React 19 |
| Component Library | HeroUI v3 |
| Styling | Tailwind CSS v4 |
| Animation | animate.css |
| Authentication | Better Auth v1.6 |
| Database | MongoDB v7 |
| DB Adapter | @better-auth/mongo-adapter |
| Slider | Swiper.js v12 |
| Icons | React Icons, Lucide React, Iconify |
suncart/
├── public/ # Static assets
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/ # Auth API routes
│ │ ├── products/ # Products listing & detail pages
│ │ ├── login/ # Login page
│ │ ├── register/ # Register page
│ │ ├── my-profile/ # Protected profile page
│ │ ├── privacy/ # Privacy policy page
│ │ └── page.js # Home page
│ ├── components/ # Reusable UI components
│ └── lib/ # Auth config & utilities
├── next.config.mjs
├── package.json
└── tailwind.config.js
- Node.js
v18+ - MongoDB Atlas account
- npm / yarn / pnpm
- Clone the repository
git clone https://github.com/Morshedul-developer/suncart.git
cd suncart- Install dependencies
npm install- Set up environment variables
Create a .env.local file in the root:
MONGODB_URI=your_mongodb_connection_string
BETTER_AUTH_SECRET=your_secret_key
BETTER_AUTH_URL=http://localhost:3000
⚠️ If MongoDB Atlas connection fails, try switching to Google DNS (8.8.8.8) or use a mobile hotspot.
- Run the development server
npm run devOpen http://localhost:3000 in your browser.
Deployed on Vercel. To deploy your own instance:
- Push your code to GitHub
- Import at vercel.com/new
- Add environment variables in the Vercel dashboard
- Deploy!
Morshedul Islam Nijhum
