🏗️ ACE BITS - Association of Civil Engineers

Building the future through innovation, collaboration, and excellence in civil engineering at BIT Sindri, Dhanbad

🎯 About ACE BITS

The Association of Civil Engineers (ACE) at BIT Sindri is a premier student organization dedicated to fostering excellence in civil engineering education and innovation. Established in 2017, we bring together students, faculty, and industry professionals to create a vibrant learning community.

🌟 Our Mission

• Foster Innovation: Promote creative thinking and innovative solutions in civil engineering
• Build Community: Connect junior, senior, and alumni students on a unified platform
• Enhance Skills: Provide hands-on learning experiences through workshops and events
• Industry Connect: Bridge the gap between academia and industry

📊 Key Statistics

• 400+ General Members
• 60+ Core Members
• 50+ Events Organized
• 5+ Years of Excellence

🚀 Features

✨ Modern UI/UX

• Responsive Design: Optimized for all devices
• Smooth Animations: Powered by Framer Motion
• Modern Typography: Inter & Poppins fonts
• Glass Morphism: Beautiful visual effects

🎨 Design System

• Tailwind CSS: Utility-first CSS framework
• Custom Color Palette: Professional blue and gold theme
• Component Library: Reusable UI components
• Dark Mode Ready: Accessibility features

🔧 Technical Features

• TypeScript Support: Type-safe development
• SEO Optimized: React Helmet integration
• Performance Optimized: Code splitting and lazy loading
• PWA Ready: Progressive Web App features

🛠️ Tech Stack

Frontend

• React 17.0.2 - UI Library
• TypeScript 4.9.4 - Type Safety
• Tailwind CSS 3.4.3 - Styling
• Framer Motion 12.23.12 - Animations
• Lucide React - Icons
• React Router - Navigation

Backend

• Express.js - Backend Framework
• MongoDB - Database
• Mongoose - ODM for MongoDB
• CORS - Cross-Origin Resource Sharing
• dotenv - Environment Variables

Services

• Firebase - Authentication
• Formspree - Contact Forms (Alternative)
• React Helmet Async - SEO Management

Development Tools

• Create React App - Build Tool
• ESLint - Code Quality
• Prettier - Code Formatting

📦 Installation & Setup

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager

Quick Start

1. Clone the repository

   git clone https://github.com/ACEBITSINDRI/ACEBITS.git
   cd acebit-main

2. Install Frontend dependencies

   cd frontend
   npm install

3. Install Backend dependencies

   cd ../backend
   npm install

4. Setup environment variables

   # In backend directory, create .env file
   cp .env.example .env
   # Edit .env and add your MongoDB URI

5. Start Backend server

   cd backend
   npm start
   # Backend runs on http://localhost:5000

6. Start Frontend development server (in new terminal)

   cd frontend
   npm start
   # Frontend runs on http://localhost:3000

Build for Production

Frontend:

cd frontend
npm run build

Backend:

cd backend
npm start

Available Scripts

Frontend:

Script	Description
npm start	Starts development server
npm run build	Creates production build
npm test	Runs test suite

Backend:

Script	Description
npm start	Starts production server
npm run dev	Starts development server with nodemon

📁 Project Structure

acebit-main/
├── frontend/              # Frontend React Application
│   ├── public/           # Static assets
│   ├── src/
│   │   ├── components/   # Reusable components
│   │   │   ├── nav/     # Navigation components
│   │   │   ├── Footer/  # Footer component
│   │   │   └── homepageSections/ # Homepage sections
│   │   ├── views/       # Page components
│   │   ├── routes/      # Routing configuration
│   │   ├── api/         # API services
│   │   ├── assets/      # Images, videos, etc.
│   │   ├── reducers/    # Redux reducers
│   │   ├── App.js       # Main app component
│   │   ├── index.js     # Entry point
│   │   └── index.css    # Global styles
│   ├── tailwind.config.js  # Tailwind configuration
│   ├── tsconfig.json       # TypeScript configuration
│   └── package.json        # Frontend dependencies
│
├── backend/               # Backend Express Application
│   ├── config/           # Database configuration
│   ├── controllers/      # Route controllers
│   ├── models/           # MongoDB models
│   ├── routes/           # API routes
│   ├── server.js         # Express server
│   ├── package.json      # Backend dependencies
│   └── .env.example      # Environment variables template
│
├── render.yaml           # Render deployment config
├── .gitignore           # Git ignore rules
└── README.md            # Project documentation

🎨 Design System

Color Palette

• Primary: Blue (#3B82F6 to #1E3A8A)
• Accent: Gold (#EAB308 to #713F12)
• Neutral: Gray scale (#F8FAFC to #0F172A)

Typography

• Headings: Poppins (Bold, Semi-bold)
• Body: Inter (Regular, Medium)

Spacing

• Section Padding: 4rem (64px) to 6rem (96px)
• Component Spacing: 1rem (16px) to 2rem (32px)

🔧 Configuration

Tailwind CSS

The project uses a custom Tailwind configuration with:

• Custom color palette
• Custom animations
• Responsive breakpoints
• Component utilities

TypeScript

TypeScript is configured with:

• Strict mode enabled
• Path mapping for imports
• React JSX support

📱 Responsive Design

The website is fully responsive with breakpoints:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🚀 Performance Optimizations

• Code Splitting: Lazy loading of components
• Image Optimization: WebP format support
• Bundle Optimization: Tree shaking and minification
• Caching: Browser caching strategies

🔒 Security Features

• HTTPS Only: Secure connections
• Content Security Policy: XSS protection
• Input Validation: Form validation
• Firebase Security: Authentication & authorization

📈 SEO Features

• Meta Tags: Dynamic meta tags for each page
• Structured Data: JSON-LD markup
• Sitemap: XML sitemap generation
• Open Graph: Social media optimization

🤝 Contributing

We welcome contributions from the community! Please read our contributing guidelines:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use Tailwind CSS for styling
• Add animations with Framer Motion
• Write meaningful commit messages
• Test your changes thoroughly

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Team

Current Team (2024)

• President: Prince Michael
• Faculty Incharge: Prashant Malviya
• Web Development: ACE Development Team

Contact Information

• Email: acebitsindri@gmail.com
• Phone: +91 6203112525 (President)
• Location: B.I.T. Sindri, Dhanbad, Jharkhand

🌐 Social Media

• Facebook: ACE BITS Sindri
• Twitter: @AceSindri
• LinkedIn: ACE BIT Sindri

🙏 Acknowledgments

• BIT Sindri Administration for continuous support
• Faculty Members for guidance and mentorship
• Student Community for active participation
• Alumni Network for industry connections

---

Made with ❤️ by the ACE Team

Building the future, one engineer at a time