codeisneverodd/practice-with-react-typescript-for-crypto-dictionary

🔭 Explore 30,000+ cryptos with their real-time price, chart, supplied amount, and more!!

Crypto Dictionary

Table of Contents

• Languages
• Frameworks
• Design Tools
• APIs
  • coinpaprika
• Guides

  • Make Skeleton Site

    • Result of Skeleton

  • Color the skeletons

    • Result of Coloring

  • Deploy

    • Result of Deployment

You can check result

Here:

Languages

Frameworks

Notable Packages

Design Tools

APIs

coinpaprika

• Purpose: Fetch cryptocurrency data
• Guide: 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.
4. Install react-query via npm, npm i react-query.
5. Make routes folder.
6. Make Home.tsx file in routes folder and fetch all data you need by using api.ts and react-query.
7. Make componets folder.
8. Make Coin.tsx file in components folder and define the Coin component using props from Home.tsx.
9. Make Detail.tsx file in routes folder and fetch all data you need by using api.ts and react-query.
10. Install react-router-dom via npm, npm i react-router-dom.
11. Make Router.tsx file and define routes for Home.tsx and Detail.tsx.
12. Add Router component to App.tsx by importing it from Router.tsx.
13. Add useParams in Detail.tsx file to get coinId parameter from url.
14. Install apexcharts.js via npm, npm install apexcharts --save.
15. Make Chart.tsx file in routes folder and fetch all data you need by using api.ts and react-query.
16. Link Coin compenents in Home.tsx to navigate to Detail.tsx .
17. Make Back Components in Detail.tsx to navigate to Home.tsx.
18. Make MoreDetails Components in Detail.tsx.
19. 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 and select the fonts you want to use. Copy the <link> 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.
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

5.    },
        "homepage": "https://codeisneverodd.github.io/practice-with-react-typescript-for-crypto-dictionary/"
      }

6. Add "deploy" and "predeploy" to script in package.json.

7.    "scripts": {
          "deploy": "gh-pages -d build",
          "predeploy": "npm run build"
        },

8. 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