A full-stack Twitter-4chan mashup application built with modern web technologies. This project combines the microblogging experience of Twitter with the unique thread-based discussion format of 4chan.
- User Authentication: Complete signup, login, logout system with JWT tokens
- Posts & Comments: Create, read, update, and delete posts with nested comment threads
- Social Interactions: Like, comment, repost, and bookmark functionality
- 4chan-Style Elements: Post numbers, quote references, and thread-based discussions
- User Profiles: Customizable profiles with cover photos and bio information
- Follow System: Follow/unfollow users and view following feeds
- Real-time Updates: Live notifications and feed updates via Socket.io
- Rich Text Editor: Advanced text formatting with mentions, hashtags, and code blocks
- Board System: 4chan-style boards with external content integration
- News Bot System: Automated news aggregation with configurable bots
- Search Functionality: Advanced search across posts, users, and content
- Bookmarks: Save and organize favorite posts
- Notifications: Real-time notification system with read/unread states
- Messages: Direct messaging system between users
- Services Marketplace: User-created services with ratings and reviews
- YouTube Integration: Embedded YouTube videos with custom player
- Image Handling: Cloudinary-powered image storage and optimization
- Responsive Design: Mobile-first design that works across all devices
- Dark/Light Themes: Theme switching with user preferences
- Wide Mode: Optional wide layout for better content viewing
- React.js with Vite for fast development
- Tailwind CSS + DaisyUI for modern styling
- TanStack Query for efficient data fetching and caching
- React Router for client-side routing
- Socket.io Client for real-time features
- React Hot Toast for notifications
- React Icons for consistent iconography
- Node.js with Express.js framework
- MongoDB with Mongoose ODM
- Socket.io for real-time communication
- JWT for authentication
- Cloudinary for image storage and optimization
- Multer for file upload handling
- Bcrypt for password hashing
- Axios for external API requests
- 4chan API for board content
- News APIs for content aggregation
- YouTube API for video embedding
- Cloudinary for media management
Before running the application, ensure you have:
- Node.js (v16 or later)
- npm (v7 or later)
- MongoDB database
- Cloudinary account for image storage
Create a .env file in the backend directory with the following variables:
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
NODE_ENV=development
PORT=5000
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_key
CLOUDINARY_API_SECRET=your_cloudinary_secret
NEWS_API_KEY=your_news_api_key-
Clone the repository:
git clone https://github.com/yourusername/x-chan.git cd x-chan -
Install all dependencies:
npm run install-all
-
Set up environment variables (see Environment Setup above)
-
Start the development servers:
npm run dev
This will start both backend and frontend servers concurrently.
npm run dev- Start both backend and frontend in development modenpm run server- Start only the backend servernpm run client- Start only the frontend servernpm run build- Build the frontend for productionnpm start- Start the production server
x-chan/
├── frontend/ # React frontend application
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Page components
│ │ ├── hooks/ # Custom React hooks
│ │ ├── services/ # API services
│ │ └── utils/ # Utility functions
│ └── public/ # Static assets
├── backend/ # Express backend server
│ ├── controllers/ # Request handlers
│ ├── routes/ # API routes
│ ├── models/ # Mongoose data models
│ ├── middleware/ # Express middleware
│ ├── services/ # Business logic services
│ └── utils/ # Backend utilities
└── docs/ # Project documentation
For detailed information about specific features, see the documentation in the docs/ directory:
- Application Architecture:
docs/application_map.txt - Post Number System:
docs/post_number_system.md - Board System:
docs/boards_and_threads_system.md - Rich Text Editor:
docs/rich_text_system.md - Theme System:
docs/theme-specification.txt - News Bot System:
docs/bot-system-implementation.md
POST /api/auth/signup- User registrationPOST /api/auth/login- User loginPOST /api/auth/logout- User logoutGET /api/auth/me- Get current user
GET /api/posts- Get all postsPOST /api/posts- Create new postGET /api/posts/:id- Get specific postDELETE /api/posts/:id- Delete postPOST /api/posts/:id/like- Like/unlike post
GET /api/users/profile/:username- Get user profilePOST /api/users/follow/:id- Follow/unfollow userPOST /api/users/update- Update user profile
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This application is designed to run on Replit. For deployment:
- Push your code to the repository
- The application will automatically build and deploy
- Access your deployed app via the provided Replit URL
This project is licensed under the MIT License - see the LICENSE file for details.
- Twitter and 4chan for design inspiration
- React and Node.js communities for excellent tooling
- Cloudinary for reliable image hosting
- All open-source libraries that made this project possible
X-Chan: Where microblogging meets anonymous thread-based discussions in a modern, feature-rich platform.