GithubProfileExplorer

🌟 React GitHub Profile Explorer - Explore GitHub profiles effortlessly with this React-based application. Built with Vite, TypeScript, and TailwindCSS, this app provides a fast and responsive interface to search and view GitHub user profiles.

Stars
1
Committers
1

🌟 React GitHub Profile Explorer

Explore GitHub profiles effortlessly with this React-based application. Built with Vite, TypeScript, and TailwindCSS, this app provides a fast and responsive interface to search and view GitHub user profiles.

🚀 Features

  • 🔍 Search GitHub profiles by username
  • 📊 View detailed user information and statistics
  • 🗂️ Responsive design with TailwindCSS
  • ⚡ Fast build and development setup with Vite
  • ✅ Type-safe codebase with TypeScript

📋 Prerequisites

Before you begin, ensure you have met the following requirements:

  • Node.js (version 18 or newer)
  • pnpm (version 7 or newer is recommended)

🛠️ Installation

Follow these steps to set up and run the project locally:

  1. Clone the Repository:
   git clone https://github.com/techno-trace/GithubProfileExplorer.git
   cd GithubProfileExplorer

Install PNPM(Optional):

It's fast and efficient than any other package managers out there! Checkout PNPM at - https://pnpm.io/

    
    npm i -g pnpm # only if you don't have pnpm already installed

Install Dependencies:

Using PNPM


    pnpm i

Or Using NPM


    npm i

Set Up Environment Variables: Create a .env file in the root directory and add your GitHub token:

VITE_GITHUB_TOKEN="your_github_token_here" VITE_API_BASE_URL="https://localhost:5174"

Run the Development Server:

    pnpm dev

    Open http://localhost:5174 to view it in your browser.

OR

    npm dev

    Open http://localhost:5174 to view it in your browser.

📦 Building for Production

To build the project for production, run:

    pnpm build

OR

    npm build

This will produce optimized files in the dist directory. 🔄 Previewing the Build

After building the project, you can preview it using Vite's preview command:

    pnpm preview

OR

    npm preview

🔄 Testing the App

You can run the test command which will open playwright test in ui and if you want more info on playwright you can visit Playwright:

    pnpm test

OR

    npm test

🤝 Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

📝 License

Distributed under the MIT License. See LICENSE for more information. ✨ Acknowledgements

React
Vite
Tailwind CSS

📧 Contact

Digambar Saha - [email protected]

Project Link: https://github.com/techno-trace/GithubProfileExplorer

Related Projects