Skip to content
BranchesTags

Latest commit

 

History

1 Commit

Folders and files

NameName
Last commit message
Last commit date
backend
backend
 
 
docs/screenshots
docs/screenshots
 
 
frontend
frontend
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 

Repository files navigation

🌐 CodeAlpha Social Media Platform

A full-stack Mini Social Media Platform built as Task 2 for the CodeAlpha Full Stack Development Internship.

The application provides a complete social media experience including user registration and authentication, user profiles, posts, comments, likes, user search, follow/unfollow functionality, and a personalized feed.

✨ Features

👤 User Features

  • 📝 User registration
  • 🔐 User login/logout
  • 👤 User profiles
  • ✏️ Edit profile bio
  • 🖼️ Profile avatar URL
  • 🔎 User search
  • 👥 Follow users
  • 🚫 Unfollow users
  • 📰 Personalized feed

📝 Post Features

  • ➕ Create posts
  • 📄 View all posts
  • 🔎 View individual posts
  • ✏️ Edit own posts
  • 🗑️ Delete own posts
  • ❤️ Like posts
  • 💔 Unlike posts
  • 👤 Post author information
  • 🖼️ Optional image URL support
  • 🔒 Post ownership protection

💬 Comment Features

  • 💬 Add comments to posts
  • 📋 View post comments
  • 🗑️ Delete own comments
  • 🔒 Comment ownership protection
  • ✅ Comment input validation

📰 Personalized Feed

The personalized feed displays:

  • The current user's own posts
  • Posts from users they follow
  • Newest posts first
  • Maximum of 100 posts

Posts from users who are not followed are excluded from the personalized feed.

🔐 Authentication & Security

  • JWT-based authentication
  • Password hashing with bcryptjs
  • Protected API routes
  • Authorization middleware
  • User ownership checks
  • Protected post modification
  • Protected comment deletion
  • Follow/unfollow authentication
  • Input validation
  • MongoDB ObjectId validation
  • Environment variables for sensitive configuration
  • Password and email excluded from public user profiles
  • Express x-powered-by header disabled

🛠️ Tech Stack

Layer Technology
Frontend HTML5, CSS3, Vanilla JavaScript
Backend Node.js, Express.js
Database MongoDB
ODM Mongoose
Authentication JWT
Password Security bcryptjs
HTTP Client Fetch API
Testing Jest
API Testing Supertest
Test Database MongoDB Memory Server

🏗️ Application Architecture

┌──────────────────────────────────────┐
│              Frontend                │
│        HTML + CSS + JavaScript       │
└──────────────────┬───────────────────┘
                   │
                   │ Fetch API / REST API
                   ▼
┌──────────────────────────────────────┐
│             Express.js               │
│          REST API + Server            │
│                                      │
│ Authentication / Users / Posts       │
│ Likes / Comments / Feed              │
└──────────────────┬───────────────────┘
                   │
                   │ Mongoose
                   ▼
┌──────────────────────────────────────┐
│               MongoDB                │
│                                      │
│ Users / Posts / Comments             │
└──────────────────────────────────────┘

The Express server provides the REST API and serves the static frontend from the same application.

📁 Project Structure

CodeAlpha_SocialMediaApp/
│
├── backend/
│   │
│   ├── config/
│   │   └── db.js
│   │
│   ├── middleware/
│   │   ├── auth.js
│   │   └── validation.js
│   │
│   ├── models/
│   │   ├── User.js
│   │   ├── Post.js
│   │   └── Comment.js
│   │
│   ├── routes/
│   │   ├── auth.js
│   │   ├── users.js
│   │   └── posts.js
│   │
│   ├── tests/
│   │   ├── auth.test.js
│   │   ├── users.test.js
│   │   ├── posts.test.js
│   │   ├── comments.test.js
│   │   ├── likes.test.js
│   │   └── feed.test.js
│   │
│   ├── app.js
│   ├── server.js
│   ├── package.json
│   └── .env.example
│
├── frontend/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   ├── api.js
│   │   ├── auth.js
│   │   ├── feed.js
│   │   └── profile.js
│   ├── index.html
│   ├── login.html
│   ├── register.html
│   └── profile.html
│
├── docs/
│   └── screenshots/
│       ├── comments.png
│       ├── create-post.png
│       ├── feed.png
│       ├── login.png
│       ├── profile.png
│       ├── register.png
│       └── search.png
│
├── .gitignore
└── README.md

🚀 Getting Started

1. Prerequisites

Make sure the following are installed:

MongoDB Atlas can also be used instead of a local MongoDB server.

Check the installed versions:

node --version
npm --version
mongod --version

mongosh is optional and is only required if you want to inspect the MongoDB database manually from the command line.

2. Clone the Repository

git clone https://github.com/MBen213/CodeAlpha_SocialMediaApp.git
cd CodeAlpha_SocialMediaApp

Then move into the backend directory:

cd backend

3. Install Dependencies

npm install

4. Configure Environment Variables

Create a .env file inside the backend directory.

Example:

PORT=5000
MONGO_URI=mongodb://127.0.0.1:27017/codealpha_social_media
JWT_SECRET=your_secure_jwt_secret

Important

Never commit your .env file to GitHub.

The repository should contain:

.env.example

and should not contain:

.env

5. Start MongoDB

Make sure MongoDB is running before starting the application.

On Windows, you can check the MongoDB service using:

services.msc

Look for the MongoDB service and make sure it is running.

6. Start the Application

From the backend directory:

npm start

The application will be available at:

http://localhost:5000

Open the application in your browser.

The login page can be accessed at:

http://localhost:5000/login.html

The API health endpoint is:

http://localhost:5000/health

Expected response:

{
  "status": "ok"
}

📡 REST API

🔐 Authentication

Method Endpoint Description Authentication
POST /api/auth/register Register a new user Public
POST /api/auth/login Login Public

Register

POST /api/auth/register

Example request:

{
  "username": "john_doe",
  "email": "john@example.com",
  "password": "password123"
}

Login

POST /api/auth/login

Example request:

{
  "email": "john@example.com",
  "password": "password123"
}

Successful authentication returns a JWT token.

👤 Users

Method Endpoint Description Authentication
GET /api/users/search?q= Search users Required
GET /api/users/:id Get user profile and posts Public
PUT /api/users/:id Update own profile Required
POST /api/users/:id/follow Follow a user Required
POST /api/users/:id/unfollow Unfollow a user Required

Profile Updates

Users can update:

  • Bio
  • Avatar URL

Profile ownership is enforced so users cannot modify another user's profile.

📝 Posts

Method Endpoint Description Authentication
POST /api/posts Create a post Required
GET /api/posts Get all posts Public
GET /api/posts/feed Get personalized feed Required
GET /api/posts/:id Get a single post Public
PUT /api/posts/:id Update own post Required
DELETE /api/posts/:id Delete own post Required
POST /api/posts/:id/like Like/unlike a post Required

💬 Comments

Method Endpoint Description Authentication
POST /api/posts/:id/comments Create a comment Required
GET /api/posts/:id/comments Get post comments Public
DELETE /api/posts/:id/comments/:commentId Delete own comment Required

❤️ Like System

The like endpoint works as a toggle.

POST /api/posts/:id/like

If the authenticated user has not liked the post:

Like
  ↓
liked: true

If the user has already liked the post:

Unlike
  ↓
liked: false

Duplicate likes are prevented.

👥 Follow System

Users can follow other users:

POST /api/users/:id/follow

And unfollow them:

POST /api/users/:id/unfollow

The system prevents users from:

  • Following themselves
  • Unfollowing themselves
  • Following the same user twice

The relationship is stored using MongoDB references in the User model.

📰 Personalized Feed

The personalized feed is available through:

GET /api/posts/feed

The feed includes:

Current User
      │
      ├── Own Posts
      │
      └── Following
             │
             ├── User A Posts
             ├── User B Posts
             └── User C Posts

Posts are sorted from newest to oldest.

Newest
   ↓
Post C
Post B
Post A
   ↓
Oldest

The feed is limited to the latest 100 posts.

🔐 Authentication Flow

Register
   ↓
Login
   ↓
JWT Token
   ↓
Token stored in Browser
   ↓
Authorization Header
   ↓
Protected API Requests
   ↓
Authenticated Resources

Protected requests use:

Authorization: Bearer <JWT_TOKEN>

Passwords are hashed with bcryptjs, while JWT tokens are used to authenticate protected API requests.

🧪 Automated Testing

The backend includes an automated API test suite using:

  • Jest
  • Supertest
  • MongoDB Memory Server

The tests run against an isolated in-memory MongoDB database, so the development database is not modified during testing.

Run all tests:

npm test

Run tests with coverage:

npm run test:coverage

Watch mode:

npm run test:watch

Current Test Results

Test Suites: 6 passed, 6 total
Tests:       71 passed, 71 total

Coverage

Metric Coverage
Statements 85.41%
Branches 79.64%
Functions 91.42%
Lines 86.51%

Test Suites

Test Suite Tests Status
Authentication 6 ✅
Users 23 ✅
Posts 13 ✅
Comments 13 ✅
Likes 6 ✅
Feed 10 ✅
Total 71 ✅ 71/71

🧪 Testing Checklist

Before submission, verify the following:

Authentication

  • User registration works
  • User login works
  • Duplicate registration is rejected
  • Invalid email is rejected
  • Short passwords are rejected
  • Invalid credentials are rejected
  • JWT authentication works

Users

  • User profiles work
  • Profile editing works
  • User search works
  • Follow works
  • Unfollow works
  • Duplicate follows are rejected
  • Self-follow is rejected
  • Unauthorized profile editing is rejected

Posts

  • Create post works
  • Get all posts works
  • Get single post works
  • Edit own post works
  • Delete own post works
  • Editing another user's post is rejected
  • Deleting another user's post is rejected
  • Post validation works

Likes

  • Like post works
  • Unlike post works
  • Duplicate likes are prevented
  • Unauthorized likes are rejected
  • Invalid post IDs are rejected

Comments

  • Create comment works
  • Get comments works
  • Delete own comment works
  • Delete another user's comment is rejected
  • Comment validation works
  • Invalid comment IDs are rejected

Feed

  • Own posts appear in feed
  • Followed users' posts appear in feed
  • Unfollowed users' posts are excluded
  • Feed is sorted newest-first
  • Empty feed works
  • Feed requires authentication
  • Feed is limited to 100 posts

📸 Screenshots

Add screenshots of the main application pages here.

🏠 Home / Feed

Home / Feed

🔐 Login

Login

📝 Register

Register

👤 User Profile

User Profile

📝 Create Post

Create Post

💬 Comments

Comments

🔎 User Search

User Search

🔮 Future Improvements

The current version focuses on the core requirements of the CodeAlpha Social Media Platform task.

Possible future improvements include:

  • 🖼️ Direct image upload and storage
  • 🔔 Real-time notifications
  • 💬 Real-time messaging
  • 📱 Responsive UI improvements
  • 🔄 Infinite scrolling
  • 📄 Pagination
  • 🛡️ Rate limiting
  • 🔍 Advanced search and filtering
  • 📊 User activity statistics
  • ☁️ Cloud deployment
  • 🧪 Additional edge-case and integration tests

Image upload is intentionally not included in the current implementation. It can be added as a future enhancement.

📌 Project Notes

  • This project is a simplified social media platform created for educational and internship purposes.
  • MongoDB is used as the primary database.
  • Express.js provides the REST API and serves the frontend.
  • JWT is used for protected API endpoints.
  • Passwords are securely hashed using bcryptjs.
  • User ownership is enforced for protected modifications.
  • The personalized feed includes the user's own posts and posts from followed users.
  • Post images currently use image URLs rather than direct file uploads.
  • Automated API tests use MongoDB Memory Server to isolate test data.
  • The project does not include a real-time messaging system.
  • The project does not include direct image file uploads in the current version.

🎓 CodeAlpha Internship

This project was developed as part of the:

CodeAlpha Full Stack Development Internship

Task 2 — Social Media Platform

Requirements Covered

  • ✅ User profiles
  • ✅ Posts
  • ✅ Comments
  • ✅ Like system
  • ✅ Follow system
  • ✅ User search
  • ✅ Personalized feed
  • ✅ Express.js backend
  • ✅ MongoDB database
  • ✅ REST API
  • ✅ Authentication
  • ✅ HTML/CSS/JavaScript frontend

👨‍💻 Author

Mohamed Ben

Full Stack Web Developer | Software Engineer

📄 License

This project was created for educational and internship purposes as part of the CodeAlpha Full Stack Development Internship.

About

Full-stack social media platform built with Node.js, Express.js, MongoDB, JWT authentication, and Vanilla JavaScript.

Topics

expressjsfull-stackjwtmongodbmongoosenodejsrest-apisocial-mediavanilla-javascriptweb-development

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages