A modern full-stack social media application built with React Native (Expo) for mobile and Node.js/Express for the backend. This app provides a Twitter-like experience with features for posting, commenting, liking, and real-time notifications.
- Authentication: Social login with Google and Apple using Clerk
- Post Creation: Create posts with text and images
- Social Interactions: Like, comment, and delete posts
- User Profiles: View and edit user profiles
- Real-time Updates: Live notifications and feed updates
- Cross-platform: Runs on iOS, Android, and Web
- RESTful API: Clean and organized API endpoints
- Authentication: Secure authentication with Clerk integration
- Database: MongoDB with Mongoose ODM
- File Upload: Image handling with Cloudinary
- Security: Rate limiting with Arcjet
- Notifications: Real-time notification system
React Native with Expo
TypeScript for type safety
TailwindCSS with NativeWind for styling
React Query for data fetching and caching
Clerk for authentication
Expo Router for navigation
Node.js with Express
MongoDB with Mongoose
Cloudinary for image storage
Arcjet for security and rate limiting
CORS enabled for cross-origin requests
or
-
CLI (for mobile development)
/
(for device testing)
-
Navigate to backend directory: cd backend
-
Install dependencies: npm install
-
Environment Configuration - Create a .env file in the backend directory: MONGODB_URI=your_mongodb_connection_string CLERK_SECRET_KEY=your_clerk_secret_key CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name CLOUDINARY_API_KEY=your_cloudinary_api_key CLOUDINARY_API_SECRET=your_cloudinary_api_secret ARCJET_KEY=your_arcjet_key PORT=5000
-
Start the development server: npm run dev
-
Navigate to mobile directory: cd mobile
-
Install dependencies: npm install
-
Environment Configuration - Update the API base URL in mobile/utils/api.ts to point to your backend server.
-
Start the Expo development server: npx expo start
-
Run on device/simulator:
- Android: npx expo start --android
- iOS: npx expo start --ios
- Web: npx expo start --web
- All protected routes require authentication via Clerk
- GET /posts - Get all posts
- POST /posts - Create a new post
- DELETE /posts/:id - Delete a post
- POST /posts/:id/like - Like/unlike a post
- GET /comments/post/:postId - Get comments for a post
- POST /comments/post/:postId - Create a comment
- DELETE /comments/:commentId - Delete a comment
- GET /users/me - Get current user
- POST /users/sync - Sync user with Clerk
- PUT /users/profile - Update user profile
The backend is configured for Vercel deployment with vercel.json. Simply connect your repository to Vercel and deploy.
- Expo Application Services (EAS): For building and distributing the app
- App Store/Google Play: For production releases
MONGODB_URI=mongodb://localhost:27017/xapp CLERK_SECRET_KEY=your_clerk_secret_key CLOUDINARY_CLOUD_NAME=your_cloud_name CLOUDINARY_API_KEY=your_api_key CLOUDINARY_API_SECRET=your_api_secret ARCJET_KEY=your_arcjet_key PORT=5000
Update the API base URL in mobile/utils/api.ts based on your environment:
- Development: http://localhost:5000/api
- Production: https://your-backend-domain.com/api
Backend: cd backend && npm test Mobile: cd mobile && npm test
Mobile: cd mobile && npm run lint
- Seamless social login with Google and Apple
- Secure token-based authentication
- Automatic user synchronization
- Rich text posts with image support
- Real-time like/unlike functionality
- Post deletion with proper authorization
- Threaded comments on posts
- Real-time comment notifications
- Comment deletion by author
- Profile viewing and editing
- User post history
- Avatar and bio management
Built with ❤️ using React Native, Node.js, and modern web technologies.