Skip to content

feat: Enhance README with comprehensive documentation #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RafiulM wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: Enhance README with comprehensive documentation #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
295 changes: 214 additions & 81 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,60 @@
[![CodeGuide](/codeguide-backdrop.svg)](https://codeguide.dev)

# CodeGuide Starter Pro

# CodeGuide Starter Lite
A comprehensive, modern web application starter template built with Next.js 14 and the latest technologies. This production-ready template features authentication, database integration, beautiful UI components, and a complete development setup for building scalable SaaS applications.

A modern web application starter template built with Next.js 14, featuring authentication, database integration.
## ✨ Features

## Tech Stack
- 🔐 **Complete Authentication System** - Powered by Clerk with full user management
- 🗄️ **Database Integration** - Supabase with PostgreSQL, migrations, and Row Level Security
- 🎨 **Modern UI/UX** - Beautiful components with shadcn/ui, Tailwind CSS, and Framer Motion animations
- 🌙 **Dark/Light Theme** - Built-in theme switching with next-themes
- 📱 **Responsive Design** - Mobile-first approach with responsive components
- 🚀 **App Router Ready** - Built with Next.js 14 App Router for optimal performance
- 🔒 **Type-Safe Development** - Full TypeScript support with strict typing
- 📊 **Data Visualization** - Charts and analytics with Recharts
- 🎯 **Form Handling** - React Hook Form with Zod validation
- 🔄 **Real-time Updates** - Supabase real-time subscriptions
- 🛠️ **Developer Experience** - ESLint, Prettier, and excellent tooling

- **Framework:** [Next.js 14](https://nextjs.org/) (App Router)
- **Authentication:** [Clerk](https://clerk.com/)
- **Database:** [Supabase](https://supabase.com/)
- **Styling:** [Tailwind CSS](https://tailwindcss.com/)
- **UI Components:** [shadcn/ui](https://ui.shadcn.com/)
## 🏗️ Tech Stack

## Prerequisites
### Core Framework
- **[Next.js 14.2.23](https://nextjs.org/)** - React framework with App Router
- **[React 18](https://react.dev/)** - UI library
- **[TypeScript](https://typescriptlang.org/)** - Type-safe development

Before you begin, ensure you have the following:
- Node.js 18+ installed
- A [Clerk](https://clerk.com/) account for authentication
- A [Supabase](https://supabase.com/) account for database
- Generated project documents from [CodeGuide](https://codeguide.dev/) for best development experience
### Authentication & Database
- **[Clerk](https://clerk.com/)** - Complete authentication solution
- **[Supabase](https://supabase.com/)** - PostgreSQL database with real-time capabilities

## Getting Started
### UI & Styling
- **[shadcn/ui](https://ui.shadcn.com/)** - Beautiful, accessible UI components
- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
- **[Radix UI](https://radix-ui.com/)** - Primitive components for accessibility
- **[Framer Motion](https://framer.com/motion/)** - Animation library
- **[Lucide React](https://lucide.dev/)** - Icon library

### Development Tools
- **[ESLint](https://eslint.org/)** - Code linting
- **[Prettier](https://prettier.io/)** - Code formatting
- **[Zod](https://zod.dev/)** - Schema validation

## 📋 Prerequisites

Before you begin, ensure you have:
- **Node.js 18+** installed ([Download here](https://nodejs.org/))
- A **[Clerk](https://clerk.com/)** account for authentication
- A **[Supabase](https://supabase.com/)** account for database
- **Git** for version control

## 🚀 Quick Start

1. **Clone the repository**
```bash
git clone <repository-url>
cd codeguide-starter-lite
git clone https://github.com/CodeGuide-dev/mvp-agency-landing.git
cd mvp-agency-landing
```

2. **Install dependencies**
Expand All @@ -38,96 +66,201 @@ Before you begin, ensure you have the following:
pnpm install
```

3. **Environment Variables Setup**
- Copy the `.env.example` file to `.env`:
```bash
cp .env.example .env
```
- Fill in the environment variables in `.env` (see Configuration section below)
3. **Set up environment variables**
```bash
cp .env.example .env.local
```
Fill in your environment variables (see [Configuration](#-configuration) section)

4. **Start the development server**
4. **Run database migrations**
```bash
npx supabase db push
```

5. **Start the development server**
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

5. **Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.**
6. **Open your browser**
Navigate to [http://localhost:3000](http://localhost:3000)

## ⚙️ Configuration

### Clerk Authentication Setup

## Configuration
1. Create a new application in [Clerk Dashboard](https://dashboard.clerk.com/)
2. Navigate to **API Keys** in your Clerk dashboard
3. Copy your keys to your `.env.local` file:

### Clerk Setup
1. Go to [Clerk Dashboard](https://dashboard.clerk.com/)
2. Create a new application
3. Go to API Keys
4. Copy the `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY`
```env
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
```

### Supabase Setup
1. Go to [Supabase Dashboard](https://app.supabase.com/)
2. Create a new project
3. Go to Project Settings > API
4. Copy the `Project URL` as `NEXT_PUBLIC_SUPABASE_URL`
5. Copy the `anon` public key as `NEXT_PUBLIC_SUPABASE_ANON_KEY`
### Supabase Database Setup

## Environment Variables
1. Create a new project in [Supabase Dashboard](https://app.supabase.com/)
2. Go to **Settings > API**
3. Copy your credentials:

Create a `.env` file in the root directory with the following variables:
```env
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
```

### Complete Environment Variables

Create a `.env.local` file with the following:

```env
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
# Supabase Database
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
```

## Features
## 📁 Project Structure

```
├── app/ # Next.js App Router
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # React components
│ ├── providers/ # Context providers
│ └── ui/ # UI components (shadcn/ui)
├── documentation/ # Project documentation
├── hooks/ # Custom React hooks
├── lib/ # Utility libraries
├── public/ # Static assets
├── supabase/ # Database schema & migrations
├── types/ # TypeScript type definitions
└── utils/ # Helper functions
```

## 🎨 UI Components

This starter includes a comprehensive set of UI components powered by **shadcn/ui**:

### Layout Components
- Accordion, Collapsible, Tabs
- Sidebar, Navigation Menu
- Breadcrumb, Pagination

### Form Components
- Input, Textarea, Select
- Checkbox, Radio Group, Switch
- Calendar, Date Picker
- Command Palette

- 🔐 Authentication with Clerk
- 📦 Supabase Database
- 🎨 Modern UI with Tailwind CSS
- 🚀 App Router Ready
- 🔄 Real-time Updates
- 📱 Responsive Design
### Feedback Components
- Alert, Dialog, Toast
- Progress, Skeleton
- Hover Card, Tooltip

## Project Structure
### Data Display
- Avatar, Badge, Card
- Table, Chart (Recharts)
- Carousel, Aspect Ratio

## 🛠️ Available Scripts

```bash
# Development
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server

# Code Quality
npm run lint # Run ESLint
npm run type-check # Run TypeScript compiler
```
codeguide-starter/
├── app/ # Next.js app router pages
├── components/ # React components
├── utils/ # Utility functions
├── public/ # Static assets
├── styles/ # Global styles
├── documentation/ # Generated documentation from CodeGuide
└── supabase/ # Supabase configurations and migrations

## 🗄️ Database Schema

The starter includes a basic Supabase schema with:

- **customers** - User profile information
- **products** - Product catalog
- **prices** - Pricing information
- **subscriptions** - User subscriptions

All tables include Row Level Security (RLS) policies for data protection.

## 📚 Documentation

The project includes comprehensive documentation in the `/documentation` folder:

- **Technical Stack Document** - Detailed breakdown of all technologies used
- **Setup Guides** - Step-by-step configuration instructions
- **Component Documentation** - Usage examples for UI components

## 🎯 Customization

### Adding New Components
```bash
npx shadcn-ui@latest add [component-name]
```

## Documentation Setup
### Customizing Themes
Edit `tailwind.config.ts` to customize colors, fonts, and spacing.

To implement the generated documentation from CodeGuide:
### Database Changes
1. Modify schema in `/supabase/migrations/`
2. Run migrations: `npx supabase db push`
3. Update TypeScript types: `npx supabase gen types typescript`

1. Create a `documentation` folder in the root directory:
```bash
mkdir documentation
```
## 🚀 Deployment

2. Place all generated markdown files from CodeGuide in this directory:
```bash
# Example structure
documentation/
├── project_requirements_document.md
├── app_flow_document.md
├── frontend_guideline_document.md
└── backend_structure_document.md
```
### Vercel (Recommended)
1. Push your code to GitHub
2. Connect your repository to [Vercel](https://vercel.com)
3. Add environment variables in Vercel dashboard
4. Deploy automatically on every push

### Other Platforms
This starter works with any platform that supports Next.js:
- Netlify
- Railway
- DigitalOcean App Platform
- AWS Amplify

## 🤝 Contributing

We welcome contributions! Please see our contributing guidelines:

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](LICENSE) file for details.

## 🆘 Support

- 📖 [Documentation](https://codeguide.dev/docs)
- 💬 [Community Discord](https://discord.gg/codeguide)
- 🐛 [Report Issues](https://github.com/CodeGuide-dev/mvp-agency-landing/issues)
- 📧 [Email Support](mailto:support@codeguide.dev)

## 🙏 Acknowledgments

Built with ❤️ by the [CodeGuide](https://codeguide.dev) team. Special thanks to:

- [Vercel](https://vercel.com) for Next.js
- [Clerk](https://clerk.com) for authentication
- [Supabase](https://supabase.com) for database
- [shadcn](https://twitter.com/shadcn) for amazing UI components

3. These documentation files will be automatically tracked by git and can be used as a reference for your project's features and implementation details.
---

## Contributing
**Ready to build something amazing?** 🚀

Contributions are welcome! Please feel free to submit a Pull Request.
[Get Started](https://codeguide.dev) | [View Demo](https://mvp-agency-landing.vercel.app) | [Documentation](https://codeguide.dev/docs)