A comprehensive full-stack web application for content creators to draft, organize, and schedule social media posts across multiple platforms. Developed as part of the Frontend Developer Intern selection process.
- Live Deployment
- Project Overview
- Core Features
- Technology Stack
- Installation Guide
- API Reference
- Architecture & Design Decisions
- Future Enhancements
- Frontend Application: https://full-stack-task-primetrade-ai.vercel.app/
- Backend API: https://full-stack-task-primetradeai.onrender.com
PostFlow is a modern content management system designed to streamline social media workflow for content creators. The application provides an intuitive interface for managing posts across multiple platforms (Twitter, LinkedIn, Instagram) with comprehensive scheduling and organizational capabilities.
- Implement secure user authentication and authorization
- Provide efficient content creation and management workflows
- Enable advanced filtering and search functionality
- Deliver a responsive, accessible user experience
- Demonstrate production-ready code architecture and best practices
- Secure User Management: JWT-based authentication system with bcrypt password hashing
- Protected Routes: Route guards implemented using higher-order components to secure dashboard and private endpoints
- Session Persistence: Secure token-based session management with automatic renewal
- Analytics Overview: Real-time statistics displaying total posts, published content, scheduled items, and drafts
- Full CRUD Operations: Complete create, read, update, and delete functionality for social media posts
- Advanced Post Editor:
- Form validation for title, content, platform selection, and status
- Scheduling functionality with date-time picker
- Multi-platform support (Twitter, LinkedIn, Instagram)
- Dynamic Filtering System:
- Real-time search across post content and titles
- Platform-based filtering
- Status-based filtering (Draft, Scheduled, Published)
- Responsive Design: Mobile-first approach with collapsible navigation and adaptive layouts
- Modern Interface: Clean, professional design implementing glassmorphism effects and contemporary UI patterns
- Optimistic Updates: Instant UI feedback for user actions to improve perceived performance
- Loading States: Skeleton screens and loading indicators for asynchronous operations
- Error Handling: Comprehensive error states with user-friendly messaging
| Category | Technology | Purpose |
|---|---|---|
| Framework | React.js with Vite | Fast development environment and optimized builds |
| Styling | Tailwind CSS | Utility-first CSS framework for rapid UI development |
| Routing | React Router DOM v6 | Client-side routing and navigation |
| State Management | React Hooks | Component state and lifecycle management |
| HTTP Client | Axios | Promise-based HTTP requests with interceptors |
| Category | Technology | Purpose |
|---|---|---|
| Runtime | Node.js | JavaScript runtime environment |
| Framework | Express.js | Minimal and flexible web application framework |
| Database | PostgreSQL (NeonDB) | Relational database for data persistence |
| ORM | Drizzle ORM | Type-safe database operations |
| Authentication | JWT & Bcrypt | Token-based authentication and password encryption |
- Node.js (version 18.x or higher)
- npm or yarn package manager
- PostgreSQL database instance or NeonDB connection string
git clone https://github.com/HarshS16/Full_Stack_Task_PrimetradeAI.git
cd Full_Stack_Task_PrimetradeAIcd server
npm install
# Environment configuration
cp .env.example .env
# Edit .env with the following variables:
# PORT=5000
# DATABASE_URL=your_postgresql_connection_string
# JWT_SECRET=your_secure_random_string
# FRONTEND_URL=http://localhost:5173
# Database schema migration
npm run db:push
# Start development server
npm run devcd client
npm install
# Environment configuration
cp .env.example .env
# Edit .env with:
# VITE_API_URL=http://localhost:5000/api
# Start development server
npm run devThe application will be accessible at http://localhost:5173
POST /api/auth/register
Content-Type: application/json
{
"name": "string",
"email": "string",
"password": "string"
}POST /api/auth/login
Content-Type: application/json
{
"email": "string",
"password": "string"
}GET /api/auth/me
Authorization: Bearer <token>GET /api/posts
Authorization: Bearer <token>
Query Parameters:
- search: string (optional)
- platform: "twitter" | "linkedin" | "instagram" (optional)
- status: "draft" | "scheduled" | "published" (optional)POST /api/posts
Authorization: Bearer <token>
Content-Type: application/json
{
"title": "string",
"content": "string",
"platform": "twitter" | "linkedin" | "instagram",
"status": "draft" | "scheduled" | "published",
"scheduledFor": "ISO 8601 datetime" (optional)
}PUT /api/posts/:id
Authorization: Bearer <token>
Content-Type: application/jsonDELETE /api/posts/:id
Authorization: Bearer <token>Component-Based Design: The application follows a modular component architecture, separating presentational components from container components. Reusable UI elements such as ProfileCard, StatsCards, and PostCard are abstracted for maintainability and consistency.
State Management Strategy: Utilizing React's built-in hooks (useState, useEffect, useContext) for efficient state management. This approach avoids unnecessary complexity while maintaining scalability for the current application scope.
Performance Optimizations:
- Optimistic UI updates to reduce perceived latency
- Debounced search functionality to minimize API calls
- Lazy loading implementation for improved initial load times
Stateless Authentication: JWT-based authentication enables horizontal scaling by eliminating server-side session storage requirements. This design allows multiple server instances to handle requests without session affinity constraints.
Database Design:
- Type-safe queries using Drizzle ORM
- Normalized schema design for data integrity
- Prepared for indexing on frequently queried columns (userId, status, platform)
Modular Route Structure: Express routes are organized by domain (authentication, posts) enabling independent development and testing of features. This separation facilitates team collaboration and feature expansion.
Security Implementations:
- CORS policy restricted to trusted frontend origins
- Password hashing using bcrypt with appropriate salt rounds
- Input validation and sanitization on all endpoints
- JWT token expiration and refresh mechanisms
Horizontal Scaling: Stateless backend design allows deployment across multiple instances with load balancing.
Database Optimization: Schema designed with future indexing strategies for performance at scale. Support for query optimization and caching layers.
Codebase Maintainability: Clear separation of concerns, consistent code style, and comprehensive error handling ensure long-term maintainability.
- Analytics Dashboard: Comprehensive post performance metrics and engagement tracking
- Media Upload: Image and video attachment support with CDN integration
- Automated Posting: Integration with social media APIs for direct publishing
- Team Collaboration: Multi-user workspaces with role-based permissions
- Content Calendar: Visual calendar interface for scheduled content overview
- AI-Powered Suggestions: Content optimization recommendations
Developed as part of the Frontend Developer Intern selection process.
Note: This project demonstrates proficiency in full-stack development, modern web technologies, and production-ready application architecture.