{"id":28480235,"url":"https://github.com/akhil07-ctrl/pop-x","last_synced_at":"2025-07-03T19:33:02.688Z","repository":{"id":297250240,"uuid":"996214340","full_name":"Akhil07-ctrl/Pop-X","owner":"Akhil07-ctrl","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-04T17:21:13.000Z","size":146,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-04T22:21:08.517Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pop-x-teal.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Akhil07-ctrl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-04T16:09:57.000Z","updated_at":"2025-06-04T17:21:15.000Z","dependencies_parsed_at":"2025-06-04T21:38:53.274Z","dependency_job_id":"8db25363-79cb-4a35-99c9-a7e4ee053903","html_url":"https://github.com/Akhil07-ctrl/Pop-X","commit_stats":null,"previous_names":["akhil07-ctrl/pop-x","akhil07-ctrl/example"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Akhil07-ctrl/Pop-X","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Akhil07-ctrl%2FPop-X","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Akhil07-ctrl%2FPop-X/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Akhil07-ctrl%2FPop-X/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Akhil07-ctrl%2FPop-X/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Akhil07-ctrl","download_url":"https://codeload.github.com/Akhil07-ctrl/Pop-X/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Akhil07-ctrl%2FPop-X/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263388691,"owners_count":23459250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-07T19:05:54.226Z","updated_at":"2025-07-03T19:33:02.678Z","avatar_url":"https://github.com/Akhil07-ctrl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PopX - Social Media Platform\n\nA modern, responsive social media platform built with React and Tailwind CSS where users can share their thoughts and ideas with the world.\n\n## 🌟 Features\n\n- **User Authentication**: Complete signup and login system\n- **Profile Management**: Editable user profiles with bio, location, and website\n- **Responsive Design**: Mobile-first design that works on all devices\n- **Modern UI**: Clean, intuitive interface built with Tailwind CSS\n- **Local Storage**: Persistent user data storage\n- **Dynamic Navigation**: Context-aware navigation based on user state\n\n## 🚀 Live Demo\n\nCheck out the live demo: [PopX](https://pop-x-teal.vercel.app/)\n\n## 🛠️ Tech Stack\n\n- **Frontend Framework**: React 19.1.0\n- **Styling**: Tailwind CSS v4\n- **Routing**: React Router DOM 7.6.2\n- **Icons**: React Icons 5.5.0\n- **Build Tool**: Vite 6.3.5\n- **Deployment**: GitHub Pages\n\n## 📋 Prerequisites\n\nBefore you begin, ensure you have the following installed:\n\n- **Node.js** (version 16.0 or higher)\n- **npm** (version 7.0 or higher)\n- **Git** (for version control)\n\n## 🔧 Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/Akhil07-ctrl/Pop-X.git\n   ```\n\n2. **Navigate to the client directory**\n   ```bash\n   cd client\n   ```\n\n3. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n4. **Start the development server**\n   ```bash\n   npm run dev\n   ```\n\n5. **Open your browser**\n   Navigate to `http://localhost:5173` to view the application.\n\n## 📁 Project Structure\n\n```\nPopX/\n├── client/\n│   ├── public/\n│   │   └── vite.svg\n│   ├── src/\n│   │   ├── assets/\n│   │   │   └── react.svg\n│   │   ├── components/\n│   │   │   ├── welcome.jsx      # Landing page component\n│   │   │   ├── login.jsx        # Login form component\n│   │   │   ├── signUp.jsx       # Registration form component\n│   │   │   └── profile.jsx      # User profile component\n│   │   ├── App.css              # Global styles\n│   │   ├── App.jsx              # Main app component with routing\n│   │   ├── index.css            # Tailwind CSS imports\n│   │   └── main.jsx             # React app entry point\n│   ├── eslint.config.js         # ESLint configuration\n│   ├── index.html               # HTML template\n│   ├── package.json             # Dependencies and scripts\n│   ├── postcss.config.js        # PostCSS configuration\n│   ├── tailwind.config.js       # Tailwind CSS configuration\n│   └── vite.config.js           # Vite configuration\n└── README.md                    # Project documentation\n```\n\n## 🎯 Usage\n\n### Creating an Account\n\n1. Visit the welcome page\n2. Click \"Create Account\"\n3. Fill in the registration form:\n   - Full Name (required)\n   - Phone Number (required)\n   - Email Address (required)\n   - Password (required)\n   - Company Name (optional)\n   - Agency status (required)\n4. Click \"Create Account\"\n5. You'll be redirected to the login page after successful registration\n\n### Logging In\n\n1. From the welcome page, click \"Login\"\n2. Enter your credentials:\n   - Username (optional - will use email prefix if not provided)\n   - Email Address (required)\n   - Password (required)\n3. Click \"Login\"\n4. You'll be redirected to your profile page\n\n### Managing Your Profile\n\n1. After logging in, you'll see your profile page\n2. Click the edit icon (pencil) to edit your profile\n3. Update your information:\n   - Name\n   - Email\n   - Bio\n   - Location\n   - Website\n4. Click the save icon to save changes or cancel icon to discard\n\n### Navigation\n\n- **Home Button**: Returns to the welcome page\n- **Profile Button**: Access your profile (when logged in)\n- **Logout Button**: Sign out and return to welcome page\n- **Back Buttons**: Navigate to previous pages\n\n## 🎨 Customization\n\n### Tailwind CSS Configuration\n\nThe project uses Tailwind CSS v4 with a custom configuration. You can modify the styling by:\n\n1. **Editing `tailwind.config.js`** for theme customization\n2. **Modifying component styles** directly in JSX files\n3. **Adding custom CSS** in `App.css` or `index.css`\n\n### Color Scheme\n\nThe app uses a violet-based color scheme:\n- Primary: `violet-600` (#7c3aed)\n- Secondary: `violet-200` (#ddd6fe)\n- Accent: `purple-600` (#9333ea)\n\n### Adding New Components\n\n1. Create a new file in `src/components/`\n2. Import and use in `App.jsx`\n3. Add routing if needed in the `Routes` section\n\n## 📱 Responsive Design\n\nThe application is fully responsive and optimized for:\n\n- **Mobile devices** (320px and up)\n- **Tablets** (768px and up)\n- **Desktop** (1024px and up)\n- **Large screens** (1280px and up)\n\n## 🔒 Data Storage\n\nCurrently, the app uses **localStorage** for data persistence:\n\n- **User profiles**: Stored as JSON in `currentUser` key\n- **Registered users**: Stored as array in `registeredUsers` key\n- **Session management**: Automatic login state detection\n\n\u003e **Note**: In a production environment, you would replace localStorage with a proper backend database and authentication system.\n\n## 🚀 Deployment\n\n### GitHub Pages Deployment\n\n1. **Build the project**\n   ```bash\n   npm run build\n   ```\n\n2. **Deploy to GitHub Pages**\n   ```bash\n   npm run deploy\n   ```\n\n3. **Configure GitHub Pages**\n   - Go to your repository settings\n   - Navigate to Pages section\n   - Select \"Deploy from a branch\"\n   - Choose `gh-pages` branch\n\n### Manual Deployment\n\n1. **Build the project**\n   ```bash\n   npm run build\n   ```\n\n2. **Upload the `dist` folder** to your hosting provider\n\n## 📜 Available Scripts\n\nIn the client directory, you can run:\n\n- **`npm run dev`** - Starts the development server\n- **`npm run build`** - Builds the app for production\n- **`npm run preview`** - Preview the production build locally\n- **`npm run deploy`** - Deploy to GitHub Pages\n- **`npm run lint`** - Run ESLint for code quality\n\n## 🤝 Contributing\n\nContributions are welcome! Please follow these steps:\n\n1. **Fork the repository**\n2. **Create a feature branch**\n   ```bash\n   git checkout -b feature/amazing-feature\n   ```\n3. **Commit your changes**\n   ```bash\n   git commit -m 'Add some amazing feature'\n   ```\n4. **Push to the branch**\n   ```bash\n   git push origin feature/amazing-feature\n   ```\n5. **Open a Pull Request**\n\n### Development Guidelines\n\n- Follow React best practices\n- Use functional components with hooks\n- Maintain consistent code formatting\n- Write descriptive commit messages\n- Test your changes thoroughly\n\n## 🐛 Known Issues\n\n- Profile image upload is not yet implemented\n- No backend integration (uses localStorage)\n- Limited form validation\n- No password reset functionality\n\n## 🔮 Future Enhancements\n\n- [ ] Backend API integration\n- [ ] Real-time messaging\n- [ ] Post creation and sharing\n- [ ] Image upload functionality\n- [ ] Advanced user search\n- [ ] Email verification\n- [ ] Password reset\n- [ ] Dark mode support\n- [ ] Push notifications\n- [ ] Social media integrations\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 👨‍💻 Author\n\n**Kundena Akhil**\n- Website: [Personal Portfolio](https://portfolio-nine-flax-29.vercel.app/)\n- GitHub: [@Akhil07-ctrl](https://github.com/Akhil07-ctrl)\n- LinkedIn: [LinkedIn](https://www.linkedin.com/in/kundena-akhil-4b7073170/)\n- Email: akhilkundena@gmail.com\n\n## 🙏 Acknowledgments\n\n- [React](https://reactjs.org/) - The web framework used\n- [Tailwind CSS](https://tailwindcss.com/) - For styling\n- [Vite](https://vitejs.dev/) - Build tool\n- [React Router](https://reactrouter.com/) - For routing\n- [React Icons](https://react-icons.github.io/react-icons/) - For icons\n\n## 📞 Support\n\nIf you have any questions or need help with the project:\n\n1. **Check the documentation** above\n2. **Search existing issues** on GitHub\n3. **Create a new issue** if you can't find a solution\n4. **Contact the maintainer** via email\n\n---\n\n**Made with ❤️ and React**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakhil07-ctrl%2Fpop-x","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakhil07-ctrl%2Fpop-x","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakhil07-ctrl%2Fpop-x/lists"}