A modern, full-stack social platform for developers to share knowledge, connect, and grow together. Built with React, Node.js, and MongoDB.
Clean, modern landing page with glassmorphism design.
Personalized social feed with posts from followed users and recommended content
Comprehensive user profiles with bio, post history, and social connections
Rich text editor with markdown support, code highlighting, and media embedding
Real-time direct messaging with clean, intuitive interface
Explore and follow programming languages, frameworks, and technologies
Fully responsive design optimized for mobile devices
- User Authentication & Authorization - Secure JWT-based authentication
- Social Feed - Personalized content feed with following/recommended posts
- Post Creation - Rich text editor with markdown support, code highlighting, and video embedding
- Topic System - Follow programming languages, frameworks, and technologies
- Real-time Messaging - Direct messaging between developers
- Notification System - Real-time notifications for likes, comments, follows
- User Profiles - Customizable profiles with bio, avatar, and post history
- Search & Discovery - Advanced search across posts, topics, and users
- Responsive Design - Mobile-first design that works on all devices
- Glass Morphism Design - Beautiful frosted glass effects and modern aesthetics
- Dark/Light Theme Support - Elegant theming system
- Smooth Animations - Framer Motion powered interactions
- Internationalization - Full English and Japanese language support
- Progressive Web App - Fast, reliable, and installable
- Real-time Updates - Live notifications and message updates
- Image & Video Upload - Cloud storage integration
- Code Syntax Highlighting - Support for multiple programming languages
- SEO Optimized - Meta tags, structured data, and performance optimization
- API Rate Limiting - Secure and scalable backend architecture
- React 18 - Modern React with hooks and functional components
- Vite - Lightning-fast build tool and dev server
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Production-ready motion library
- React Router - Client-side routing
- React i18next - Internationalization
- Axios - HTTP client for API calls
- Node.js - JavaScript runtime
- Express.js - Web application framework
- MongoDB - NoSQL database
- Mongoose - MongoDB object modeling
- JWT - JSON Web Token authentication
- Multer - File upload handling
- Bcrypt - Password hashing
- CORS - Cross-origin resource sharing
- ESLint - Code linting
- Prettier - Code formatting
- Git - Version control
- Postman - API testing
- Node.js (v16 or higher)
- MongoDB (v5 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/yourusername/sakusaku.git cd sakusaku -
Install dependencies
# Install backend dependencies cd backend npm install # Install frontend dependencies cd ../frontend npm install
-
Environment Setup
# Backend environment cd backend cp env.example .env # Edit .env with your configuration
-
Database Setup
# Start MongoDB mongod # Seed the database (optional) cd backend npm run seed
-
Start Development Servers
# Start backend server npm run server:dev # Start frontend server npm run client:dev # Start both server together npm run dev
-
Access the Application
- Frontend: http://localhost:5173
- Backend API: http://localhost:5000
SakuSaku/
├── backend/ # Backend API server
│ ├── middleware/ # Custom middleware
│ ├── models/ # MongoDB schemas
│ ├── routes/ # API routes
│ ├── seeders/ # Database seeders
│ └── server.js # Express server
├── frontend/ # React frontend
│ ├── public/ # Static assets
│ ├── src/
│ │ ├── components/ # Reusable components
│ │ ├── pages/ # Page components
│ │ ├── services/ # API services
│ │ ├── store/ # State management
│ │ └── locales/ # Translation files
│ └── package.json
└── README.md
POST /api/auth/register- User registrationPOST /api/auth/login- User loginGET /api/auth/me- Get current user
GET /api/posts- Get all postsPOST /api/posts- Create new postGET /api/posts/:id- Get single postPUT /api/posts/:id- Update postDELETE /api/posts/:id- Delete post
GET /api/users- Get all usersGET /api/users/:username- Get user profilePUT /api/users/:id- Update user profile
GET /api/topics- Get all topicsPOST /api/topics/:id/follow- Follow topicDELETE /api/topics/:id/follow- Unfollow topic
GET /api/messages- Get conversationsPOST /api/messages- Send messageGET /api/messages/:conversationId- Get conversation messages
SakuSaku supports multiple languages:
- English - Primary language
- Japanese - Full translation support
Language switching is available throughout the application with automatic browser detection.
- Primary: Indigo (#6366F1)
- Secondary: Purple (#8B5CF6)
- Accent: Pink (#EC4899)
- Background: White/Light Gray
- Text: Dark Gray (#1F2937)
- Font: Inter (Google Fonts)
- Weights: 300, 400, 500, 600, 700
- Glass morphism cards with backdrop blur
- Smooth hover animations
- Responsive grid layouts
- Modern form inputs
- Interactive buttons with states
- JWT Authentication - Secure token-based authentication
- Password Hashing - Bcrypt encryption
- Input Validation - Server-side validation
- CORS Protection - Cross-origin request handling
- Rate Limiting - API abuse prevention
- XSS Protection - Content Security Policy
- Lazy Loading - Component and route-based code splitting
- Image Optimization - Compressed and responsive images
- Caching - Browser and API response caching
- Bundle Optimization - Tree shaking and minification
- CDN Ready - Static asset optimization
# Run backend tests
cd backend
npm test
# Run frontend tests
cd frontend
npm testcd frontend
npm run build
# Deploy dist/ foldercd backend
# Set environment variables
npm start- 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
- React - Frontend framework
- Express.js - Backend framework
- Tailwind CSS - CSS framework
- Framer Motion - Animation library
- MongoDB - Database