Flux Feed

Flux Feed is a modern Twitter clone application that offers a full-featured social media experience. Developed with the MERN stack, it enables real-time interactions, secure authentication, and a clean, responsive interface with Tailwind CSS and DaisyUI. This project highlights my full-stack development skills, with an emphasis on performance, scalability, and intuitive design.

Features

1. Real-Time User Interactions

Users on Flux Feed experience real-time interactions, making the app dynamic and engaging.

• Posting and Liking: Users can post new tweets and like others' tweets, with updates happening in real-time.
• Retweeting and Commenting: Users can retweet and comment on posts instantly, enabling a truly interactive experience.
• Notification System: Real-time notifications for new followers, likes, retweets, and comments without refreshing the page.

2. Secure User Authentication

Flux Feed uses secure authentication methods to ensure user data privacy and session security.

• JWT Authentication: Users sign in with JSON Web Tokens, which keep sessions secure and prevent unauthorized access.
• Bcrypt Password Hashing: User passwords are encrypted with bcrypt, providing an extra layer of security.

3. Modern, Responsive Interface

Flux Feed is designed with a clean, mobile-friendly interface for a great user experience on any device.

• Tailwind CSS & DaisyUI: The frontend is styled with Tailwind CSS and DaisyUI, making use of utility classes and modern UI components.
• Responsive Design: With mobile-first principles, Flux Feed adapts seamlessly to different screen sizes.

Home Page

Sign Up Page

Profile Page

4. Scalable and Modular Codebase

Flux Feed is built with scalability and maintainability in mind, ensuring efficient development and easy expansion.

• Backend: Built with Node.js and Express, Flux Feed handles RESTful API requests and interacts with MongoDB.
• Frontend: Using React and Redux for state management, the frontend is optimized for performance and user experience.
• Environment Management: The app configuration is centralized with a .env file, allowing easy switching between development and production environments.

Project Design and Technologies

• Frontend: React, Tailwind CSS, DaisyUI, Redux
• Backend: Node.js, Express
• Database: MongoDB
• Authentication: JWT with bcrypt for password hashing

Installation

1. Clone the Repository:

   git clone https://github.com/yourusername/flux-feed-twitter-clone.git
   cd flux-feed-twitter-clone

2. Backend Set Up:

   cd backend
   npm install

3. Run Backend:

   cd backend
   npm run start

4. Front Set Up:

   cd ../frontend
   npm install

5. Run frontend:

   cd frontend
   npm run dev