A full-stack note-taking application built with Next.js, Supabase for authentication and storage, Tailwind CSS for styling, and Groq for AI note summarization. This app allows users to sign up, log in, and manage their notes with a rich text editor interface. Notes are securely stored and associated with user accounts. You can also generate concise AI summaries of your notes with a single click.
- User Authentication: Sign up, log in, and log out with email/password or Google OAuth (via Supabase Auth).
- Notes CRUD: Create, read, update, and delete notes. Each note supports rich text formatting.
- AI Summarization: Instantly generate concise summaries of your notes using an integrated AI API (powered by GROQ).
- Auto-Save & Summarize: Notes can be summarized and changes are saved in real-time.
- Responsive UI: Built using Tailwind CSS and Shadcn for a modern, accessible experience.
- Theming: Light/dark mode toggle.
- Node.js (v18 or newer recommended)
- npm (v9 or newer) or yarn or pnpm
- Supabase project (get your API keys and URL)
- GROQ API Key (for AI summarization)
git clone <your-repo-url>
cd notes-assignmentnpm install
# or
yarn install
# or
pnpm installCreate a .env.local file in the root directory and add:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
NEXT_PUBLIC_SITE_URL=http://localhost:3000
GROQ_API_KEY=your_groq_api_keynpm run dev
# or
yarn dev
# or
pnpm devVisit http://localhost:3000 to use the app.
You can also try the deployed version here: https://takenoteofit.vercel.app
notes-assignment/
├── src/
│ ├── app/ # Next.js app directory
│ ├── components/ # UI and feature components
│ ├── lib/ # Hooks, providers, and Supabase utils
│ └── middleware.ts # Session and auth middleware
├── public/ # Static assets
├── package.json # Project dependencies and scripts
└── README.md # Project documentation
- Frontend: Built with Next.js App Router, Tailwind CSS, and Shadcn for accessible components and Tiptap for the rich text editor.
- Authentication: Managed via Supabase Auth (email/password and Google OAuth). Session is handled in middleware and on the client.
- Notes API: CRUD operations are handled via Next.js API routes (
/api/notes). Each request checks user authentication with Supabase before accessing or mutating notes. - AI Summarization: GROQ's API is used to generate summaries for notes.
- State Management: Uses React Query (
@tanstack/react-query) for efficient data fetching and cache management.
You can deploy this app on Vercel, Netlify, or any platform that supports Next.js. Make sure to set your environment variables in the deployment settings.