{"id":31608730,"url":"https://github.com/marufk21/snackstack","last_synced_at":"2025-10-06T08:24:00.376Z","repository":{"id":311262000,"uuid":"1043191675","full_name":"marufk21/snackstack","owner":"marufk21","description":null,"archived":false,"fork":false,"pushed_at":"2025-10-01T19:38:44.000Z","size":9150,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-01T21:22:07.561Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://snapstack-cyan.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marufk21.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-23T10:29:15.000Z","updated_at":"2025-10-01T19:38:49.000Z","dependencies_parsed_at":"2025-08-23T14:59:30.494Z","dependency_job_id":"63560522-5cb1-4ed9-8c1e-c4d4511fd087","html_url":"https://github.com/marufk21/snackstack","commit_stats":null,"previous_names":["marufk21/snapstack","marufk21/snackstack"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marufk21/snackstack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marufk21%2Fsnackstack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marufk21%2Fsnackstack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marufk21%2Fsnackstack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marufk21%2Fsnackstack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marufk21","download_url":"https://codeload.github.com/marufk21/snackstack/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marufk21%2Fsnackstack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278578131,"owners_count":26009739,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-06T08:23:57.669Z","updated_at":"2025-10-06T08:24:00.364Z","avatar_url":"https://github.com/marufk21.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🍔 SnackStack - AI-Powered Notes SaaS\n\nA modern, full-stack web application starter template built with Next.js 15, featuring AI-powered note-taking capabilities, authentication, database integration, state management, image uploads, and a beautiful UI with dark mode support.\n\n![Next.js](https://img.shields.io/badge/Next.js-15.5.0-black?style=flat-square\u0026logo=next.js)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue?style=flat-square\u0026logo=typescript)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.1-38B2AC?style=flat-square\u0026logo=tailwind-css)\n![Clerk](https://img.shields.io/badge/Clerk-Auth-6C47FF?style=flat-square)\n![Prisma](https://img.shields.io/badge/Prisma-6.15-2D3748?style=flat-square\u0026logo=prisma)\n![Cloudinary](https://img.shields.io/badge/Cloudinary-Image_CDN-3448C5?style=flat-square\u0026logo=cloudinary)\n\n## 🚀 Overview\n\nSnackStack is a production-ready AI-powered note-taking SaaS application that combines the best modern web development tools and practices. It provides a solid foundation for building scalable web applications with built-in authentication, database connectivity, state management, and a responsive UI, enhanced with AI capabilities for intelligent note-taking.\n\n### ✨ Key Features\n\n- **🧠 AI-Powered Note-Taking**: Intelligent suggestions, content enhancement, and organization powered by Google Gemini\n- **🔐 Authentication**: Secure user authentication with Clerk (sign up, sign in, user management)\n- **🎨 Modern UI**: Beautiful, responsive design with Tailwind CSS and custom components\n- **🌓 Dark Mode**: Built-in theme switching with next-themes and smooth transitions\n- **📊 State Management**: Global state management with Zustand and persistence\n- **🔄 Data Fetching**: Efficient data fetching and caching with TanStack Query (React Query)\n- **🗄️ Database**: PostgreSQL integration with Prisma ORM\n- **📸 Image Upload**: Cloudinary integration for image uploads and management\n- **🔔 Notifications**: Toast notification system with multiple types\n- **📱 Responsive**: Mobile-first design that works on all devices\n- **⚡ Performance**: Optimized with Next.js 15 Turbopack\n- **🎭 Animations**: Smooth animations with Framer Motion\n- **🛡️ Type Safety**: Full TypeScript support throughout the codebase\n- **🎯 Dashboard**: Complete dashboard with analytics, quick actions, and activity feed\n\n## 🛠️ Tech Stack\n\n### Frontend\n\n- **Framework**: [Next.js 15.5.0](https://nextjs.org/) with App Router\n- **Language**: [TypeScript](https://www.typescriptlang.org/) 5.0\n- **Styling**: [Tailwind CSS v4.1](https://tailwindcss.com/) with PostCSS\n- **UI Components**: Custom components with [Radix UI](https://www.radix-ui.com/) primitives\n- **Animations**: [Framer Motion](https://www.framer.com/motion/) 12.23.12\n- **Icons**: [Lucide React](https://lucide.dev/) 0.541.0\n- **Theme**: [next-themes](https://github.com/pacocoursey/next-themes) 0.4.6\n\n### Backend \u0026 Database\n\n- **ORM**: [Prisma](https://www.prisma.io/) 6.15.0\n- **Database**: PostgreSQL (configurable)\n- **API**: Next.js API Routes\n- **Image CDN**: [Cloudinary](https://cloudinary.com/) 2.7.0\n- **AI**: [Google Gemini](https://ai.google.dev/) for AI-powered suggestions\n\n### Authentication \u0026 Authorization\n\n- **Auth Provider**: [Clerk](https://clerk.com/) 6.31.4 for complete user management\n- **Middleware**: Protected routes with Clerk middleware\n\n### State Management \u0026 Data Fetching\n\n- **Global State**: [Zustand](https://zustand-demo.pmnd.rs/) 5.0.8 with persistence\n- **Server State**: [TanStack Query](https://tanstack.com/query) 5.85.5\n- **API Client**: [Axios](https://axios-http.com/) 1.11.0\n- **Forms**: [TanStack Form](https://tanstack.com/form) 1.19.2\n\n### Development Tools\n\n- **Package Manager**: pnpm (recommended) / npm / yarn\n- **Linting**: ESLint with Next.js config\n- **Type Checking**: TypeScript strict mode\n- **Hot Reload**: Next.js Fast Refresh with Turbopack\n- **Utilities**: [clsx](https://github.com/lukeed/clsx) 2.1.1, [tailwind-merge](https://github.com/dcastil/tailwind-merge) 3.3.1\n\n## 📋 Prerequisites\n\nBefore you begin, ensure you have the following installed:\n\n- **Node.js** 18.17 or later\n- **pnpm** (recommended) or npm/yarn\n- **PostgreSQL** database (local or cloud)\n- **Git** for version control\n\n## 🚀 Getting Started\n\n### 1. Clone the repository\n\n```bash\ngit clone https://github.com/yourusername/snackstack.git\ncd snackstack\n```\n\n### 2. Install dependencies\n\n```bash\npnpm install\n# or\nnpm install\n# or\nyarn install\n```\n\n### 3. Set up environment variables\n\nCreate a `.env.local` file in the root directory:\n\n```env\n# Database\nDATABASE_URL=\"postgresql://username:password@localhost:5432/snackstack?schema=public\"\n\n# Clerk Authentication\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key\nCLERK_SECRET_KEY=your_clerk_secret_key\n\n# Cloudinary (for image uploads)\nNEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name\nNEXT_PUBLIC_CLOUDINARY_API_KEY=your_cloudinary_api_key\nCLOUDINARY_API_SECRET=your_cloudinary_api_secret\n\n# Google Gemini API (for AI features)\nGEMINI_API_KEY=your_gemini_api_key\n```\n\n### 4. Set up the database\n\n```bash\n# Generate Prisma client\npnpm prisma generate\n\n# Run database migrations\npnpm prisma migrate dev\n\n# (Optional) Seed the database\npnpm prisma db seed\n```\n\n### 5. Run the development server\n\n```bash\npnpm dev\n# or\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) to see your application.\n\n## 🔧 Environment Setup\n\n### Database Configuration\n\n1. **Local PostgreSQL**:\n\n   - Install PostgreSQL on your machine\n   - Create a new database: `CREATE DATABASE snackstack;`\n   - Update the `DATABASE_URL` in `.env.local`\n\n2. **Cloud PostgreSQL** (Recommended for production):\n   - Use services like [Supabase](https://supabase.com/), [Neon](https://neon.tech/), or [Railway](https://railway.app/)\n   - Copy the connection string to `DATABASE_URL`\n\n### Clerk Authentication Setup\n\n1. Create a [Clerk](https://clerk.com/) account\n2. Create a new application\n3. Copy your API keys from the Clerk dashboard\n4. Add the keys to your `.env.local` file\n5. Configure your application URLs in Clerk dashboard\n\n### Cloudinary Setup (for Image Uploads)\n\n1. Create a [Cloudinary](https://cloudinary.com/) account\n2. Get your Cloud Name, API Key, and API Secret from the dashboard\n3. Add the credentials to your `.env.local` file\n4. The app will automatically use these for image uploads\n\n### Google Gemini API Setup (for AI Features)\n\n1. Create a [Google AI](https://ai.google.dev/) account\n2. Get your API key from the Google AI Studio\n3. Add the key to your `.env.local` file as `GEMINI_API_KEY`\n4. The app will automatically use this for AI-powered suggestions\n\n## 📖 Usage Guide\n\n### Available Scripts\n\n```bash\n# Development\npnpm dev          # Start development server with Turbopack\npnpm build        # Build for production\npnpm start        # Start production server\n\n# Database\npnpm prisma generate    # Generate Prisma client\npnpm prisma migrate dev # Run migrations in development\npnpm prisma studio      # Open Prisma Studio GUI\npnpm prisma db push     # Push schema changes (skip migrations)\n\n# Type Checking\npnpm type-check   # Run TypeScript compiler check\n```\n\n### Key Features Implementation\n\n#### 🧠 AI-Powered Note-Taking\n\n- Intelligent writing suggestions with AI enhancement\n- Content summarization and expansion\n- Note continuation and improvement\n- Rate-limited API access to prevent abuse\n- Integration with Google Gemini for natural language processing\n\n#### 🔐 Authentication\n\n- Sign up/Sign in pages at `/sign-up` and `/sign-in`\n- Protected routes automatically redirect to sign-in\n- User button component for account management\n- Middleware configuration in `middleware.ts`\n\n#### 🎨 Theme Switching\n\n- Toggle between light and dark modes\n- Theme preference persisted to localStorage\n- Smooth transitions between themes\n- Custom theme provider in `components/ui/theme-provider.tsx`\n\n#### 📊 State Management\n\n- Global app state with Zustand in `stores/use-app-store.ts`\n- Note editor state management with `stores/use-note-editor-store.ts`\n- Server state caching with React Query\n- Optimistic updates for better UX\n\n#### 🗄️ Database Operations\n\n- Define models in `server/db/schema.prisma`\n- Type-safe database queries with Prisma Client\n- Generated types in `lib/generated/prisma`\n\n#### 📸 Image Upload System\n\n- Cloudinary integration for image storage and optimization\n- Drag-and-drop image upload component\n- Automatic image optimization and format conversion\n- File validation (type, size limits)\n- Upload progress indicators and error handling\n\n#### 🔔 Notification System\n\n- Toast notifications with multiple types (success, error, warning, info)\n- Global notification state management with Zustand\n- Auto-dismiss functionality with customizable timing\n- Notification container component for consistent UI\n\n#### 🎨 Theme System\n\n- Light/dark mode switching with system preference detection\n- Smooth theme transitions with CSS animations\n- Persistent theme preference in localStorage\n- Custom theme provider with next-themes integration\n\n## 📁 Project Structure\n\n```\nsnackstack/\n├── app/                    # Next.js App Router\n│   ├── layout.tsx         # Root layout with providers\n│   ├── page.tsx           # Home page\n│   ├── globals.css        # Global styles\n│   ├── (auth)/            # Authentication routes\n│   │   ├── sign-in/       # Clerk sign-in page\n│   │   └── sign-up/       # Clerk sign-up page\n│   ├── (dashboard)/       # Protected dashboard route\n│   │   └── dashboard/     # Dashboard page\n│   ├── (landing)/         # Landing page\n│   │   └── page.tsx       # Landing page\n│   └── api/               # API routes\n│       ├── ai-suggestion/ # AI suggestion endpoint\n│       └── upload/        # Image upload endpoint\n├── components/            # React components\n│   ├── ui/               # Reusable UI components\n│   │   ├── button.tsx    # Button component\n│   │   ├── card.tsx      # Card component\n│   │   ├── badge.tsx     # Badge component\n│   │   ├── image-upload.tsx # Image upload component\n│   │   ├── notification.tsx # Notification system\n│   │   ├── theme-provider.tsx # Theme provider\n│   │   └── theme-toggle-button.tsx # Theme toggle\n│   ├── auth/             # Authentication components\n│   │   └── auth-check.tsx # Authentication checker\n│   ├── dashboard/        # Dashboard components\n│   │   ├── note-card.tsx # Note card component\n│   │   ├── note-editor.tsx # Note editor component\n│   │   ├── note-bottom-bar.tsx # Note editor bottom bar\n│   │   └── note-view-modal.tsx # Note view modal\n│   └── landing/          # Landing page components\n│       └── navbar.tsx    # Navigation component\n├── lib/                  # Utility functions\n│   ├── utils.ts         # Helper functions\n│   ├── query-client.ts  # React Query setup\n│   ├── generated/       # Generated Prisma types\n│   └── utils/           # Additional utilities\n│       └── cloudinary.ts # Cloudinary integration\n├── server/               # Server-side code\n│   ├── db/              # Database schema\n│   │   └── schema.prisma # Prisma schema file\n│   ├── providers/       # Context providers\n│   │   └── query-provider.tsx\n│   └── services/        # Server services\n├── stores/              # Zustand stores\n│   ├── use-app-store.ts # Global app state\n│   └── use-note-editor-store.ts # Note editor state\n├── public/              # Static assets\n│   ├── fonts/           # Custom fonts\n│   ├── icons/           # Icon files\n│   └── images/          # Image assets\n├── middleware.ts        # Next.js middleware\n├── next.config.ts       # Next.js configuration\n├── tsconfig.json        # TypeScript configuration\n└── package.json         # Project dependencies\n```\n\n## 🚀 Deployment\n\n### Vercel (Recommended)\n\n1. Push your code to GitHub\n2. Import your repository on [Vercel](https://vercel.com)\n3. Add environment variables in Vercel dashboard\n4. Deploy!\n\n### Other Platforms\n\nSnackStack can be deployed to any platform that supports Next.js:\n\n- [Netlify](https://www.netlify.com/)\n- [Railway](https://railway.app/)\n- [Render](https://render.com/)\n- [AWS Amplify](https://aws.amazon.com/amplify/)\n\n### Production Checklist\n\n- [ ] Set all environment variables\n- [ ] Run database migrations\n- [ ] Enable Clerk production mode\n- [ ] Configure CORS and security headers\n- [ ] Set up monitoring and error tracking\n- [ ] Configure custom domain\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n### Development Guidelines\n\n- Follow the existing code style\n- Write meaningful commit messages\n- Add tests for new features\n- Update documentation as needed\n- Ensure all tests pass before submitting PR\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- [Next.js](https://nextjs.org/) team for the amazing framework\n- [Vercel](https://vercel.com/) for hosting and deployment\n- [Clerk](https://clerk.com/) for authentication\n- [Prisma](https://www.prisma.io/) for the excellent ORM\n- [Google AI](https://ai.google.dev/) for the Gemini API\n- All the open-source contributors\n\n## 📞 Support\n\n- 📧 Email: support@snackstack.dev\n- 💬 Discord: [Join our community](https://discord.gg/snackstack)\n- 🐛 Issues: [GitHub Issues](https://github.com/yourusername/snackstack/issues)\n\n---\n\nBuilt with ❤️ by the SnackStack Team","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarufk21%2Fsnackstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarufk21%2Fsnackstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarufk21%2Fsnackstack/lists"}