GitHub Showcase

A platform for developers to showcase their open source contributions.

Features • Tech Stack • Getting Started • Environment Variables • Screenshots • API Routes • Contributing • License

🌟 Share Your Contributions - Showcase your open source contributions with the community

🔍 Discover Others' Work - Browse contributions from other developers

📊 GitHub Integration - Connect with GitHub to display your contribution statistics

👥 Community Recognition - Get feedback and recognition for your open source work

🏷️ Categorization - Organize contributions by difficulty, type, and skills

⚡ Modern Tech Stack - Built with Next.js, Prisma, and PostgreSQL

• Frontend: Next.js with TypeScript, Tailwind CSS, and ShadCN UI
• Backend: Next.js API routes
• Database: PostgreSQL with Prisma ORM
• Authentication: GitHub OAuth
• Deployment: Vercel
• CI/CD: GitHub Actions

• Node.js (v20+)
• npm or yarn
• PostgreSQL database

1. Clone the repository:

   git clone https://github.com/yourusername/github-showcase.git
   cd github-showcase

2. Install dependencies:

   npm install

3. Set up your environment variables (see Environment Variables)

4. Set up the database:

   npx prisma generate
   npx prisma db push

5. Run the development server:

   npm run dev

6. Open http://localhost:3000 in your browser.

Create a .env file with the following variables:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/github_showcase"

# GitHub OAuth
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

# Next Auth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret

# GitHub API
GITHUB_TOKEN=your_github_personal_access_token

Dashboard view showing recent contributions

User profile with GitHub activity visualization

Detailed view of a contribution

• GET /api/auth/[...nextauth] - NextAuth authentication routes

• GET /api/contributions - Get all approved contributions
• GET /api/contributions/:id - Get a specific contribution
• POST /api/contributions - Create a new contribution
• PUT /api/contributions/:id - Update a contribution
• DELETE /api/contributions/:id - Delete a contribution

• GET /api/users/:username - Get user profile
• GET /api/users/:username/contributions - Get user's contributions

The application uses the following database schema:

model User {
  id            String         @id @default(cuid())
  username      String         @unique
  githubId      String         @unique
  createdAt     DateTime       @default(now())
  contributions Contribution[]
}

model Contribution {
  id               String     @id @default(cuid())
  user             User       @relation(fields: [userId], references: [id])
  userId           String
  title            String
  about            String
  repoUrl          String
  prUrl            String
  company          String?
  difficulty       Difficulty
  description      String     @default("")
  status           Status     @default(PENDING)
  createdAt        DateTime   @default(now())
  updatedAt        DateTime   @updatedAt
  contributionType String
  skill            String
}

enum Status {
  PENDING
  APPROVED
  REJECTED
}

enum Difficulty {
  EASY
  MODERATE
  HARD
}

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

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

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

• Next.js
• Prisma
• Tailwind CSS
• ShadCN UI
• GitHub API

Made with ❤️ by Vipin