Notely is an open-source note-taking application designed to provide users with a seamless and efficient platform for managing their notes. Built with modern web technologies, Notely ensures a responsive and user-friendly experience across various devices.
- User Authentication: Secure user registration and login functionalities to protect your notes.
- Rich Text Editing: Create and format notes with a user-friendly rich text editor.
- Tagging System: Organize notes using tags for easy categorization and retrieval.
- Search Functionality: Quickly search through notes to find specific information.
- Responsive Design: Optimized for desktops, tablets, and mobile devices.
- Next.js 14: A React framework for server-rendered applications.
- Kinde: Authentication and user management platform.
- Prisma: Next-generation ORM for database interactions.
- Supabase: Open-source Firebase alternative for real-time databases.
- Shadcn UI: Component library for building user interfaces.
- Tailwind CSS: Utility-first CSS framework for rapid UI development.
- Node.js: Ensure Node.js is installed on your machine.
- Supabase Account: Set up a Supabase account for database services.
- Kinde Account: Set up a Kinde account for authentication services.
-
Clone the Repository:
git clone https://github.com/victorpreston/Notely.git
-
Navigate to the Project Directory:
cd Notely
-
Install Dependencies:
npm install
-
Set Up Environment Variables:
Create a .env
file in the root directory with the following content:
```bash
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
KINDER_CLIENT_ID=your_kinde_client_id
KINDER_CLIENT_SECRET=your_kinde_client_secret
Run the Development Server:
```bash
npm run dev
The application will be available at http://localhost:3000.
Folder Structure The project's folder structure is organized as follows:
```bash
Notely/
├── app/
│ ├── components/
│ ├── pages/
│ └── styles/
├── lib/
├── prisma/
├── public/
├── .eslintrc.json
├── .gitignore
├── README.md
├── next.config.mjs
├── package.json
├── postcss.config.js
├── tailwind.config.ts
└── tsconfig.json
app/: Contains the main application components, pages, and styles.
lib/: Utility functions and libraries.
prisma/: Prisma schema and migrations.
public/: Static assets like images and fonts.