G-Insight is a React-based web application designed to retrieve and display contacts from Google’s API. This project aims to simplify the process of accessing and managing contacts stored in a Google account.
- Google Authentication: Securely log in using your Google account.
- Contact Retrieval: Fetch and display all contacts from your Google account.
- User Interface: Clean and intuitive UI for managing contacts.
- Clone the repository:
git clone https://github.com/your-username/g-insight.git cd g-insight
- Install dependencies:
npm install
- Set up environment variables:
- Create a .env file in the root directory.
- Add the following environment variables:
REACT_APP_GOOGLE_CLIENT_ID=your-google-client-id REACT_APP_GOOGLE_CLIENT_SECRET=your-google-client-secret
- Start the development server:
npm start
- Open the application in your browser (typically at http://localhost:3000).
- Click the "Login with Google" button to authenticate.
- Grant the application access to your Google contacts.
- View and manage your contacts through the application's interface.
├── public
│ ├── index.html
│ └── ...
├── src
│ ├── components
│ │ ├── ContactList.js
│ │ ├── ContactItem.js
│ │ └── ...
│ ├── context
│ │ ├── AuthContext.js
│ │ └── ...
│ ├── services
│ │ ├── googleApi.js
│ │ └── ...
│ ├── App.js
│ ├── index.js
│ └── ...
├── .env
├── package.json
└── README.md
- React: Frontend library for building user interfaces.
- Google API: For accessing Google contacts.
- OAuth 2.0: For secure authentication.