A premium e-commerce website for OWNERSHIP brand t-shirts built with Next.js 15, TypeScript, and modern web technologies.
- Product Catalog - Black and White OWNERSHIP t-shirts with real product photos
- Size Selection - XS, S, M, L, XL, XXL with size guide
- Shopping Cart - Add/remove items with quantity management
- Stripe Checkout - Secure payment processing with Stripe's prebuilt checkout
- Order Management - Complete order tracking and management system
- Admin Dashboard - Order statistics, management, and CSV export
- EmailJS Integration - Contact form and order notifications
- Automated Emails - Order confirmations to customers and business owner
- Contact Form - Direct communication with customers
- Responsive Design - Mobile-first approach with Tailwind CSS
- Smooth Animations - Framer Motion for enhanced user experience
- Professional Design - Clean, modern interface
- Loading States - User feedback during operations
- Error Handling - Graceful error boundaries and validation
- Next.js 15 - Latest React framework with App Router
- TypeScript - Type-safe development
- SEO Optimized - Meta tags, structured data, sitemap
- Fast Loading - Optimized images and performance
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion
- State Management: Zustand
- Payment Processing: Stripe
- Email Service: EmailJS
- Deployment: Netlify
- Version Control: Git/GitHub
- Node.js 18+
- npm or yarn
- Stripe account
- EmailJS account
- Clone the repository
git clone https://github.com/BTheCoderr/ownership-tshirt-website.git
cd ownership-tshirt-website- Install dependencies
npm install- Set up environment variables
Create a
.env.localfile in the root directory:
# EmailJS Configuration
NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
NEXT_PUBLIC_EMAILJS_USER_ID=your_user_id
# Stripe Configuration
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key
STRIPE_SECRET_KEY=sk_test_your_secret_key- Run the development server
npm run dev- Open your browser
Navigate to
http://localhost:3000
- Create an account at EmailJS
- Set up a Gmail service
- Create an email template with variables:
{{from_name}},{{reply_to}},{{subject}},{{message}} - Get your Service ID, Template ID, and User ID
- Update your
.env.localfile
- Create an account at Stripe
- Get your API keys from the dashboard
- For testing, use test keys (
pk_test_andsk_test_) - For production, use live keys (
pk_live_andsk_live_) - Update your
.env.localfile
- Build the project
npm run build- Deploy to Netlify
- Connect your GitHub repository to Netlify
- Set build command:
npm run build - Set publish directory:
out - Add environment variables in Netlify dashboard
Make sure to add these in your Netlify dashboard:
NEXT_PUBLIC_EMAILJS_SERVICE_IDNEXT_PUBLIC_EMAILJS_TEMPLATE_IDNEXT_PUBLIC_EMAILJS_USER_IDNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEYSTRIPE_SECRET_KEY
- View OWNERSHIP t-shirts in black and white
- Switch between front and back views
- Select sizes with size guide reference
- Add items to shopping cart
- Persistent shopping cart with Zustand
- Secure checkout with Stripe
- Order confirmations via email
- Professional success page
- View order statistics and revenue
- Manage orders and update status
- Export orders to CSV
- Track customer information
- Contact form with EmailJS integration
- Automated email responses
- Business contact information
- Social media links
OWNERSHIP represents the mindset of taking control and owning your decisions. The brand features:
- Logo: Bold "OWNERSHIP" typography
- Tagline: "Own that shit"
- Colors: Primarily black and white for timeless appeal
- Message: Empowerment and personal responsibility
- Secure Payments: All transactions processed through Stripe
- Data Protection: Customer information encrypted and secure
- SSL/HTTPS: Secure communication protocols
- Environment Variables: Sensitive keys stored securely
- Order management system with statistics
- Revenue tracking and reporting
- Customer analytics
- Performance monitoring
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
For support or inquiries:
- Email: bferrell514@gmail.com
- Instagram: @bthedream_
- Twitter: @bthedream_
- TikTok: @bthedream_
This project is proprietary and owned by OWNERSHIP brand.
Built with modern web technologies and best practices for optimal performance and user experience.
Own that shit. 💪