You can click here to get to the video 👇
As part of the course, we are building and deploying a app called StartShop.
Get complete access to StartShop, a production-ready e-commerce platform that demonstrates the power of modern React frameworks with server-side rendering, type-safe routing, and seamless shopping cart functionality.
This application delivers a seamless shopping experience featuring:
Shopping Experience
- Beautiful product catalog with grid layouts
- Detailed product pages with images and descriptions
- Real-time shopping cart management
- Inventory status tracking (in-stock, backorder, preorder)
- Product badges and ratings display
- Recommended products section
- Responsive design for mobile and desktop
Technical Foundation
- TanStack Start for full-stack React with SSR
- TanStack Router for type-safe, file-based routing
- TanStack Query for powerful data synchronization
- PostgreSQL database with Drizzle ORM
- Server functions for secure server-side operations
- ShadCN UI components for beautiful, accessible interfaces
- TailwindCSS 4 for modern, utility-first styling
Perfect for developers, entrepreneurs, and anyone looking to build a modern e-commerce platform. StartShop demonstrates how to create a production-ready shopping experience with type safety, server-side rendering, and excellent developer experience.
- 🚀 TanStack Start for full-stack React with server-side rendering and API endpoints
- 🧭 TanStack Router for type-safe, file-based routing with automatic code splitting
- 🔄 TanStack Query for powerful data synchronization, caching, and server state management
- 💾 PostgreSQL database with Drizzle ORM for type-safe database operations
- 📦 Server Functions for secure, type-safe server-side operations
- 🎨 ShadCN UI for accessible, customizable React components
- 💅 TailwindCSS 4 for utility-first, responsive styling
- 📜 TypeScript for static typing and enhanced development experience
- 🔧 Vite for lightning-fast development and optimized production builds
- 🧪 Vitest for unit testing with React Testing Library
- 🛍️ Complete shopping cart functionality (add, update, remove items)
- 📊 Product catalog with filtering and search capabilities
- 🎯 Product detail pages with images, descriptions, and ratings
- 🏷️ Product badges (New, Sale, Featured, Limited)
- 📦 Inventory management (in-stock, backorder, preorder)
- ⭐ Product ratings and reviews display
- 🔍 Recommended products section
- 🎨 Beautiful, modern UI with smooth animations
- 📱 Fully responsive design for all devices
- 🔄 Real-time cart updates with optimistic UI
- 🚀 Server-side rendering for optimal performance
- 🔐 Type-safe routes and API endpoints
- 📈 SEO-friendly product pages with meta tags
- 🎯 Loading states and error handling
- 🔔 Toast notifications for user feedback
To get started with this project:
- Fork the repo
- Install dependencies with
npm install - Set up your PostgreSQL database
- Configure your environment variables (database connection string)
- Run database migrations with
npm run db:migrate - Seed the database with sample products using
npm run db:seed - Start the development server with
npm run dev
- Click the "Fork" button in the top right corner of this repository to create your own copy
- Clone your forked repository to your local machine:
git clone https://github.com/your-username/stackshop-app.git cd stackshop-app - Install dependencies:
npm install- Set up your environment variables:
- Create a
.envfile in the root directory - Add your PostgreSQL connection string:
DATABASE_URL=postgresql://user:password@localhost:5432/stackshop
- Create a
- Run database migrations:
npm run db:migrate
- Seed the database with sample products:
npm run db:seed
- Start the development server:
npm run dev
- Open http://localhost:3000 in your browser
npm run dev- Start the development servernpm run build- Build the application for productionnpm run preview- Preview the production build locallynpm run db:generate- Generate database migrationsnpm run db:migrate- Run database migrationsnpm run db:push- Push schema changes to the databasenpm run db:studio- Open Drizzle Studio for database managementnpm run db:seed- Seed the database with sample datanpm run test- Run tests with Vitestnpm run lint- Run ESLintnpm run format- Format code with Prettiernpm run check- Format and lint code
stackshop-app/
├── src/
│ ├── components/ # React components
│ │ ├── cart/ # Cart-related components
│ │ └── ui/ # ShadCN UI components
│ ├── data/ # Data access layer
│ ├── db/ # Database schema and connection
│ ├── lib/ # Utility functions
│ ├── routes/ # File-based routes (TanStack Router)
│ ├── types/ # TypeScript type definitions
│ └── styles.css # Global styles
├── drizzle/ # Database migrations
├── scripts/ # Utility scripts (seeding, etc.)
└── public/ # Static assets
The application uses PostgreSQL with the following main tables:
- products - Stores product information (name, description, price, inventory, ratings, etc.)
- cart_items - Stores items in the shopping cart
See src/db/schema.ts for the complete schema definition.
The application uses ShadCN UI components for a consistent, accessible design:
- Cards for product display
- Buttons with variants
- Input fields and forms
- Skeleton loaders
- Empty states
All components are located in src/components/ui/.
- Server Functions: Secure server-side operations using
createServerFn - Loaders: TanStack Router loaders fetch data before route rendering
- TanStack Query: Client-side data synchronization and caching
- Optimistic Updates: Cart updates happen optimistically for better UX
This project uses Vitest for testing. Run tests with:
npm run testThis project uses:
- ESLint for linting (configured with
@tanstack/eslint-config) - Prettier for code formatting
- TypeScript for type safety
Run code quality checks:
npm run lint # Check for linting errors
npm run format # Format code
npm run check # Format and lint- TanStack for the amazing React ecosystem
- Drizzle ORM for type-safe database operations
- ShadCN UI for beautiful, accessible components
- TailwindCSS for utility-first styling
- Vite for the build tool