├── .vscode
    └── settings.json
├── next.config.js
├── .eslintrc
├── pages
    ├── _app.js
    ├── coin
    │   ├── DetailCoin.module.css
    │   └── [id].js
    └── index.js
├── components
    ├── SearchBar
    │   ├── SearchBar.jsx
    │   └── SearchBar.module.css
    ├── Coins
    │   └── Coins.jsx
    ├── Coin
    │   ├── Coin.module.css
    │   └── Coin.jsx
    └── Layout.jsx
├── package.json
├── .gitignore
├── styles
    └── globals.css
└── README.md


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "editor.fontFamily": "Apl2741"
3 | }


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   reactStrictMode: false,
3 | }
4 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "next",
4 |     "next/core-web-vitals"
5 |   ],
6 |   "rules": {
7 |     "@next/next/no-img-element": "off"
8 |   }
9 | }


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import '../styles/globals.css'
 2 | 
 3 | function MyApp({ Component, pageProps }) {
 4 |   return (
 5 |     <>
 6 |       <Component {...pageProps} />
 7 |     </>
 8 |   )
 9 | }
10 | 
11 | export default MyApp
12 | 


--------------------------------------------------------------------------------
/components/SearchBar/SearchBar.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './SearchBar.module.css'
 3 | 
 4 | 
 5 | function SearchBar({ ...props }) {
 6 |     return (
 7 |         <div className={styles.search_container}>
 8 |             <input className={styles.coin_input} {...props} />
 9 |         </div>
10 |     )
11 | }
12 | 
13 | export default SearchBar
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-crypto-currency",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "next": "11.0.1",
13 |     "react": "17.0.2",
14 |     "react-dom": "17.0.2"
15 |   },
16 |   "devDependencies": {
17 |     "eslint": "7.30.0",
18 |     "eslint-config-next": "11.0.1"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/components/SearchBar/SearchBar.module.css:
--------------------------------------------------------------------------------
 1 | .search_container {
 2 |   display: flex;
 3 |   justify-content: center;
 4 |   margin-bottom: 5rem;
 5 | }
 6 | 
 7 | .search_container input {
 8 |   width: 300px;
 9 | }
10 | 
11 | .coin_input {
12 |   background: #222531;
13 |   border: none;
14 |   padding: 16px;
15 |   border-radius: 4px;
16 |   outline: none;
17 |   height: 100%;
18 |   width: 100%;
19 |   color: #e2e2e2;
20 |   font-size: 16px;
21 | }
22 | 
23 | .coin_input::placeholder {
24 |   color: #b8b5b5;
25 |   font-size: 13px;
26 | }
27 | 
28 | /* Media Query */
29 | @media only screen and (max-width: 480px) {
30 |   .search_container {
31 |     margin-left: 8rem;
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/pages/coin/DetailCoin.module.css:
--------------------------------------------------------------------------------
 1 | .coin_page {
 2 |     display: flex;
 3 |     justify-content: center;
 4 |     height: 75vh;
 5 |     align-items: center;
 6 |   }
 7 |   
 8 |   .coin_container {
 9 |     display: flex;
10 |     flex-direction: column;
11 |     justify-content: center;
12 |     align-items: center;
13 |     border: 1px solid #2fffe5;
14 |     border-radius: 10px;
15 |     padding: 4rem;
16 |     width: 400px;
17 |   }
18 |   
19 |   .coin_image {
20 |     margin-bottom: 1rem;
21 |   }
22 |   
23 |   .coin_name {
24 |     margin-bottom: 1rem;
25 |   }
26 |   
27 |   .coin_ticker {
28 |     margin-bottom: 1rem;
29 |   }
30 |   
31 |   .coin_current {
32 |     margin-bottom: 1rem;
33 |     font-size: 2rem;
34 |   }
35 |   


--------------------------------------------------------------------------------
/components/Coins/Coins.jsx:
--------------------------------------------------------------------------------
 1 | import Coin from '../Coin/Coin'
 2 | 
 3 | function Coins({ data }) {
 4 |     return (
 5 |         <div>
 6 |             {data.map(coin => (
 7 |                 <Coin
 8 |                     key={coin.id}
 9 |                     name={coin.name}
10 |                     id={coin.id}
11 |                     price={coin.current_price}
12 |                     symbol={coin.symbol}
13 |                     marketcap={coin.total_volume}
14 |                     volume={coin.market_cap}
15 |                     image={coin.image}
16 |                     priceChange={coin.price_change_percentage_24h}
17 |                 />
18 |             ))}
19 |         </div>
20 |     )
21 | }
22 | 
23 | export default Coins
24 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | a {
 2 |   color: inherit;
 3 |   text-decoration: none !important;
 4 | }
 5 | 
 6 | @import url("https://fonts.googleapis.com/css2?family=Mate+SC&display=swap");
 7 | 
 8 | * {
 9 |   box-sizing: border-box;
10 |   margin: 0;
11 |   padding: 0;
12 |   font-family: "Mate SC", serif;
13 | }
14 | 
15 | body {
16 |   background-color: #101012 !important;
17 | }
18 | 
19 | .coin_app {
20 |   display: flex;
21 |   flex-direction: column;
22 |   align-items: center;
23 |   margin-top: 10px;
24 |   color: #fff;
25 | }
26 | 
27 | /* Layout CSS */
28 | .layout {
29 |   height: 100%;
30 |   width: 100%;
31 | }
32 | 
33 | .header {
34 |   display: flex;
35 |   justify-content: center;
36 | }
37 | .coin_logo {
38 |   height: 200px;
39 |   width: 200px;
40 | }
41 | 
42 | 
43 | /* Media Query */
44 | @media only screen and (max-width: 480px) {
45 |   .header {
46 |     margin-left: 7rem;
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/pages/coin/[id].js:
--------------------------------------------------------------------------------
 1 | import styles from './DetailCoin.module.css'
 2 | import Layout from './../../components/Layout';
 3 | 
 4 | 
 5 | function CoinDetail({ data }) {
 6 |     return (
 7 |         <Layout>
 8 |             <div className={styles.coin_page}>
 9 |                 <div className={styles.coin_container}>
10 |                     <img
11 |                         src={data.image.large}
12 |                         alt={data.name}
13 |                         className={styles.coin_image} />
14 |                     <h1 className={styles.coin_name}>{data.name}</h1>
15 |                     <p className={styles.coin_ticker}>{data.symbol}</p>
16 |                     <p className={styles.coin_current}>
17 |                         {data.market_data.current_price.usd}
18 |                     </p>
19 |                 </div>
20 |             </div>
21 |         </Layout >
22 |     )
23 | }
24 | 
25 | export default CoinDetail
26 | 
27 | 
28 | 
29 | export async function getServerSideProps(context) {
30 |     const id = context.params.id
31 | 
32 |     const res = await fetch(`https://api.coingecko.com/api/v3/coins/${id}`);
33 |     const data = await res.json();
34 | 
35 |     return {
36 |         props: {
37 |             data
38 |         }
39 |     };
40 | }
41 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import Head from 'next/head'
 3 | import Layout from '../components/Layout'
 4 | import SearchBar from '../components/SearchBar/SearchBar'
 5 | import Coins from '../components/Coins/Coins'
 6 | 
 7 | 
 8 | export default function Home({ data }) {
 9 |   const [search, setSearch] = useState('');
10 | 
11 |   const filteredAllCoins = data.filter(coin =>
12 |     coin.name.toLowerCase().includes(search.toLowerCase())
13 |   );
14 | 
15 |   const handleChange = (e) => {
16 |     setSearch(e.target.value.toLowerCase())
17 |   }
18 | 
19 |   return (
20 |     <Layout>
21 |       <div>
22 |         <Head>
23 |           <title>Next | Crypto Currency</title>
24 |           <meta name="description" content="Generated by Esrafil Elahi" />
25 |         </Head>
26 | 
27 |         <SearchBar value={search} type='text' placeholder='search' onChange={handleChange} />
28 |         <Coins data={filteredAllCoins} />
29 | 
30 |       </div>
31 | 
32 |     </Layout>
33 |   )
34 | }
35 | 
36 | export const getServerSideProps = async () => {
37 |   const res = await fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=20&page=1&sparkline=false&price_change_percentage=24h")
38 |   const data = await res.json()
39 | 
40 |   return {
41 |     props: { data }
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/components/Coin/Coin.module.css:
--------------------------------------------------------------------------------
 1 | .coin_container {
 2 |   display: flex;
 3 |   justify-content: center;
 4 |   color: #03f6ff;
 5 | }
 6 | 
 7 | .coin_row {
 8 |   display: flex;
 9 |   flex-direction: row;
10 |   justify-content: flex-start;
11 |   align-items: center;
12 |   height: 80px;
13 |   border-bottom: 1px solid #2e2e2e;
14 |   width: 1000px;
15 |   padding: 0rem 2rem;
16 | }
17 | 
18 | .coin_row:hover {
19 |   background: #171718;
20 | }
21 | 
22 | .coin {
23 |   display: flex;
24 |   align-items: center;
25 |   padding-right: 24px;
26 | }
27 | 
28 | .coin_img {
29 |   height: 30px;
30 |   width: 30px;
31 |   margin-right: 10px;
32 | }
33 | 
34 | .coin_h1 {
35 |   font-size: 16px;
36 |   width: 150px;
37 | }
38 | 
39 | .coin_symbol {
40 |   text-transform: uppercase;
41 | }
42 | 
43 | .coin_data {
44 |   display: flex;
45 |   text-align: right;
46 |   justify-content: space-between;
47 |   width: 100%;
48 | }
49 | 
50 | .coin_price {
51 |   width: 170px;
52 |   margin-left: 4.5rem;
53 |   text-align: center;
54 | }
55 | 
56 | .coin_volume {
57 |   width: 100px;
58 | }
59 | 
60 | .coin_marketcap {
61 |   width: 230px;
62 | }
63 | 
64 | .coin_percent {
65 |   width: 100px;
66 | }
67 | 
68 | .red {
69 |   color: #f00606;
70 | }
71 | 
72 | .green {
73 |   color: #13c783;
74 | }
75 | 
76 | 
77 | /* Media Query */
78 | @media only screen and (max-width: 480px) {
79 |   .coin_row {
80 |     width: 500px;
81 |   }
82 |   .coin_volume {
83 |     display: none;
84 |   }
85 | }
86 | 
87 | @media only screen and (max-width: 576px) {
88 |   .coin_row {
89 |     width: 600px;
90 |   }
91 |   .coin_volume {
92 |     display: none;
93 |   }
94 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 | 
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 | 
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------
/components/Coin/Coin.jsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | import styles from './Coin.module.css'
 3 | 
 4 | 
 5 | function Coin(props) {
 6 | 
 7 |     const { id, name, price, symbol, image, volume, priceChange } = props
 8 | 
 9 |     return (
10 |         <Link href={`/coin/${id}`}>
11 |             <a>
12 |                 <div className={styles.coin_container}>
13 |                     <div className={styles.coin_row}>
14 |                         <div className={styles.coin}>
15 |                             <img src={`${image}`} alt={name} className={styles.coin_img} />
16 |                             <h1 className={styles.coin_h1}>{name}</h1>
17 |                             <p className={styles.coin_symbol}>{symbol}</p>
18 |                         </div>
19 |                         <div className={styles.coin_data}>
20 |                             <p className={styles.coin_price}>${price}</p>
21 |                             <p className={styles.coin_volume}>${volume.toLocaleString()}
22 |                             </p>
23 | 
24 |                             {priceChange < 0 ? (
25 |                                 <p className={(styles.coin_percent, styles.red)}>
26 |                                     {priceChange.toFixed(2)}%
27 |                                 </p>
28 |                             ) : (
29 |                                 <p className={(styles.coin_percent, styles.green)}>
30 |                                     {priceChange.toFixed(2)}%
31 |                                 </p>
32 |                             )}
33 |                         </div>
34 |                     </div>
35 |                 </div>
36 |             </a>
37 |         </Link>
38 |     )
39 | }
40 | 
41 | export default Coin
42 | 
43 | 


--------------------------------------------------------------------------------
/components/Layout.jsx:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import Link from 'next/link'
 3 | 
 4 | 
 5 | function Layout({ children }) {
 6 |     return (
 7 |         <div>
 8 |             <Head>
 9 |                 <title>Nexy Crypto</title>
10 |             </Head>
11 | 
12 |             <header className='header'>
13 |                 <Link href='/' passHref>
14 |                     <a>
15 |                         <svg
16 |                             width='675'
17 |                             height='375'
18 |                             viewBox='0 0 675 375'
19 |                             fill='none'
20 |                             xmlns='http://www.w3.org/2000/svg'
21 |                             className='coin_logo'
22 |                         >
23 |                             <path
24 |                                 d='M217 125.5L446.5 5L666.5 125.5L446.5 250L217 125.5Z'
25 |                                 stroke='#11FFFF'
26 |                                 strokeWidth='8'
27 |                             />
28 |                             <path
29 |                                 d='M9 125.5L238.5 5L458.5 125.5L238.5 250L9 125.5Z'
30 |                                 stroke='#11FFFF'
31 |                                 strokeWidth='8'
32 |                             />
33 |                             <line
34 |                                 x1='9'
35 |                                 y1='125'
36 |                                 x2='660'
37 |                                 y2='125'
38 |                                 stroke='#11FFFF'
39 |                                 strokeWidth='6'
40 |                             />
41 |                             <path
42 |                                 d='M124 125.5L353.5 5L573.5 125.5L353.5 250L124 125.5Z'
43 |                                 fill='url(#paint0_linear)'
44 |                             />
45 |                             <path
46 |                                 d='M246.96 323.58C249.4 323.58 251.5 323.18 253.26 322.38C255.02 321.54 256.86 320.22 258.78 318.42L263.34 323.1C258.9 328.02 253.5 330.48 247.14 330.48C240.82 330.48 235.56 328.44 231.36 324.36C227.2 320.28 225.12 315.12 225.12 308.88C225.12 302.64 227.24 297.44 231.48 293.28C235.76 289.12 241.14 287.04 247.62 287.04C254.14 287.04 259.58 289.44 263.94 294.24L259.44 299.16C257.44 297.24 255.54 295.9 253.74 295.14C251.98 294.38 249.9 294 247.5 294C243.26 294 239.7 295.38 236.82 298.14C233.94 300.86 232.5 304.36 232.5 308.64C232.5 312.88 233.92 316.44 236.76 319.32C239.64 322.16 243.04 323.58 246.96 323.58ZM305.48 301.68C305.48 308.6 302.46 312.96 296.42 314.76L307.4 330H298.4L288.38 315.9H279.08V330H272V288.06H287.6C294 288.06 298.58 289.14 301.34 291.3C304.1 293.46 305.48 296.92 305.48 301.68ZM287.9 309.48C291.9 309.48 294.62 308.86 296.06 307.62C297.5 306.38 298.22 304.4 298.22 301.68C298.22 298.92 297.48 297.04 296 296.04C294.52 295 291.88 294.48 288.08 294.48H279.08V309.48H287.9ZM332.152 330H324.952V313.44L309.352 288.06H317.092L328.552 307.14L340.012 288.06H347.752L332.152 313.44V330ZM367.493 288.06C373.853 288.06 378.493 289.28 381.413 291.72C384.333 294.16 385.793 297.92 385.793 303C385.793 308.08 384.293 311.8 381.293 314.16C378.333 316.52 373.773 317.7 367.613 317.7H360.173V330H353.093V288.06H367.493ZM368.393 311.28C372.313 311.28 374.973 310.54 376.373 309.06C377.813 307.54 378.533 305.34 378.533 302.46C378.533 299.54 377.633 297.48 375.833 296.28C374.033 295.08 371.213 294.48 367.373 294.48H360.173V311.28H368.393ZM409.949 294.54V330H402.869V294.54H390.149V288.06H422.669V294.54H409.949ZM460.2 297.96C457.36 295 453.86 293.52 449.7 293.52C445.54 293.52 442.02 295 439.14 297.96C436.3 300.92 434.88 304.52 434.88 308.76C434.88 312.96 436.3 316.54 439.14 319.5C442.02 322.46 445.54 323.94 449.7 323.94C453.86 323.94 457.36 322.46 460.2 319.5C463.08 316.54 464.52 312.96 464.52 308.76C464.52 304.52 463.08 300.92 460.2 297.96ZM465.42 324.24C461.18 328.36 455.94 330.42 449.7 330.42C443.46 330.42 438.22 328.36 433.98 324.24C429.74 320.08 427.62 314.92 427.62 308.76C427.62 302.56 429.74 297.4 433.98 293.28C438.22 289.12 443.46 287.04 449.7 287.04C455.94 287.04 461.18 289.12 465.42 293.28C469.66 297.4 471.78 302.56 471.78 308.76C471.78 314.92 469.66 320.08 465.42 324.24Z'
47 |                                 fill='white'
48 |                             />
49 |                             <path
50 |                                 d='M285.83 345.27V363H282.29V345.27H275.93V342.03H292.19V345.27H285.83ZM312.755 348.84C312.755 352.3 311.245 354.48 308.225 355.38L313.715 363H309.215L304.205 355.95H299.555V363H296.015V342.03H303.815C307.015 342.03 309.305 342.57 310.685 343.65C312.065 344.73 312.755 346.46 312.755 348.84ZM303.965 352.74C305.965 352.74 307.325 352.43 308.045 351.81C308.765 351.19 309.125 350.2 309.125 348.84C309.125 347.46 308.755 346.52 308.015 346.02C307.275 345.5 305.955 345.24 304.055 345.24H299.555V352.74H303.965ZM320.812 358.23L318.712 363H314.932L324.172 342.03H327.952L337.192 363H333.412L331.312 358.23H320.812ZM329.872 354.96L326.062 346.32L322.252 354.96H329.872ZM349.677 359.79C350.897 359.79 351.947 359.59 352.827 359.19C353.707 358.77 354.627 358.11 355.587 357.21L357.867 359.55C355.647 362.01 352.947 363.24 349.767 363.24C346.607 363.24 343.977 362.22 341.877 360.18C339.797 358.14 338.757 355.56 338.757 352.44C338.757 349.32 339.817 346.72 341.937 344.64C344.077 342.56 346.767 341.52 350.007 341.52C353.267 341.52 355.987 342.72 358.167 345.12L355.917 347.58C354.917 346.62 353.967 345.95 353.067 345.57C352.187 345.19 351.147 345 349.947 345C347.827 345 346.047 345.69 344.607 347.07C343.167 348.43 342.447 350.18 342.447 352.32C342.447 354.44 343.157 356.22 344.577 357.66C346.017 359.08 347.717 359.79 349.677 359.79ZM362.197 342.03H365.737V352.26L375.337 342.03H379.837L371.407 351.21L379.957 363H375.757L368.797 353.82L365.737 357.12V363H362.197V342.03ZM398.05 342.03V345.36H386.86V350.91H396.91V354.06H386.86V359.67H398.41V363H383.32V342.03H398.05ZM419.689 348.84C419.689 352.3 418.179 354.48 415.159 355.38L420.649 363H416.149L411.139 355.95H406.489V363H402.949V342.03H410.749C413.949 342.03 416.239 342.57 417.619 343.65C418.999 344.73 419.689 346.46 419.689 348.84ZM410.899 352.74C412.899 352.74 414.259 352.43 414.979 351.81C415.699 351.19 416.059 350.2 416.059 348.84C416.059 347.46 415.689 346.52 414.949 346.02C414.209 345.5 412.889 345.24 410.989 345.24H406.489V352.74H410.899Z'
51 |                                 fill='white'
52 |                             />
53 |                             <defs>
54 |                                 <linearGradient
55 |                                     id='paint0_linear'
56 |                                     x1='348.75'
57 |                                     y1='5'
58 |                                     x2='348.75'
59 |                                     y2='250'
60 |                                     gradientUnits='userSpaceOnUse'
61 |                                 >
62 |                                     <stop stopColor='#06F0FF' />
63 |                                     <stop offset='1' stopColor='#00FFFF' />
64 |                                 </linearGradient>
65 |                             </defs>
66 |                         </svg>
67 |                     </a>
68 |                 </Link>
69 |             </header>
70 | 
71 |             <main>{children}</main>
72 | 
73 |         </div>
74 |     )
75 | }
76 | 
77 | export default Layout
78 | 


--------------------------------------------------------------------------------