https://github.com/zakimohammed/react-isro-app

This React App is consuming the public API created by Indian Space Research Organization (ISRO).
https://github.com/zakimohammed/react-isro-app

axios daisyui isro isro-api react react-icons react-redux react-typescript react-vite redux-toolkit tailwindcss typescript vite

Last synced: about 1 month ago
JSON representation

This React App is consuming the public API created by Indian Space Research Organization (ISRO).

• Host: GitHub
• URL: https://github.com/zakimohammed/react-isro-app
• Owner: ZakiMohammed
• Created: 2023-08-01T09:35:17.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-08-20T18:58:33.000Z (over 1 year ago)
• Last Synced: 2023-08-20T20:02:29.518Z (over 1 year ago)
• Topics: axios, daisyui, isro, isro-api, react, react-icons, react-redux, react-typescript, react-vite, redux-toolkit, tailwindcss, typescript, vite
• Language: TypeScript
• Homepage: https://hello-isro.netlify.app/
• Size: 287 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 👋 Hello ISRO - ISRO-API + React

![](https://raw.githubusercontent.com/ZakiMohammed/react-isro-app/master/public/banner.png)

This app is consuming the public API created by Indian Space Research Organization (ISRO).

Through this app, we extend our heartfelt gratitude to the brilliant minds at ISRO for their invaluable contributions, elevating  India's presence in space research.

Also, this app will serve a learning for working with React, Redux, TypeScript, Vite, TailwindCSS, DaisyUI.

___

Check out the CodeOmelet blog post for this project.

Link: https://codeomelet.com/posts/isro-react-app-initial-setup-part-1

Link: https://codeomelet.com/posts/isro-react-app-working-on-the-components-part-2

___

## Run App

```

npm run dev

```

## Initial Setup

```

npm create vite@latest

> Give your project a name: react-isro-app

> Select React + TypeScript option

cd react-isro-app

npm i

npm run dev

```

## Add Dependencies

Add below dependencies to work with TailwindCSS, DaisyUI, Redux, React Icons, React Routed and Axios.

### Adding TailwindCSS

Install TailwindCSS:

```

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

```

Open `tailwind.config.js` and update with below code:

```

/** @type {import('tailwindcss').Config} */

export default {

  content: [

    "./index.html",

    "./src/**/*.{js,ts,jsx,tsx}",

  ],

  theme: {

    extend: {},

  },

  plugins: [],

}

```

Then add these dependencies to your `index.css` file:

```

@tailwind base;

@tailwind components;

@tailwind utilities;

```

### Adding DaisyUI

Install daisyUI:

```

npm i -D daisyui@latest

```

Then add daisyUI to your `tailwind.config.js` files:

```

module.exports = {

  //...

  plugins: [require("daisyui")],

  daisyui: {

    themes: ["light", "dark", "cupcake"],

  },

}

```

### Adding TailwindCSS Typography

Install `@tailwindcss/typography`:

```

npm install -D @tailwindcss/typography

```

Then add daisyUI to your `tailwind.config.js` files:

```

module.exports = {

  //...

  plugins: [require('@tailwindcss/typography'), require("daisyui")],

  //...

}

```

### Adding RTK

Install Redux Toolkit:

```

npm i @reduxjs/toolkit

npm i react-redux

npm i @types/react-redux -D

```

### Adding Axios

Install Axios:

```

npm i axios

```

### Adding React Router

Install React Router:

```

npm i react-router-dom

```

### Adding React Router

Install React Icons:

```

npm i react-icons

```