GitHub Commit Explorer

🐳 DEMO: https://github-commit-explorer.vercel.app/

Explore your Git commit history with ease! GitHubCommitExplorer is a sleek, real-time application that displays the commit history of its own repository. Built using the latest technologies like React, Typescript, Tailwind, and Next.js, it provides a detailed view of each commit with human-readable timestamps.

Features 🌟

• ✅ User-Friendly Interface: Built with Tailwind for a responsive, intuitive design.
• ✅ Real-Time Updates: Timestamps update live, without needing to refresh the page.
• ✅ Refresh Button: Fetch the latest commits without reloading the page, complete with a smooth loading indicator.
• ✅ View Code Changes: Explore changes in the code for each commit, providing an understanding of what was modified, added, or removed.

---

• ⚡ Next.js with App Router support
• 🔥 Type checking TypeScript
• 💎 Integrate with Tailwind CSS
• 🎨 Shadcn/UI reusable components built using Radix UI
• ✅ Strict Mode for TypeScript and React 18
• 📏 Linter with ESLint
• 💖 Code Formatter with Prettier
• 🦊 Husky for Git Hooks
• 🚫 Lint-staged for running linters on Git staged files
• 🚓 Lint git commit with Commitlint
• 👷 Run checks with GitHub Actions - CI
• 💡 Absolute Imports using ~ prefix
• 🌐 Deployed on Vercel
• 🌙 Light/Dark Theme support

Running Locally

1. Clone the repository

git clone https://github.com/velenyx/systeme.io-task

2. Install dependencies using yarn

corepack enable
yarn set version from sources
yarn

3. Copy the .env.example to .env and update the variables.

cp .env.example .env

4. Start the development server

yarn dev

Open http://localhost:3000 with your favorite browser to see your project.

⚙️ Environment Variables

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

• GITHUB_TOKEN - Your GitHub Personal Access Token.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
corepack enable	Enables Corepack to manage package managers
yarn set version from sources	Sets Yarn to the latest version from sources
yarn install	Installs dependencies
yarn dev	Starts the development server at localhost:3000
yarn build	Builds the application for production usage
yarn start	Starts a Node.js server for the production build
yarn lint	Runs the linter on the project files
yarn lint:ts:check	Checks ESLint errors
yarn lint:ts:fix	Fixes ESLint issues
yarn format:check	Checks formatting rules on all files
yarn format:fix	Applies formatting rules to all files
yarn typecheck	Performs a type check on TypeScript files
yarn prepare	Sets up Husky for git hooks

⭐ Show Your Support

If this test project has helped or inspired you, please consider giving it a 💫 on GitHub. Or, if you simply liked it, a star is also much appreciated!

This section provides a friendly reminder to users about supporting the project, fostering a positive community interaction.