Skip to content

Coin Dashboard - React JS, Redux, Jest, Next.js, Material-UI, GitHub Action, CI/CD, Vercel

Notifications You must be signed in to change notification settings

rejaraujo/CoinsDashboard

Repository files navigation

Coins Dashboard

Feel free to use this app to keep track of the crypto coins.

This project was created using Create React App, incorporating the power of Redux and the convenience of Redux Toolkit. The user interface is enhanced with the Material UI library.

GitHub Actions Status

Node.js badge

Delopy badge

Delopy badge

Getting Started

To experience the app, you have two options:

a) Explore on Vercel (Production):

b) To run the app locally, follow these steps:

  • Install project depedencies: npm install
  • Start the development server: npm start

This command launches the app in development mode and automatically opens it in your default web browser at http://localhost:3000.

Testing

You can run tests using the following command: npm test

This command initiates the test runner in interactive watch mode, allowing you to continuously monitor and test your code.

Building for Production

When you are ready to deploy the app, build it for production with: npm run build. This command bundles React in production mode and optimizes the build for optimal performance. The resulting production-ready files will be placed in the build folder.

Ejecting

Note: this is a one-way operation. Once you eject, you can't go back!

If you find yourself needing more control over the build tool and configuration, you can eject your project using the following command: npm run eject

Screenshots

Desktop:

Card view

Desktop Design

List view

Desktop Design

Mobile:

Card view

Mobile Design

List view

Mobile Design

File Structure


├── public
└── src
    ├── __test__
    ├── app
    ├── components
    ├── features
    │   ├── services
    │   └── slices
    │       ├── pagination
    │       └── switchView
    ├── mocks
    └── style
  • test: Contains test suites written using RTL and Jest.
  • app: Main application logic and setup.
  • components: Reusable React component blocks.
  • features: Organized feature-specific code.
  • mocks: Mock data and utilities.
  • style: Stylesheets for the project.
  • public: Image assets and other publicly accessible files.

About

Coin Dashboard - React JS, Redux, Jest, Next.js, Material-UI, GitHub Action, CI/CD, Vercel

Topics

Resources

Stars

Watchers

Forks