https://github.com/aminehck/trendingrepos
Small Vue app that will list the most starred Github repos that were created in the last 30 days.
https://github.com/aminehck/trendingrepos
api axios axios-vue github github-api repositories vue-cli3 vuejs
Last synced: 3 months ago
JSON representation
Small Vue app that will list the most starred Github repos that were created in the last 30 days.
- Host: GitHub
- URL: https://github.com/aminehck/trendingrepos
- Owner: aminehck
- Created: 2020-04-20T20:06:54.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T03:54:25.000Z (over 2 years ago)
- Last Synced: 2023-03-06T14:17:24.198Z (about 2 years ago)
- Topics: api, axios, axios-vue, github, github-api, repositories, vue-cli3, vuejs
- Language: Vue
- Homepage:
- Size: 2.51 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Trending GitHub Repositories
A small Vue.js application to list **the most starred GitHub repositories** that were created in the last 30 days.
## Demo
[Live Demo](https://trending-github-repos.netlify.app/)
## How does it works ?
### - Fetching Data
After designing the ***Repository*** & ***RepositoryList*** compenents, connecte the app via the [GitHub API](https://api.github.com/search/repositories?q=created:>2017-10-22&sort=stars&order=desc) to get the top starred repositories by passing two parameters : `created` date (last 30 days) & the current page (by default `page = 1`).
### - Infinite Scrolling
Configure the ***Intersection Observer*** and attach it to the ***Trigger*** component, then emit a ***triggerIntersected*** event to be used to trigger `loadMore` function and fetch additional repositories.
## Includes
- Vuejs, Vue-cli3
- Axios
- Intersection Observer
- GitHub API
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).