Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/idurar/ant-design-redux-typescript
Github Repos React App with Typescript - Starter Project built with react redux typescript ant design
https://github.com/idurar/ant-design-redux-typescript
ant-design antd boilerplate less react redux redux-thunk starter typescript
Last synced: 2 months ago
JSON representation
Github Repos React App with Typescript - Starter Project built with react redux typescript ant design
- Host: GitHub
- URL: https://github.com/idurar/ant-design-redux-typescript
- Owner: idurar
- Created: 2022-02-05T21:23:41.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-04-19T12:57:43.000Z (almost 2 years ago)
- Last Synced: 2024-10-12T13:14:34.522Z (3 months ago)
- Topics: ant-design, antd, boilerplate, less, react, redux, redux-thunk, starter, typescript
- Language: TypeScript
- Homepage: https://www.idurarapp.com
- Size: 580 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Starter Project built with React Redux Typescript Ant Design
This is an open source Github project called "Github Repos React App with Typescript" that is built using React, Redux and Ant Design UI library. The purpose of the application is to show GitHub repositories that have the most stars, based on data fetched from the Github API.
The app has several features such as the ability for a user to mark a repository as a favorite by clicking on a heart icon which will store the details locally for future use. Additionally, the user can filter the list of repositories by programming language.
The project serves as a starter boilerplate for anyone interested in building a similar application using React, Redux, and TypeScript. It comes with basic functionalities already implemented, that can be used as a foundation to build other features.
The project is open source and can be accessed via Github. Users are free to modify, distribute, and use the code for their personal or commercial projects, under the terms of the MIT License.
#
Demo : [https://github-repos-react-typescript.vercel.app/](https://github-repos-react-typescript.vercel.app/)
#
Sure! Here are some code snippets from the Github Repos React App with Typescript project:
**Fetching data from Github API**
```typescript
export const fetchRepositories = async (language: string): Promise => {
const response = await axios.get(
`https://api.github.com/search/repositories?q=stars:%3E1+language:${language}&sort=stars&order=desc&type=Repositories`
);
return response.data.items;
};
```
**Redux action for marking a repo as favorite**
```typescript
export const toggleFavoriteRepo = (repo: Repository): AppActions => ({
type: TOGGLE_FAVORITE_REPO,
payload: { repo },
});
```
**Rendering the list of repositories**
```tsx
const RepoList: React.FC = ({ repos, toggleFavorite }) => {
if (repos.length === 0) {
return ;
}
return (
(
}
onClick={() => toggleFavorite(repo)}
style={{ color: repo.isFavorite ? "red" : "grey" }}
/>,
]}
>
}
title={{repo.full_name}}
description={<>{repo.description || "No description available"}>}
/>
)}
/>
);
};
```
These are just a few examples of the codebase in this project. The full source code is available on the Github repository linked earlier.
### install App
yarn install
### start App
yarn start