Data Science Club - VIT Bhopal#

Official website for Data Science Club at VIT Bhopal University. Built with React.js and Tailwind CSS.

• ⚡ React.js 18 with React Router v6

• 🎨 Tailwind CSS for styling

• 🎭 Smooth animations and transitions## FeaturesIt uses the new Just-in-Time Mode for Tailwind CSS.

• 📱 Fully responsive design

• 🎄 Festive theme with particle effects

• 📧 Contact form integration with EmailJS

• 🎯 SEO optimized with React Helmet- ⚡ React.js 18 with React Router v6## Preview

Prerequisites- 🎨 Tailwind CSS for styling

• Node.js (v14 or higher)- 🎭 Smooth animations and transitionsPreview the example live on StackBlitz:

• npm or yarn package manager

• 📱 Fully responsive design

Getting Started

• 🎄 Festive theme with particle effects

1. Clone the repository

   
   git clone https://github.com/yourusername/Website.git
   
   cd Website- 🎯 SEO optimized with React Helmet## Deploy your own
   
   

2. Install dependencies

   
   npm install
   
   # or
   
   yarn install
   
   ```- Node.js (v14 or higher)[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss)
   
   
   
   

3. Set up environment variables- npm or yarn package manager

   Copy .env.example to .env and fill in your EmailJS credentials:## How to use

   cp .env.example .env## Getting Started
   

   Execute create-next-app with npm or Yarn to bootstrap the example:

   Update the following variables in .env:

   
   REACT_APP_SERVICE_ID=your_emailjs_service_id
   
   REACT_APP_TEMPLATE_ID=your_emailjs_template_id   ```bash```bash
   
   REACT_APP_USER_ID=your_emailjs_user_id
   
   ```   git clone https://github.com/hnccbits/Website.gitnpx create-next-app --example with-tailwindcss with-tailwindcss-app
   
   
   
   

4. Run the development server cd Website# or

   npm start   ```yarn create next-app --example with-tailwindcss with-tailwindcss-app
   
   # or
   
   yarn start```
   

5. Install dependencies

   Open http://localhost:3000 in your browser to see the result.

Build for Production

npm install

npm run build   yarn install

# or   ```

yarn build

```3. **Set up environment variables**

   

This creates an optimized production build in the `build` folder.   Copy `.env.example` to `.env` and fill in your EmailJS credentials:

   ```bash

## Project Structure   cp .env.example .env

src/   Update the following variables in `.env`:

├── assets/          # Images, logos, and static assets   ```

├── components/      # Reusable React components   REACT_APP_SERVICE_ID=your_emailjs_service_id

├── lib/            # Data files and utilities   REACT_APP_TEMPLATE_ID=your_emailjs_template_id

├── pages/          # Page components (routes)   REACT_APP_USER_ID=your_emailjs_user_id

├── styles/         # Global styles and CSS modules   ```

├── App.js          # Main app component with routing

└── index.js        # Application entry point4. **Run the development server**

```   ```bash

   npm start

## Available Scripts   # or

   yarn start

- `npm start` - Runs the app in development mode   ```

- `npm run build` - Builds the app for production

- `npm test` - Runs the test suite   Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.

- `npm run make-pretty` - Formats code with Prettier

- `npm run style:lint` - Lints code with ESLint## Build for Production

- `npm run style:prettier` - Checks code formatting

```bash

## Tech Stacknpm run build

# or

- **React.js** - JavaScript library for building user interfacesyarn build

- **React Router** - Declarative routing for React```

- **Tailwind CSS** - Utility-first CSS framework

- **React Helmet Async** - Document head manager for ReactThis creates an optimized production build in the `build` folder.

- **EmailJS** - Email service integration

- **React Icons** - Popular icon library## Project Structure

- **React TSParticles** - Particle animation library

- **jQuery** - For specific interactive components```

src/

## Contributing├── assets/          # Images, logos, and static assets

├── components/      # Reusable React components

Contributions are welcome! Please feel free to submit a Pull Request.├── lib/            # Data files and utilities

├── pages/          # Page components (routes)

## License├── styles/         # Global styles and CSS modules

├── App.js          # Main app component with routing

© 2025 Data Science Club, VIT Bhopal. All rights reserved.└── index.js        # Application entry point

Contact

Available Scripts

• Email: datascienceclub@vitbhopal.ac.in

• Website: VIT Bhopal University- npm start - Runs the app in development mode

• Location: Kothrikalan, Sehore, Madhya Pradesh - 466114, India- npm run build - Builds the app for production

• npm test - Runs the test suite

• npm run make-pretty - Formats code with Prettier

• npm run style:lint - Lints code with ESLint

• npm run style:prettier - Checks code formatting

Tech Stack

• React.js - JavaScript library for building user interfaces
• React Router - Declarative routing for React
• Tailwind CSS - Utility-first CSS framework
• React Helmet Async - Document head manager for React
• EmailJS - Email service integration
• React Icons - Popular icon library
• React TSParticles - Particle animation library
• jQuery - For specific interactive components

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.