Collect

Collect is a responsive and interactive web application built on the MERN stack that allows users to create accounts, post content with images, interact with comments, follow other users, and enjoy a seamless social experience.

Features

• User Authentication: Sign up, log in, and manage profiles.
• Create Posts: Add posts with images, titles, and descriptions.
• Comment Section: Allow users to comment on posts and view user profiles by clicking on a comment.
• Follow/Unfollow Users: Interact with other users by following or unfollowing them.
• Responsive Design: Optimized for all devices using TailwindCSS.
• Live Interactivity: Powered by react-hot-toast for instant feedback.

Tech Stack

Frontend

• 
• 
• 
• 

Backend

• 
• 

Database

• 

Deployment

• 
• 

Installation and Setup

Prerequisites

• Node.js and npm installed
• MongoDB installed or access to MongoDB Atlas

Clone the Repository

$ git clone https://github.com/yourusername/collectify.git
$ cd collectify

Backend Setup

1. Navigate to the backend directory:

   $ cd backend

2. Install dependencies:

   $ npm install

3. Create a .env file:

   MONGO_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret
   

4. Start the backend server:

   $ npm run dev

Frontend Setup

1. Navigate to the frontend directory:

   $ cd frontend

2. Install dependencies:

   $ npm install

3. Start the frontend server:

   $ npm start

Usage

1. Open the application in your browser: http://localhost:3000.
2. Create an account or log in.
3. Create posts by adding an image, title, and description.
4. Comment on posts and interact with other users.
5. Explore user profiles and follow/unfollow users.

Project Structure

collectify/
|
|-- backend/
|   |-- models/            # Mongoose schemas
|   |-- routes/            # API routes
|   |-- controllers/       # Business logic
|   |-- middleware/        # Authentication & error handling
|   |-- server.js          # Express server setup
|
|-- frontend/
|   |-- src/
|       |-- components/    # Reusable components
|       |-- pages/         # Application pages
|       |-- hooks/         # Custom React hooks
|       |-- App.js         # Main app entry point
|       |-- index.js       # React DOM rendering
|
|-- README.md              # Documentation
|-- package.json           # Project metadata

Contributing

1. Fork the repository.
2. Create your feature branch: git checkout -b feature-name
3. Commit your changes: git commit -m 'Add feature-name'
4. Push to the branch: git push origin feature-name
5. Open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgements

• React.js
• TailwindCSS
• MongoDB
• React-Hot-Toast

---

Built with love by strange.