Github History App with Next.js and NestJS

A web app to browse the commit history of any GitHub user's repositories. Built with Next.js on the frontend and NestJS on the backend, it fetches data from the GitHub API and displays commits with author info, messages, and relative timestamps.

Demo · Report issue · Suggest something

Table of Contents

• Table of Contents
• Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
  • Running locally
  • Build
• Environment Variables
• Project Structure
• Demo
• API Reference
• Contributing
• License

Features

• Browse repositories for any GitHub user
• View branches for a selected repository
• View commit history with author, message, and relative date
• Search GitHub users with debounced input
• Dual fetch mode: client-side (GitHub API) or server-side (NestJS backend)
• Swagger API documentation at /api/docs
• Responsive design with Tailwind CSS
• Toast notifications for errors and status updates
• Relative time display with date-fns
• Type-safe codebase with TypeScript
• Unit and e2e testing with Jest

Tech Stack

• Next.js 12
• React 18
• TypeScript
• Tailwind CSS
• NestJS
• Axios
• Swagger
• Jest
• date-fns
• react-hot-toast
• just-debounce-it
• Vercel

Getting Started

Prerequisites

• Node.js 16+
• npm

Installation

git clone https://github.com/wrujel/github-history.git
cd github-history

Install dependencies for both frontend and backend:

cd frontend
npm install
cd ../backend
npm install

Running locally

Start the backend server:

cd backend
npm run start:dev

Start the frontend dev server:

cd frontend
npm run dev

Open http://localhost:3000 with your browser to see the result. The backend API runs on http://localhost:8080.

Build

Frontend:

cd frontend
npm run build

Backend:

cd backend
npm run build

Environment Variables

To run this project, you will need to add the following environment variables to your .env file.

Variable	Description	Required
PORT	Backend server port (default: 8080)	No
NEXT_PUBLIC_SERVER_URL	URL of the NestJS backend server (default: http://localhost:8080)	No
NEXT_PUBLIC_FETCH_MODE	Fetch mode: client to call GitHub API directly, server to use the backend (default: client)	No

Project Structure

/
├── backend/
│   ├── src/
│   │   ├── models/
│   │   │   └── api.models.ts
│   │   ├── app.controller.ts
│   │   ├── app.module.ts
│   │   ├── app.service.ts
│   │   └── main.ts
│   ├── test/
│   ├── nest-cli.json
│   ├── package.json
│   └── tsconfig.json
├── frontend/
│   ├── components/
│   │   ├── inputs/
│   │   └── ...
│   ├── hooks/
│   ├── pages/
│   │   └── index.tsx
│   ├── services/
│   ├── styles/
│   ├── utils/
│   ├── next.config.js
│   ├── package.json
│   ├── tailwind.config.js
│   └── tsconfig.json
├── images/
│   └── screenshot.png
└── LICENSE

Demo

You can check out the demo:

API Reference

The backend exposes a REST API with Swagger documentation available at /api/docs.

Method	Endpoint	Description	Auth Required
GET	/	Server status and version info	No
POST	/api/user	Get GitHub user profile data	No
POST	/api/repos	Get repositories for a GitHub user	No
POST	/api/branches	Get branches for a repository	No
POST	/api/commits	Get commits for a branch	No
POST	/api/data	Get all data (user, repos, branches, commits)	No

Contributing

Contributions are welcome! If you have suggestions or find bugs, please open an issue or 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

License

This project is licensed under the MIT License.

---