Vite NewsAPI App with React, React-Top-Loading-Bar, React-Loading-Skeleton, and Tailwind CSS

Introduction

This project is a basic setup for a Vite app using React, React-Top-Loading-Bar, React-Loading-Skeleton, and Tailwind CSS. This README file provides instructions on how to set up and run the project locally.

Prerequisites

Node.js (version 14.17.0 or higher)
npm (version 6.14.14 or higher)
Yarn (version 1.22.10 or higher)

Installation

Clone the repository:

git clone https://github.com/your-username/your-project-name.git

Navigate to the project directory:
```
cd your-project-name
```
Install the dependencies:
```
npm install
```

Configuration

Vite Configuration

Create a new file named vite.config.js in the root directory:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
});

React-Top-Loading-Bar Configuration

Install React-Top-Loading-Bar:
```
npm install react-top-loading-bar
```

Import and use the component in your React components:

import LoadingBar from 'react-top-loading-bar';

function MyComponent() {
  const [progress, setProgress] = useState(0);

  return (
    <div>
      <LoadingBar
        progress={progress}
        onLoadingStateChange={(state) => {
          setProgress(state.percent);
        }}
      />
      <!-- Your component content -->
    </div>
  );
}

React-Loading-Skeleton Configuration

Install React-Loading-Skeleton:
```
npm install react-loading-skeleton
```

Import and use the component in your React components:

import Skeleton from 'react-loading-skeleton';

function MyComponent() {
  return (
    <div>
      <Skeleton count={5} />
      <!-- Your component content -->
    </div>
  );
}

Tailwind CSS Configuration

Install Tailwind CSS:
```
npm install tailwindcss
```

Create a new file named tailwind.config.js in the root directory:

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Add Tailwind CSS to your Vite configuration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
import tailwindcss from 'tailwindcss';

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
});

Setting Up NewsAPI

Go to https://newsapi.org/ and sign up for a free account to get an API key.
Create a .env.local file in the root of your project and add your NewsAPI key:
```
VITE_NEWS_API_KEY="your_news_api_key_here"
```

In your Vite config file (vite.config.js), make sure to include the .env plugin to load environment variables:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dotenv from 'dotenv';

dotenv.config({ path: '.env.local' });

export default defineConfig({
  plugins: [react()],
});

In your React components, you can now access the VITE_NEWS_API_KEY environment variable using import.meta.env:
```
const apiKey = import.meta.env.VITE_NEWS_API_KEY;
```

Use the apiKey variable when making requests to the NewsAPI, for example:

const response = await fetch(
  `https://newsapi.org/v2/top-headlines?country=us&apiKey=${apiKey}`
);

Make sure to add .env* to your .gitignore file to prevent the API key from being committed to version control.

Running the Project Locally

Start the Vite development server:
```
npm run dev
```
Open your web browser and navigate to http://localhost:3000 to view the project.

This setup provides a basic structure for a Vite app using React, React-Top-Loading-Bar, React-Loading-Skeleton, and Tailwind CSS. You can customize and extend this setup as needed for your project.

Faizuddinq/RevoltronX-news-app