A modern, beautiful social media frontend-only plaform built with React, featuring glass morphism design, interactive UI elements, and seamless user experience.
Experience SocialConnect live: https://social-app-eta-bice.vercel.app/
- Glass Morphism UI - Beautiful frosted glass effects
- Gradient Backgrounds - Eye-catching color schemes
- Smooth Animations - Enhanced user interactions
- Responsive Design - Perfect on all devices
- Create Posts - Share text and images with your network
- Like & Engage - Interactive post reactions
- Real-time Chat - Connect with friends instantly
- User Profiles - Customizable profiles with banners
- Notifications - Stay updated with activities
- Secure Authentication - Safe login and registration
- Profile Customization - Personal avatars and cover photos
- Privacy Focused - User data protection
- Frontend: React 18, Vite
- Styling: Tailwind CSS
- Icons: Lucide React
- State Management: React Context API
- Deployment: Vercel
- Node.js 16+
- npm or yarn
-
Clone the repository
git clone https://github.com/amvitor-cm/social-app.git cd social-app -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser Navigate to
http://localhost:3000
npm run build
npm run preview##Project Structure
src/
├── components/ # Reusable UI components
│ ├── auth/ # Authentication components
│ ├── common/ # Shared components
│ └── home/ # Home page components
├── pages/ # Page components
├── hooks/ # Custom React hooks
├── context/ # React Context for state management
├── styles/ # Global styles and CSS
└── utils/ # Helper functions
- Login/Signup - Beautiful authentication flow
- Feed - Infinite scroll post feed
- Create Post - Rich post creation with image upload
- Profile - User profile with cover photo
- Chat Interface - Real-time messaging
- Navigation - Mobile-optimized bottom nav
SocialConnect embraces modern design principles:
- Minimalist - Clean, uncluttered interfaces
- Intuitive - User-friendly navigation
- Accessible - Responsive and inclusive design
- Performant - Fast loading and smooth interactions
The project is configured for easy deployment on Vercel:
- Push your code to GitHub
- Connect your repository to Vercel
- Deploy automatically on every push
We welcome contributions! Please feel free to submit pull requests or open issues for bugs and feature requests.
- Follow React best practices
- Use meaningful component and variable names
- Ensure responsive design
- Test across different devices
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Group Chats - Multi-user conversations
- Story Feature - 24-hour disappearing content
- Video Posts - Native video support
- Advanced Search - Smart content discovery
- Dark Mode - Complete theme system
- PWA Support - Installable app experience
This project is licensed under the MIT License - see the LICENSE file for details.
Have questions or need help with SocialConnect? I'd love to hear from you!
- Email: [amvitor.cm@gmail.com]
- GitHub Issues: Create an Issue
- Feature Requests: Suggest a Feature
- How do I reset my password? - Currently working on password recovery feature
- Can I use SocialConnect on mobile? - Yes! Fully responsive design
- Is my data secure? - We use localStorage for demo; production would use secure backend
When reporting bugs, please include:
- Device and browser information
- Steps to reproduce
- Expected vs actual behavior
- Screenshots if possible
Built with using React and modern web technologies
-
Feel free to reach out:
-
Email: amvitor.cm@gmail.com
-
Telegram: @amvior
Note: This is a frontend demonstration project. For production use, a secure backend with proper authentication and database would be required.