CALEB AND BROWN CODING CHALLENGE

caleb-and-brown-challenge.vercel.app

Use Locally

Clone repo
npm install
npm run dev
npm run test for tests.

Challenge Targets

Task	Completed	Evidence
Pagnated List of Currencys	True	Pagnated List of Currencys
Detailed Cyrpto Page	True	Detailed Cyrpto Page
Filter Cyrptos name/sym	True	Filter
Provide Loading State	True	Loading State
Error Is data call fails	True	Error State
Unit test	True	Testing
Trending Page or Tab	True	Volume Trending
Showcase creativity	True	Site Wide
Global Market Data	False	Global Defi Data

Thought Process

Why I used getStaticProps

export const getStaticProps = async () => {
};

To utilize next js data fetching features for the data to be fetched at build time. I also fetch data using vanilla react to demonstrate diffrent methods of fetching data.

Why I used Dynamic Page

[id].js

So each coin in the list can be clicked and you can acsess a more detailed market page. Each detailed page will be pushed to /detailed/[coinid]

Learnings.

I Should write my test immediately after finished component for time efficiency and making them more practical at finding errors early.
The challenge prefered typescript which I haven't had much exposure to. But since being assigned the assignment I have been studying typescript.