Social Media Application - Project Documentation
Overview
This project involves building a social media platform where users can:
Sign up, log in, and manage their profiles (authentication).
Create posts that can be viewed by all users.
Like and comment on posts created by others.
The project is divided into two main parts:
1. Frontend (React.js)
2. Backend (Django Rest Framework)
Project Features
1. Authentication
Sign Up: Users can register with their email and password.
Log In: Users can log in with valid credentials.
Profile Management:
o View profile details (name, email, bio, profile picture).
o Update profile information.
2. Post Management
Create Post: Users can create text and image based posts.
View Posts:
o All posts will be displayed on the feed in reverse chronological order.
o Posts will show the username, profile picture, post content, likes, and comments.
3. Interactions
Like: Users can like or unlike a post.
Comment: Users can add comments to posts, and the comments will be displayed below
the post.
Technical Requirements
Frontend (React.js)
Components:
o Authentication (Login, Sign Up).
o Profile Page.
o Feed (Display all posts).
o Post Creation Form.
o Comments Section.
o Like Button.
State Management:
o Use Redux or Context API to manage global states (e.g., user authentication,
posts).
API Integration:
o Use axios or fetch to communicate with the Django REST API.
Backend (Django Rest Framework)
Models:
o User: Extend AbstractUser to include additional fields like bio and
profile_picture.
o Post: Fields for the content, user (author), timestamp, likes count, and
comments.
o Comment: Fields for the text, user (author), timestamp, and the associated post.
APIs:
o Authentication (register, login, logout).
o Profile (view, update).
o Post (CRUD operations).
o Like (toggle like/unlike a post).
o Comment (create, retrieve for a specific post).
Serializers:
o Use DRF serializers for User, Post, and Comment models.
Authentication:
o Use JWT or Token-Based Authentication.
Project Milestones
Phase 1: Setup and Authentication
Backend:
o Setup Django project and install required packages.
o Create User model and authentication APIs.
o Implement token-based authentication.
Frontend:
o Setup React project.
o Create authentication pages (login, sign up).
o Integrate authentication APIs with the frontend.
Phase 2: Post and Profile Management
Backend:
o Create models for Post and Comment.
o Implement APIs for CRUD operations on posts and comments.
o Add profile view and update APIs.
Frontend:
o Build components for creating and displaying posts.
o Create the profile page.
o Integrate APIs for posts and profile management.
Phase 3: Interactions (Likes and Comments)
Backend:
o Add APIs for liking/unliking posts.
o Implement comments retrieval and creation APIs.
Frontend:
o Add Like and Comment functionality in the feed.
o Display likes and comments dynamically.
Example Endpoints
Authentication
POST /api/auth/register/ - Register a new user.
POST /api/auth/login/ - Log in a user.
POST /api/auth/logout/ - Log out a user.
Posts
GET /api/posts/ - Get all posts.
POST /api/posts/ - Create a new post.
PUT /api/posts/<id>/ - Update a post.
DELETE /api/posts/<id>/ - Delete a post.
Comments
GET /api/posts/<id>/comments/ - Get comments for a post.
POST /api/posts/<id>/comments/ - Add a comment to a post.
Likes
POST /api/posts/<id>/like/ - Like/unlike a post.
