Web e-commerce application focused on men's fashion, developed to simulate a complete, modern, and functional online store.The main focus was to create a simple, smooth, and accessible shopping experience across all devices.
The main idea was to build an online sales platform where users can:
- Explore products organized by categories
- Add and remove items from the cart
- Place orders easily and securely
- Track the status of their purchases
Besides functionality, the project applied best development practices and modern technologies to provide a well-structured application.
- 📂 Product Catalog with filters and categories
- 🛒 Persistent Cart that keeps items even after page reload
- 💳 Stripe Integration for payment simulation
- 🔐 Authentication System with signup and login
- 📦 Order Management with purchase history
- 📱 Responsive Layout optimized for desktop and mobile
- 🔍 Product Recommendations for interactive navigation
Frontend
- ⚛️ Next.js 15 + React 19
- 🔷 TypeScript
- 🎨 Tailwind CSS
- 🧩 Radix UI / shadcn-ui
Backend
- 🔄 Next.js API Routes
- 🗄️ Drizzle ORM
- 🐘 PostgreSQL
- 🔐 Better Auth
- 💰 Stripe
- 🔄 TanStack Query
- Node.js 18+
- PostgreSQL installed
- Stripe account (for payment simulation)
# Clone this repository
git clone https://github.com/wmsalves/bewear.git
cd bewear
# Configure the .env file with your keys
# Install dependencies
npm install
# Setup the database
npm run db:generate
npm run db:push
npm run db:seed
# Run the development server
npm run devAccess at: http://localhost:3000
src/
├── app/ # App Router
│ ├── api/ # API Routes
│ ├── auth/ # Authentication
│ ├── cart/ # Cart
│ ├── checkout/ # Checkout flow
│ ├── orders/ # Order history
│ └── products/ # Product details
├── components/ # Reusable components
├── db/ # Database configurations
├── hooks/ # Custom hooks
├── lib/ # Utilities
└── providers/ # Context providers
During the project development, I improved skills in:
- 🔄 State Management with React Query
- 📦 Frontend-Backend Integration via API Routes
- 📱 Responsiveness across different screen sizes
- 🔐 Authentication flow with secure tokens
- 💳 Stripe Payments in a test environment
The project can be easily hosted on Vercel, leveraging direct integration with Next.js.