CodeGen AI Studio

Projects

Code Generation

Prompt Tools

Token Usage

4,231 used 10,000 limit

Advanced Settings

AI Persona Configuration

System Instructions

Tokens: 127

Model Parameters

Precise (0) Balanced (0.7) Creative (1)

Code Preferences

System

Welcome to CodeGen AI Studio! I'm your AI assistant specialized in full-stack development. How can I help you build your application today?

You

I need to build a full-stack e-commerce application with Next.js, Express, and PostgreSQL. Can you help me set up the basic structure?

CodeGen AI

Absolutely! Let's set up a robust e-commerce application. Here's the recommended structure:

  • Frontend: Next.js with TypeScript
  • Backend: Express API with JWT authentication
  • Database: PostgreSQL with Prisma ORM
  • State Management: React Context or Redux
  • Styling: Tailwind CSS (already included)

Let me generate the initial project structure and basic configuration files:

// Initialize Next.js project
npx create-next-app@latest ecommerce-frontend --typescript
cd ecommerce-frontend

// Recommended folder structure:
├── components/
│   ├── common/       # Reusable UI components
│   ├── layout/       # Layout components
│   └── products/     # Product-related components
├── context/          # React context providers
├── hooks/            # Custom hooks
├── pages/
│   ├── api/          # API routes (optional)
│   ├── products/     # Product pages
│   ├── cart/         # Cart pages
│   └── _app.tsx      # Custom App component
├── public/           # Static assets
├── styles/           # Global styles
├── types/            # TypeScript types
└── utils/            # Utility functions
// Initialize Express backend
mkdir ecommerce-backend
cd ecommerce-backend
npm init -y
npm install express typescript ts-node @types/node @types/express --save-dev

// Recommended folder structure:
├── src/
│   ├── config/       # Configuration files
│   ├── controllers/  # Route controllers
│   ├── middleware/   # Express middleware
│   ├── models/       # Data models
│   ├── routes/       # API routes
│   ├── services/     # Business logic
│   ├── utils/        # Utility functions
│   └── app.ts        # Express app setup
├── .env              # Environment variables
├── package.json
└── tsconfig.json
# PostgreSQL Setup
1. Install PostgreSQL locally or use a cloud provider
2. Create a new database for your e-commerce app

# Prisma ORM Setup
npm install prisma @prisma/client --save
npx prisma init

# Configure schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Product {
  id          Int      @id @default(autoincrement())
  name        String
  description String?
  price       Float
  imageUrl    String?
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

# After defining your schema:
npx prisma migrate dev --name init

Would you like me to:

Create a secure login page using React with the following features:

  • Email and password fields with validation
  • Show/hide password toggle
  • Remember me checkbox
  • Forgot password link
  • Social login options (Google, Facebook)
  • Proper error handling
  • Loading state during submission

Use modern React hooks and context for state management. Include thorough TypeScript types and ensure accessibility compliance.

1.
2.
3.

Made with DeepSite LogoDeepSite - 🧬 Remix