This project is a web application that use the GitHub API to perform various actions such as user authentication, displaying user information, repository creation, and uploading files to existing repositories.
- Clone this repository to your local machine.
- Make sure you have Node.js installed on your system.
- Open a terminal in the project directory and run the following command to install dependencies and run the project:
cd github-oauth-login-frontend
npm install
npm run dev
cd github-oauth-login-backend
npm install
npm run start
- Read the GitHub documentation for OAuth Apps here
- Create a new OAuth App here
- Obtain the
Client ID
andClient Secret
generated for your OAuth App.
- Create a
.env.production
file in the root directory. - Add the following variables to the .env file:
CLIENT_ID
=your_client_id_hereBACKEND_URL
=your_backend_url_hereREDIRECT_URI
=your_redirect_uri_here
- Create a
.env
file in the root directory. - Add the following variables to the .env file:
CLIENT_ID
=your_client_id_hereCLIENT_SECRET
=your_client_secret_hereREDIRECT_URI
=your_redirect_uri_herePORT
=your_port_backend_here
The application allows users to authenticate using their GitHub account. To do this, users must follow the authentication process in the application, which includes exchanging authorization codes with the GitHub API.
Show the data of the authenticated user in the application after they have successfully logged in using their GitHub account.
Once authenticated, the user can create new repositories in their GitHub account. The application provides a form where the repository name, URL (optional), description (optional), and privacy (public or private) can be entered.
Additionally, the application allows the user to upload files to existing repositories in their GitHub account. The user can specify the repository name, the directory to which the files should be uploaded, the commit title, and the files to be uploaded.
This project was created with the goal of learning and improving skills in various areas, including:
- Working with Lit for creating dynamic web components.
- Developing using vanilla JavaScript to handle client-side functionality.
- Implementing best practices in coding and project organization.
- Gaining proficiency in web development techniques.
- JavaScript Vanilla: Vanilla JavaScript refers to the use of plain JavaScript without any additional libraries or frameworks. In this project, vanilla JavaScript is used for handling logic and interactions.
- HTML5: HyperText Markup Language (HTML) is the standard markup language for creating web pages and web applications. It is used to structure the content of the application.
- CSS3: Cascading Style Sheets (CSS) is used for styling the HTML elements and components, enhancing the visual presentation and layout of the application.
- Lit: Lit is a lightweight library for building web components with modern JavaScript syntax. It provides efficient and reactive rendering, making it ideal for creating fast and dynamic user interfaces.
- Shoelace: Shoelace is a collection of web components built with modern CSS Custom Properties and the latest web standards. It provides customizable UI components that are easy to use and style.
- Vite.js: & Node.js: Vite.js is a rapid build tool utilized for swift web development, offering a blazing-fast development server with hot module replacement (HMR) and an optimized production build. Meanwhile, Node.js serves as a JavaScript runtime environment facilitating server-side logic and API request handling, leveraging its extensive library ecosystem for scalable backend development.
- npm: NPM (Node Package Manager) is a widely-used package manager for Node.js, enabling developers to easily install, manage, and share reusable code packages. It provides access to a vast repository of open-source packages, simplifying dependency management and accelerating the development process.
- ChatGPT 3.5 Used for doubts, consultations, and solving occasional errors 😉
Contributions are welcome. If you would like to contribute to this project, please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature/new-feature
). - Make your changes and commit them (
git commit -am 'Add new feature'
). - Push your branch (
git push origin feature/new-feature
). - Open a Pull Request.
This project is licensed under the MIT License.
The trademarks, logos, and any other third-party materials used in this project belong to their respective owners. This project is not endorsed by or affiliated with GitHub or any other third-party service providers mentioned herein.