ReactJS based web UI for Coindashboard SIP project.
Install Node.js from official website, choose version 16.16.0LTS, install using defaults.
Verify using command:
> node -v
v16.16.0> git clone [--branch <branch-name>] https://github.com/CuttingEdgeCommunity/coindashboard-frontend> cd coindashboard-frontend
> npm install> cd coindashboard-frontend
> npm run start> cd coindashboard-frontend
> npm run start:prod> cd coindashboard-frontend
> npm run test:browser> cd coindashboard-frontend
> npm run testDownload extensions:
- Tailwind CSS IntelliSense
- Tailwind Docs
In order to get tailwind specific autocomplete, do not use tab or enter completion before list of tailwind classes suggestions pops up
(See the light highlight - you do not want this)
Emmet allows to generate markups using css selector like syntax. To set it up, You need to include following settings to your editor's settings.json file. To acces it go to: CTRL+SHIFT+P > Open Settings (JSON)
{
"tailwindCSS.emmetCompletions": true,
"emmet.includeLanguages": { "javascript": "javascriptreact" }
}To generate code specify an element, and chain classes using dot operator. You can chain multiple classes, as well as use quantity specifiers.
Once You finished, press TAB to generate.
Install Headwind VS Code plugin and formatting will occur automaticly on file save.
- Node.js
- React
- Tailwind CSS
- TODO: add other technologies as needed (eg. test frameworks, ui kits)
Warning do not use "tailwindui" as it's not free!
- Example: Rebuilding Coinbase with Tailwind CSS
- Free ui kits repository, always remember to check license! Make sure it's MIT.
- Install Tailwind with React
- Tailwind's creator YT channel
- Tailwind CSS v2.0: From Zero to Production playlist
When adding new component or library, add it to the used technologies section with it's license (again, it should be MIT). License often can be found on Github repo or in footer/header/about sections of project's website.
First, convert HTML to JSX. You can use a online converter, for exampe Click or use "Html to JSX" VS Code plugin. Then create new file for the component and wrap it into class or function like you would do with your own HTML. For additional safety you can wrap the whole code in <> ... </> if there isn't one root element in the kit's code. Do not paste it in inside long markup as it would drastically reduce code readibility. Always create new component in a separate file.
As components are already created, you only need to add the library to dependencies using npm install command. Sometimes you will need add a plugin in the tailwind.config.js file. Always follow specific documentation. Examples: HeadlessUI and Flowbite-react.