https://github.com/earthskyorg/practice-with-react-typescript-crypto-dictionary
Practice With React TypeScript for Crypto Dictionary
https://github.com/earthskyorg/practice-with-react-typescript-crypto-dictionary
Last synced: 3 months ago
JSON representation
Practice With React TypeScript for Crypto Dictionary
- Host: GitHub
- URL: https://github.com/earthskyorg/practice-with-react-typescript-crypto-dictionary
- Owner: earthskyorg
- Created: 2022-10-31T00:27:40.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-31T00:28:40.000Z (over 2 years ago)
- Last Synced: 2025-01-19T23:30:57.909Z (5 months ago)
- Language: TypeScript
- Size: 357 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Crypto Dictionary
[
](https://codeisneverodd.github.io/practice-with-react-typescript-for-crypto-dictionary/)
## Table of Contents
- [Languages](#languages)
- [Frameworks](#frameworks)
- [Design Tools](#design-tools)
- [APIs](#apis)
- [coinpaprika](#coinpaprika)
- [Guides](#guides)
- [Make Skeleton Site](#make-skeleton-site)
- [Result of Skeleton](#result-of-skeleton)
- [Color the skeletons](#color-the-skeletons)
- [Result of Coloring](#result-of-coloring)
- [Deploy](#deploy)
- [Result of Deployment](#result-of-deployment)
## You can check result
[Here: ](https://codeisneverodd.github.io/practice-with-react-typescript-for-crypto-dictionary/)
## Languages
[](https://www.typescriptlang.org/)
[](https://en.wikipedia.org/wiki/JavaScript)
[](https://en.wikipedia.org/wiki/HTML5)
[](https://en.wikipedia.org/wiki/CSS)
## Frameworks
[](https://reactjs.org/)
## Notable Packages
[](https://styled-components.com/)
[](https://react-query.tanstack.com/)
[](https://apexcharts.com/)
[](https://apexcharts.com/)
## Design Tools
[](https://www.figma.com/)
## APIs
### coinpaprika
[](https://api.coinpaprika.com/)
- Purpose: Fetch cryptocurrency data
- Guide: [api.coinpaprika.com](https://api.coinpaprika.com/)
## Guides
### Make Skeleton Site
1. Initialize project using Create React App, `npx create-react-app my-app --template typescript`.
2. Erase useless files, in my case I delete all the files except `App.tsx` and `index.tsx`.
3. Make `api.ts` file and define api functions.
3. Install react-query via npm, `npm i react-query`.
3. Make `routes` folder.
3. Make `Home.tsx` file in `routes` folder and fetch all data you need by using `api.ts` and `react-query`.
3. Make `componets` folder.
3. Make `Coin.tsx` file in `components` folder and define the `Coin` component using props from `Home.tsx`.
3. Make `Detail.tsx` file in `routes` folder and fetch all data you need by using `api.ts` and `react-query`.
3. Install react-router-dom via npm, `npm i react-router-dom`.
3. Make `Router.tsx` file and define routes for `Home.tsx` and `Detail.tsx`.
3. Add `Router` component to `App.tsx` by importing it from `Router.tsx`.
3. Add `useParams` in `Detail.tsx` file to get `coinId` parameter from url.
3. Install apexcharts.js via npm, `npm install apexcharts --save`.
3. Make `Chart.tsx` file in `routes` folder and fetch all data you need by using `api.ts` and `react-query`.
3. Link `Coin` compenents in `Home.tsx` to navigate to `Detail.tsx` .
3. Make `Back` Components in `Detail.tsx` to navigate to `Home.tsx`.
3. Make `MoreDetails` Components in `Detail.tsx`.
3. Make `Tab` in `Detail.tsx` show and hide `Chart.tsx` and `MoreDetails.tsx`. Done.
#### Result of Skeleton
> Please dont' care about the coloring things in this stage, just fetch and show data.
### Color the skeletons
1. Design it with design tools or something, in my case Figma.
2. Visit [Google Fonts](https://fonts.google.com/) and select the fonts you want to use. Copy the `` to embed.
3. Install react-helmet via npm, `npm install --save react-helmet`.
4. Add `Helmet` component above `Router` component and embed the link that we copied in step 2.
5. Install styled-compents via npm, `npm install --save styled-components`.
6. Make `styles` folder.
7. Remove default settings in CSS. You can do this in various ways. In my case, define `createGlobalStyle` in `App.tsx`
and copy and paste the code in [here](https://meyerweb.com/eric/tools/css/reset/).
8. Make `styled.d.ts` file in `styles` folder and declare module `'styled-components'` and add interface `DefaultTheme`.
9. Make `theme.ts` file in `styles` folder and define colors in themes using `DefaultTheme` you want to use. In my
case, I defined `darkTheme` and `lightTheme` .
10. Make `global.d.ts` file in `src` folder and declare modules to use image files.
11. Show off your CSS skills! Make styled components in the files you need. If you have to make a identical styled
components in different files, make `styles.tsx` file in `styles` folder, put them there, and import them where you
need.
#### Result of Coloring
> Please don't just copy my design or code. That doesn't help you at all.
### Deploy
1. You can deploy your website in various ways. In my case, I deployed by publishing files to `gh-pages` branch on
GitHub.
2. Make Repository on GitHub and push all the files.
3. Install gh-pages via npm, `npm install gh-pages --save-dev`.
4. Go to `package.json` and add `"homepage"` right above the last curly brace.
Use `https://user-id-here.github.io/repository-name-here`
1. ```json
},
"homepage": "https://codeisneverodd.github.io/practice-with-react-typescript-for-crypto-dictionary/"
}
```
5. Add `"deploy"` and `"predeploy"` to `script` in `package.json`.
1. ```json
"scripts": {
"deploy": "gh-pages -d build",
"predeploy": "npm run build"
},
```
6. Finish deployment by entering `npm run deploy` in the console.
> Don't forget to add `basename={process.env.PUBLIC_URL}` in your BrowserRouter
#### Result of Deployment
