This is your fourth project, a coin stats app.
You will be using https://styled-components.com/ + SASS, free of choice depending on components and complexity.
You will be using typescript too.
Redux isn't mandatory, you can store in context or component state, but if you want to practice redux more then go ahead.
**Create an account with your atis credentials on rapidapi. The API is https://rapidapi.com/Coinranking/api/coinranking1
A key should be autogenerated and set already for you, if not then you can create it yourself, the API is well documented and has everything you need.
Same similar config like project 3.**
https://cdn.dribbble.com/users/82398/screenshots/10080034/media/ef0f89123adf4bb5597d2f155a49414b.jpg
NO JIRA BOARD
Create feature branches as you work and create PR's then merge them yourself, dont commit on master, as I will check the PR's and disucss code,quality when I come back. You can work on whatever you want first, no strict order.
Sidemenu on the left is just static icons, default selected as in the image. There isnt navigation. In the header the dominance and user profile + notifications aren't needed. Asset summary in the bottom isn't needed aswell.
The date in the header the current date. Currency isn't needed, default Dollars(USD).
In the main content, left side you list the coins (API > Coins > Get Coins), on select a coin the right side is populated with data from (API > Coins > Get coin price history (30d time limit))
On the right side, as explained above you get the data and show the top part, more data available on API > Coins > Get coin. If something is missing from the API you can delete it from the design (high low etc)
(API > Coins > Get coin price history (30d time limit)) for the graph data, you can use https://react-chartjs-2.js.org/ or https://plotly.com/javascript/react/. Just show a timeline of the coin history based on the response from the API. I prefer plotly as it has support for the part below the graph, check https://codepen.io/eni9889/pen/GRJGjmW. But, feel free to explore other options for graphs as there are many and maybe some are better than what I wrote. If you use plotly you might need to create a new Date() of the timestamps of every item.
Below the graph (where asset summary is) you will show a table. https://github.com/TanStack/table Use the data from (API > Coins > Get Coins) to show multiple rows of data that are sortable by the column. Default sorted by rank. Columns: Rank, Name, Price(+Symbol), Market Cap, Change. Table design is by your choice.
https://tanstack.com/table/v8/docs/guide/installation https://tanstack.com/table/v8/docs/adapters/react-table https://tanstack.com/table/v8/docs/examples/react/sorting
If you are done and have free time and no next project, you can continue adding more features and complexities to this project, search on column on table, multiple coins in same graph lines, some different graphs, refactor and optimization, etc etc.
Feel free to fix eslint rules that are crying, delete and add packages you (dont)need.
In the app folder there are hooks for redux, use them as it says so. In the routes.tsx you can define your routes for all of the pages, some examples are written, react-router-dom is configured (check App.tsx), for an item details you can do the path as /item/:id then get the id with useParams hook in the component (check features/Counter.tsx for navigation examples)
Pages will be added in the pages folder (pages/pageName/index.tsx) and its components in the components folder like normal.
In definitions.d.ts you can store your types so that you dont go hunting for them everywhere.
Inside the src folder you will create your components folder. Each component must be put in its own folder. Example: components/komponenta-folder/index.tsx.
Absolute importing is configured for imports. (https://plainenglish.io/blog/why-and-how-to-use-absolute-imports-in-react)
For global style (variables, color variables, breakpoints etc) you can put them in src/styles/config.ts with exports and import them in your styled components files. For component styles you can put it in the same folder as the component (components/komponenta-folder/Styles.js)
Run npm install in the terminal from the root folder. After its done run npm start and go to localhost:3000 to find your project.
Follow the DRY Logic (Don't Repeat Yourself) - https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
Create as many components as possible, re-use functions, re-use css.
The project is pre-configured which means that eslint code styling rules are enforced, prettier is configured and set to automatically format your code to be more readable (you can disable it by deleting the .vscode folder, but its recommended to format on save as most clients projects work like that).
You can take a look in the configuration files (eslint, prettier, editorconfig, git, (its a simple config but a popular one that most clients and projects use. Sometimes there are even more strict rules applied but we'll get to that))
Readable code is a must. If something is getting complicated (function/component) you should add some comments to explain it. Its just practice for now but necessary for the future.
Your React code should be in JavaScript (files should end in .js or .jsx). You will learn and use TypeScript later.
And always ask if something isn't clear. Juniors(any level even Seniors) are always encouraged to ask as many questions about any doubts they have, never assume how things work because clients 99% of the time don't think as developers. If something isn't clear to you regarding design, functionalities its always better to ask.
If you have any doubts about how things are planned and designed, if you think that "this will not work like this" or "it doesn't make any sense" make a polite comment to who ever is in charge regarding what you think. Sometimes they agree with you and you can improve the logic, sometimes they force you to do it.
Good luck and have fun :)