Notes-Do App

A modern, production-ready React application built with Vite, featuring authentication with Clerk, data fetching with TanStack Query, and styled with Tailwind CSS.

🚀 Features

• Modern React: Built with React 19 and latest JavaScript features
• Vite: Lightning-fast build tool and development server
• Tailwind CSS: Utility-first CSS framework for rapid UI development
• Clerk Authentication: Complete user authentication and management
• TanStack Query: Powerful data fetching and caching library
• React Router: Client-side routing with React Router v6
• shadcn/ui: Beautiful and accessible UI components
• Prettier: Code formatting for consistent style
• ESLint: Code linting for better code quality

🛠️ Tech Stack

• Frontend: React, JavaScript (ES6+)
• Build Tool: Vite
• Styling: Tailwind CSS, shadcn/ui
• Authentication: Clerk
• Data Fetching: TanStack Query (React Query)
• Routing: React Router DOM
• Code Quality: ESLint, Prettier
• Package Manager: npm

📁 Project Structure

frontend/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── common/          # Common components
│   │   ├── course/          # Course-related components
│   │   ├── enrollment/      # Enrollment components
│   │   ├── exam/           # Exam components
│   │   ├── magicui/        # Magic UI components
│   │   ├── payment/        # Payment components
│   │   ├── shared/         # Shared components
│   │   ├── test/           # Test components
│   │   └── ui/             # shadcn/ui components
│   ├── config/             # Configuration files
│   ├── constants/          # Application constants
│   ├── context/           # React context providers
│   ├── data/              # Static data files
│   ├── hooks/             # Custom React hooks
│   │   └── lms/           # LMS-specific hooks
│   ├── lib/               # Library configurations
│   │   └── react-query/   # TanStack Query setup
│   ├── pages/             # Page components
│   ├── services/          # API services
│   │   ├── mutations/     # Query mutations
│   │   └── socket/        # Socket connections
│   ├── utils/             # Utility functions
│   │   └── lms/           # LMS-specific utilities
│   ├── _auth/             # Authentication pages
│   │   └── page/          # Auth page components
│   └── _root/             # Main application pages
│       ├── pages/         # Root pages
│       └── _profile/      # Profile pages
├── public/                # Static assets
├── .env.local            # Environment variables
├── .gitignore           # Git ignore rules
├── .prettierrc.json     # Prettier configuration
├── components.json      # shadcn/ui configuration
├── jsconfig.json        # JavaScript configuration
├── package.json         # Dependencies and scripts
├── tailwind.config.js   # Tailwind configuration
└── vite.config.js       # Vite configuration

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• A Clerk account for authentication

Installation

1. Clone the repository

   git clone <repository-url>
   cd notes-do

2. Navigate to frontend directory

   cd frontend

3. Install dependencies

   npm install

4. Set up environment variables

   Copy .env.local and update with your Clerk keys:

   VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key_here
   CLERK_SECRET_KEY=your_clerk_secret_key_here

5. Start the development server

   npm run dev

6. Open your browser

   Navigate to http://localhost:5173

🔧 Available Scripts

In the frontend directory, you can run:

• npm run dev - Start the development server
• npm run build - Build the project for production
• npm run preview - Preview the production build locally
• npm run lint - Run ESLint to check code quality
• npm run format - Format code with Prettier
• npm run format:check - Check if code is properly formatted

🔑 Environment Variables

Create a .env.local file in the frontend directory with the following variables:

# Clerk Configuration
VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key_here
CLERK_SECRET_KEY=your_clerk_secret_key_here

# API Configuration (optional)
VITE_API_BASE_URL=http://localhost:3000/api

🎨 UI Components

This project uses shadcn/ui for UI components. To add new components:

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog

🔐 Authentication

Authentication is handled by Clerk. The app includes:

• Sign in/Sign up modals
• Protected routes
• User profile management
• Session management

📱 Routes

• / - Home page
• /profile - User profile page (protected)

🧪 Code Quality

This project maintains code quality through:

• ESLint: Linting for JavaScript/React
• Prettier: Code formatting
• Git hooks: Pre-commit formatting (optional)

🚀 Deployment

Build for Production

npm run build

The build artifacts will be stored in the dist/ directory.

Deploy to Vercel

1. Connect your repository to Vercel
2. Set environment variables in Vercel dashboard
3. Deploy automatically on push to main branch

Deploy to Netlify

1. Connect your repository to Netlify
2. Set build command: npm run build
3. Set publish directory: dist
4. Set environment variables in Netlify dashboard

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-feature
3. Commit your changes: git commit -am 'Add new feature'
4. Push to the branch: git push origin feature/new-feature
5. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

If you encounter any issues or have questions:

1. Check the existing issues on GitHub
2. Create a new issue with detailed description
3. Include steps to reproduce the problem

🙏 Acknowledgments

• React - UI library
• Vite - Build tool
• Tailwind CSS - CSS framework
• Clerk - Authentication
• TanStack Query - Data fetching
• shadcn/ui - UI components