Github History App with Next.js and NestJS

A web app for browsing the commit history of any GitHub user's repositories. Search users with debounced input, pick a repository and branch, and read commits with author, message and relative timestamps on a scroll-linked, motion-driven timeline. A Next.js frontend pairs with a NestJS backend that proxies the GitHub API and documents every route with Swagger.

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
• Motion-driven UI — masked line reveals, staggered card entrances and animated dropdowns
• Scroll-linked progress indicator on the commit list
• Single npm run dev at the root boots the API and the client together
• 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
• Framer Motion
• NestJS
• Axios
• Swagger
• Jest
• date-fns
• react-hot-toast
• just-debounce-it
• concurrently
• Vercel

Getting Started

Prerequisites

• Node.js 18+
• npm

Installation

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

Install dependencies for both workspaces:

npm --prefix backend install
npm --prefix frontend install

Running locally

From the repository root, start the backend and the frontend together:

npm run dev

Or run them separately:

npm --prefix backend run start:dev
npm --prefix frontend run dev

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

Build

Frontend:

npm --prefix frontend run build

Backend:

npm --prefix backend run build

Command	Action
npm run dev	Runs backend and frontend concurrently
npm run dev:backend	Starts only the NestJS API in watch mode
npm run dev:frontend	Starts only the Next.js dev server
npm --prefix backend run test	Runs the backend unit tests
npm --prefix backend run test:e2e	Runs the backend e2e suite
npm --prefix frontend run lint	Lints the frontend

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/
│   │   │   ├── Dropdown.tsx
│   │   │   └── Input.tsx
│   │   ├── Commit.tsx
│   │   ├── Loader.tsx
│   │   └── SearchButton.tsx
│   ├── hooks/
│   ├── pages/
│   │   ├── _app.tsx
│   │   └── index.tsx
│   ├── services/
│   ├── styles/
│   ├── utils/
│   ├── next.config.js
│   ├── package.json
│   ├── tailwind.config.js
│   └── tsconfig.json
├── images/
├── package.json
└── 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.

---