NotePath 📝

NotePath is a modern, feature-rich platform designed for writers and readers to discover, create, and share amazing stories. Built with performance and user experience in mind, it provides a seamless interface for publishing articles on technology, lifestyle, business, and more.

Live Demo: https://notepath-pi.vercel.app/

✨ Key Features

• ✍️ Rich Text Editor: powered by TipTap for a smooth writing experience.
• 🎨 Modern UI/UX: Clean, responsive design using Tailwind CSS and Shadcn UI.
• 👤 User Profiles: Public profiles, dashboards, and customizable settings.
• 🏆 Achievements System: Gamification elements to engage users.
• 📊 Admin Dashboard: Comprehensive tools for content management.
• 🔍 Discovery & Search: Filter articles by category or search term.
• 🔐 Secure Authentication: Powered by Supabase Auth.
• 📱 Fully Responsive: Optimized for mobile, tablet, and desktop devices.
• 🌙 Dark Mode Support: (If applicable, or usually standard with Shadcn).

🛠️ Tech Stack

Frontend

• Framework: React + Vite
• Language: TypeScript
• Styling: Tailwind CSS
• Components: Shadcn UI / Radix UI
• Icons: Lucide React

Backend & Data

• Backend as a Service: Supabase
• Database: PostgreSQL (via Supabase)
• State Management: TanStack Query (React Query)

Tools & Libraries

• Forms: React Hook Form + Zod validation
• Editor: TipTap
• Charts: Recharts
• Notifications: Sonner
• Routing: React Router DOM

🚀 Getting Started

Follow these steps to set up the project locally.

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn or pnpm

Installation

1. Clone the repository

   git clone https://github.com/Saurabhtbj1201/notepath.git
   cd notepath

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 confirm the exact variable names used in src/integrations/supabase/client.ts or vite-env.d.ts. Typically, for a Supabase project, you will need:

   VITE_SUPABASE_URL=your_supabase_project_url
   VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_anon_key

4. Run the development server

   npm run dev

   Open http://localhost:8080 (or the port shown in your terminal) to view it in the browser.

📂 Project Structure

src/
├── components/     # Reusable UI components
├── contexts/       # React Context providers
├── hooks/          # Custom React hooks
├── integrations/   # Third-party integrations (Supabase)
├── lib/            # Utility functions and helpers
├── pages/          # Application routes/pages
└── main.tsx        # Application entry point

🤝 Contributing

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

📄 License

This project is licensed under the MIT License.

👨💻 Developer

© Made with ❤️ by Saurabh Kumar. All Rights Reserved 2025

Saurabh Kumar

🔗 Connect With Me

---

Made with ❤️ by Saurabh Kumar
⭐ Star this repo if you find it helpful!

---

💝 If you like this project, please give it a ⭐ and share it with others!

Happy Coding! 🚀