E-Commerce Platform

A modern, full-stack e-commerce application built with Next.js 15, featuring authentication, product management, and a rich content editor.

🚀 Features

• Next.js 15 with App Router and Turbopack for blazing-fast development
• Authentication - Secure user authentication with NextAuth.js
• Database - MongoDB integration with Mongoose ODM
• Rich Text Editor - TipTap editor with support for images, videos, tables, and more
• Image Management - ImageKit integration for optimized image delivery
• UI Components - Beautiful UI built with Radix UI and Tailwind CSS
• State Management - Zustand for client-side state management
• Data Fetching - TanStack Query and SWR for efficient data fetching
• Animations - Smooth animations with Framer Motion
• TypeScript - Full type safety throughout the application

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 20.x or higher
• npm, yarn, pnpm, or bun
• MongoDB database (local or cloud instance)

🛠️ Installation

1. Clone the repository

   git clone <your-repository-url>
   cd friends-telecom

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up environment variables

   Create a .env file in the root directory and add your environment variables:

   # Database
   MONGODB_URI=your_mongodb_connection_string
   
   # NextAuth
   NEXTAUTH_URL=http://localhost:3000
   NEXTAUTH_SECRET=your_nextauth_secret
   
   # ImageKit
   IMAGEKIT_PUBLIC_KEY=your_imagekit_public_key
   IMAGEKIT_PRIVATE_KEY=your_imagekit_private_key
   IMAGEKIT_URL_ENDPOINT=your_imagekit_url_endpoint

4. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

   Open http://localhost:3000 to view the application in your browser.

📁 Project Structure

├── src/
│   ├── app/              # Next.js App Router pages and API routes
│   ├── components/       # Reusable React components
│   ├── dbconfig/        # Database configuration
│   ├── hooks/           # Custom React hooks
│   ├── lib/             # Utility libraries
│   ├── models/          # MongoDB models
│   ├── providers/       # Context providers
│   └── types/           # TypeScript type definitions
├── public/              # Static assets
├── store/               # Zustand store configuration
├── utils/               # Utility functions
└── authcation/          # Authentication configuration

🎨 Tech Stack

Frontend

• Framework: Next.js 15 with React 19
• Styling: Tailwind CSS 4
• UI Components: Radix UI
• Animations: Framer Motion
• Rich Text Editor: TipTap

Backend

• Database: MongoDB with Mongoose
• Authentication: NextAuth.js
• API Routes: Next.js API Routes

Developer Tools

• Language: TypeScript
• Linting: ESLint
• Package Manager: npm

🔧 Available Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build the application for production
• npm start - Start the production server
• npm run lint - Run ESLint for code quality checks

📦 Key Dependencies

• Next.js - React framework for production
• React/React DOM - UI library
• NextAuth.js - Authentication solution
• Mongoose - MongoDB object modeling
• TipTap - Rich text editor
• ImageKit - Image optimization and delivery
• TanStack Query - Data fetching and caching
• Zustand - State management
• Axios - HTTP client
• Framer Motion - Animation library
• Lucide React - Icon library

🚀 Deployment

Deploy on Vercel

The easiest way to deploy this Next.js app is to use the Vercel Platform.

1. Push your code to a Git repository (GitHub, GitLab, or Bitbucket)
2. Import your repository to Vercel
3. Configure your environment variables
4. Deploy!

Check out the Next.js deployment documentation for more deployment options.

📚 Learn More

• Next.js Documentation
• NextAuth.js Documentation
• Mongoose Documentation
• TipTap Documentation
• Tailwind CSS Documentation

📄 License

This project is private and proprietary.

👥 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🐛 Issues

If you encounter any issues or have suggestions, please file an issue on the GitHub repository.

---

Built with ❤️ using Next.js