Skip to content

setup.md

Latest commit

 

History

History
102 lines (82 loc) · 2.71 KB

setup.md

File metadata and controls

102 lines (82 loc) · 2.71 KB

Full-Stack Next.js Application Setup

🚀 Your application includes:

✅ Features Built:

  • Authentication System (NextAuth.js with Google OAuth + Credentials)
  • Database Integration (Prisma ORM with PostgreSQL)
  • Task Management System (Full CRUD operations)
  • Modern UI (Tailwind CSS with responsive design)
  • API Routes (RESTful endpoints)
  • Session Management (JWT-based sessions)

📁 Project Structure:

src/
├── app/
│   ├── api/
│   │   ├── auth/[...nextauth]/     # NextAuth configuration
│   │   └── tasks/                  # Task CRUD API routes
│   ├── dashboard/                  # Main dashboard page
│   ├── signin/                     # Authentication page
│   ├── layout.tsx                  # Root layout with providers
│   ├── page.tsx                    # Landing page
│   └── providers.tsx               # Session provider wrapper
└── prisma/
    └── schema.prisma               # Database schema

🛠️ Setup Instructions:

1. Install Dependencies

npm install bcryptjs
npm install @types/bcryptjs --save-dev

2. Database Setup

# Generate Prisma client
npx prisma generate

# Run database migrations
npx prisma db push

# (Optional) View your database
npx prisma studio

3. Environment Variables

Update your .env.local file:

# Database
DATABASE_URL="your-postgresql-connection-string"

# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key-here

# Google OAuth (optional)
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

4. Start Development Server

npm run dev

🎯 How to Use:

Demo Login:

Features Available:

  1. Landing Page (/) - Authentication and feature overview
  2. Sign In (/signin) - Login with credentials or Google
  3. Dashboard (/dashboard) - Task management interface

API Endpoints:

  • GET /api/tasks - Fetch user tasks
  • POST /api/tasks - Create new task
  • PUT /api/tasks/[id] - Update task
  • DELETE /api/tasks/[id] - Delete task

🔧 Next Steps:

  1. Set up your database (PostgreSQL recommended)
  2. Configure Google OAuth (optional)
  3. Customize the UI to match your brand
  4. Add more features like task categories, team collaboration, etc.
  5. Deploy to Vercel or your preferred platform

📚 Technologies Used:

  • Next.js 15 - React framework
  • TypeScript - Type safety
  • Tailwind CSS - Styling
  • Prisma - Database ORM
  • NextAuth.js - Authentication
  • PostgreSQL - Database

Your full-stack application is ready to use! 🎉