CommunityConnect

A comprehensive community engagement platform built with the MERN stack that facilitates seamless interaction, event management, and resource sharing among community members.

---

🏗️ Built With

Core Technologies

• MongoDB - NoSQL database for flexible data management
• Express.js - Backend web application framework
• React - Frontend library for building user interfaces
• Node.js - JavaScript runtime environment
• Docker - Containerization platform

Frontend Technologies

• Tailwind CSS - Utility-first CSS framework
• Material-UI - React component library
• Redux Toolkit - State management
• React Router - Client-side routing
• Socket.io Client - Real-time communication
• Chart.js - Data visualization
• Stripe - Payment processing

Backend Technologies

• Mongoose - MongoDB object modeling
• JWT - Authentication tokens
• bcryptjs - Password hashing
• Cloudinary - Image and file storage
• Nodemailer - Email service integration
• Joi - Data validation
• Helmet - Security middleware
• Winston - Logging library

---

🚀 Overview

CommunityConnect is a scalable full-stack web application designed to strengthen community bonds through digital interaction. The platform offers real-time messaging, event coordination, payment integration, and administrative tools to manage community activities efficiently.

---

⚙️ Prerequisites

Before you begin, ensure you have the following installed on your machine:

• Node.js (>= 18.x)
• npm (>= 9.x)
• MongoDB
• Docker (optional for containerized setup)
• Git

You should also be familiar with:

• JavaScript (ES6+)
• Understanding of MERN stack development
• Familiarity with REST APIs and real-time web sockets
• Redux Toolkit
• RESTful API concepts
• Environment variables configuration
• Basic knowledge of Docker and containerization

---

⚙️ Environment Variables

Server .env

NODE_ENV=development
MONGO_URI_DEV=
MONGO_URI_TEST=
JWT_SECRET=
PORT=
EMAIL_USER=
EMAIL_PASS=
FRONTEND_URL=
ADMIN_EMAIL=
ADMIN_PASSWORD=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
STRIPE_SECRET_KEY=

Frontend .env

VITE_API_URL=
VITE_API_URL_TEST=

---

💻 Running the Project Locally (Without Docker)

1. Clone the repository

git clone https://github.com/Gambit142/Community_Connect.git
cd Community_Connect

2. Install dependencies

Backend:

cd server
npm install

Frontend:

cd ../frontend
npm install

3. Configure environment variables

Create .env files in both server/ and frontend/ directories as shown above.

4. Start MongoDB

If running locally:

mongod

5. Start the development servers

Backend:

npm run dev

Frontend:

npm run dev

6. Access the app

Open your browser and navigate to:

http://localhost:5173

---

🐳 Running the Project With Docker

1. Build and start containers

For development:

docker-compose up --build

For production:

docker-compose -f docker-compose-prod.yaml up --build

2. Environment setup

Ensure both .env files exist before building. Docker Compose will automatically load environment variables and link containers.

🧠 Tips:
Generate a secure JWT secret using:

node server/src/utils/generateSecret.js

Create the initial admin user using:

node server/src/utils/seedAdmin.js

3. Access the application

Once containers are running:

http://localhost:5173

To stop all containers:

docker-compose down

---

🧪 Running Tests

To run backend tests:

cd server
npm test

---

🧠 Technologies & Tools

Category	Technologies
Frontend	React, Vite, Tailwind CSS, Redux Toolkit, Chart.js
Backend	Node.js, Express.js, Mongoose
Database	MongoDB
Containerization	Docker, Docker Compose
Authentication	JWT
Media Storage	Cloudinary
Payments	Stripe
Email Service	Nodemailer
Real-time Events	Socket.io
Testing	Jest, Supertest
Utilities	Winston Logger, Joi Validation

---

🧩 Features

• Secure Authentication (JWT-based)
• Admin Dashboard
• Community Management (posts, events, users)
• Real-time Messaging
• Media Upload via Cloudinary
• Payment Integration (Stripe)
• Email Notifications
• In-App Notifications
• Fully Responsive UI (Tailwind CSS)
• Dockerized for portability

---

🌱 Future Enhancements

• Progressive Web App (PWA) support for offline access.
• Multi-language support for broader accessibility.
• Event calendar synchronization with Google Calendar and Outlook.
• AI-based community recommendations for personalized experiences.

---

👨‍💻 Authors

👤 Francis Ugorji

• GitHub: @Gambit142
• LinkedIn: LinkedIn

👤 Jiril Zala

• GitHub: @JirilZala
• LinkedIn: LinkedIn

👤 Jaykumar Trivedi

• GitHub: @JaykumarTrivedi
• LinkedIn: LinkedIn

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to open a pull request or check the issues page.

---

🌟 Show your support

Give a ⭐️ if you like this project and found it helpful!

---

📄 License

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

---

🙏 Acknowledgments

Special thanks to:

• The open-source community for the tools and frameworks used.
• All contributors for their collaboration and valuable insights.
• Event and Post Pictures from pexels
• Vot's Design Template themewagon for admin dashboard
• Calendar Design template by Alex Oliver

---