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: 2 months 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 (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-20T18:58:33.000Z (almost 3 years ago)
- Last Synced: 2025-01-07T08:42:12.804Z (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: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 👋 Hello ISRO - ISRO-API + React
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
```