Skip to content

🌟 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.

Notifications You must be signed in to change notification settings

techno-trace/GithubProfileExplorer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

5 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🌟 React GitHub Profile Explorer

React Vite TypeScript License

Demo1 Demo2 Demo3 Demo4

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:

Generate 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

Chrome Firefox Safari

🀝 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

About

🌟 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.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published