Communify
A gaming-focused social media platform - share stats, post highlights, connect with players.
📖 About
Communify is a full-stack gaming social network built as a Bachelor’s final year project. Players can register, create posts sharing gaming moments and stats, comment on others’ posts, like/dislike content, search for other users, and manage their own profiles - all within a responsive, real-time web app.
📑 Bachelor’s Thesis PDF - Full project documentation and design specification.
✨ Features
- 🔐 Authentication - Email/password sign-up & sign-in, Google OAuth, email verification, and password reset
- 📝 Posts - Create, view, like/dislike, and delete gaming posts with image uploads
- 💬 Comments - Comment on any post in real-time
- 👤 User Profiles - Browse all users, view individual profiles and their posts
- 🔍 User Search - Live search across the user directory
- 🛡️ Route Guards - Auth-protected routes; unauthenticated users are redirected automatically
- 📱 Mobile Gate - Dedicated landing page for mobile visitors (desktop-only app by design)
- 🌐 Firebase Backend - Firestore database, Firebase Auth, and Cloud Storage
- ⚡ NgRx State Management - Centralized reactive state for auth, posts, and users
🛠️ Tech Stack
| Layer | Technology | |—|—| | Framework | Angular 9 | | Language | TypeScript | | State Management | NgRx (Store, Effects, Devtools) | | Backend / DB | Firebase (Firestore, Auth, Storage) | | UI Components | Angular Material | | Layout | Angular Flex-Layout | | Styling | SCSS | | Hosting | Netlify |
🚀 Getting Started
Prerequisites
- Node.js
v12.x(required for Angular 9) - Angular CLI
v9.x-npm install -g @angular/cli@9 - A Firebase project with Firestore, Authentication, and Storage enabled
Installation
# 1. Clone the repository
git clone https://github.com/utsanjan/Communify.git
cd Communify
# 2. Switch to the source branch
git checkout master
# 3. Install dependencies
npm install
# 4. Add your Firebase config to the environment files
# Edit: src/environments/environment.ts
# src/environments/environment.prod.ts
# 5. Start the dev server
ng serve
The app will be available at http://localhost:4200.
Build for Production
ng build --prod
Output is written to dist/. Deploy the contents to any static host (Netlify, Firebase Hosting, etc.).
🔒 Environment Setup
Create/update src/environments/environment.ts with your Firebase project credentials:
export const environment = {
production: false,
firebase: {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID"
}
};
⚠️ Never commit real API keys. Use environment variable injection or Firebase App Check for production.
👥 Project Contributors