Quikmemo

The ultimate note-taking application

Overview

Quikmemo is an easy-to-use note-taking app that helps you capture your thoughts, jot down ideas, and organize tasks. It's perfect for writers, students, professionals, and anyone who wants to stay organized.

Live URL: https://quikmemo.vercel.app/

🏗️ Technologies Used

• Framework: Next.js (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Authentication: Auth.js (NextAuth)
  • bcrypt.js for password hashing
  • Zod for schema validation
  • React Hook Form for form state management
• Database & ORM: MongoDB
  • Prisma Type-safe ORM for database management
• Animation: Motion (Framer Motion)
• Analytics: Umami Analytics
• Deployment: Vercel
• Email Service:
  • Resend for sending notifications and password resets
  • React Email for creating email templates
• Progressive Web App: next-pwa
• Text Editor: Tiptap
• Testing:
  • Vitest unit test framework
  • React Testing Library for integration and React DOM testing
• Icons: Lucide Icons

✨ Features

User Authentication & Management

• User Authentication and Session Management
• Forgot Password and Password Reset
• Verify Sign Up via Email
• Save Users in Database
• Edit User Profile

Note Management

• Create Notes
• Edit Notes
• Delete Notes
• Archive Notes
• Favorite Notes
• Restore Archived, Favorite, and Deleted Notes
• Save All Notes in Database

User Experience

• Search Notes by Title, Tag, and Content
• Toggle Theme from the dashboard
• Rich Text Editor
• Progressive Web App
• Website Analytics
• Web Animation
• Offline Access
• Rich Media Support

Important

• indicates features that are fully implemented.
• indicates features that are planned for future development.

🚀 Quick Start

1. Clone the repository:

   git clone https://github.com/frankiefab100/quikmemo.git
   cd quikmemo

2. Install dependencies:

   npm install

3. Configure environment variables: Create a .env.local file in the project root and fill in your credentials:

   BASE_URL=http://localhost:3000       # Base URL of the application (change for production)
   DATABASE_URL=                        # Connection string for your database (e.g. MongoDB URI)
   
   AUTH_SECRET=                         # Secret key used to encrypt authentication tokens
   AUTH_GOOGLE_ID=                      # Google OAuth Client ID for social login
   AUTH_GOOGLE_SECRET=                  # Google OAuth Client Secret
   AUTH_GITHUB_ID=                      # GitHub OAuth Client ID for social login
   AUTH_GITHUB_SECRET=                  # GitHub OAuth Client Secret
   AUTH_TWITTER_ID=                     # Twitter OAuth Client ID for social login
   AUTH_TWITTER_SECRET=                 # Twitter OAuth Client Secret
   
   RESEND_API_KEY=                      # API key for Resend email service
   UMAMI_WEBSITE_ID=                    # Website ID for Umami analytics tracking

4. Run database migrations (if using Prisma):

   npx prisma migrate dev

5. Start the development server:

   npm run dev

6. Open http://localhost:3000 in your browser to see the app.

📁 Project Structure

quikmemo/
├── __tests__/            # Unit and integration tests
├── action/               # Authentication action
├── app/                  # Next.js App Router
│   ├── (auth)/           # Authentication pages
│   ├── (dashboard)/      # Main dashboard UI
│   ├── api/              # API routes (notes, auth)
│   └── fonts/            # Custom fonts
├── assets/               # Project assets (images, video)
├── components/           # Reusable React components
├── constants/            # Constants
├── context/              # Context APIs
├── emails/               # Email templates
├── hooks/                # Custom hooks
├── lib/                  # Library functions
├── prisma/               # Prisma schema and migrations
├── public/               # Static assets (icons, images)
├── style/                # Tailwind CSS styles
├── types/                # Type definitions
├── utils/                # Utility functions
├── .env.local            # Environment variables
├── next.config.ts        # Next.js configurations
├── package.json          # Dependencies and scripts
├── postcss.config.mjs    # Postcss configurations
├── README.md             # Project documentation
├── service-worker.js     # PWA Service worker
├── tailwind.config.ts    # Tailwind CSS configurations
├── tsconfig.json         # TypeScript configurations
└── vitest.config.mts     # Vitest configurations

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/your-feature
3. Make your changes and commit: git commit -m "Add your feature"
4. Push to your fork: git push origin feature/your-feature
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License.

---

Built and maintained by frankiefab — Contributions welcome!