CEREBRO

A modern content management and sharing platform that allows users to organize, manage, and share their favorite content including Twitter posts, YouTube videos, and text notes.

🚀 Features

• User Authentication: Secure sign up and sign in with JWT-based authentication
• Content Management: Create, edit, and delete content items
• Multiple Content Types: Support for Twitter links, YouTube videos, and text notes
• Content Filtering: Filter content by type (All, Twitter, YouTube, Text)
• Search Functionality: Search through your content collection
• Shareable Links: Generate shareable links to showcase your content collection
• Demo Mode: Try the platform with a demo account
• Responsive Design: Fully responsive UI that works on desktop and mobile devices
• Modern UI: Beautiful interface built with Tailwind CSS and Framer Motion animations
• Error Handling: Comprehensive error boundary for graceful error handling

🛠️ Tech Stack

Frontend

• React 19 - UI library
• TypeScript - Type safety
• Vite - Build tool and dev server
• React Router DOM - Client-side routing
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library
• Axios - HTTP client
• React Icons - Icon library
• React Social Media Embed - Social media embed components

Backend

• Node.js - Runtime environment
• Express - Web framework
• TypeScript - Type safety
• MongoDB - Database
• Mongoose - MongoDB object modeling
• JSON Web Token (JWT) - Authentication
• CORS - Cross-origin resource sharing

📁 Project Structure

CEREBRO/
├── Brainly Frontend/          # React frontend application
│   ├── src/
│   │   ├── components/        # Reusable UI components
│   │   │   └── ui/           # UI components (Card, Sidebar, Modal, etc.)
│   │   ├── pages/            # Page components
│   │   ├── hooks/            # Custom React hooks
│   │   ├── icons/            # Icon components
│   │   ├── App.tsx           # Main app component
│   │   └── main.tsx          # Entry point
│   ├── package.json
│   └── vercel.json           # Vercel deployment config
│
└── Brainly Backend/          # Express backend API
    ├── src/
    │   ├── index.ts          # Main server file
    │   ├── db.ts             # Database models
    │   ├── middleware.ts     # Authentication middleware
    │   ├── config.ts         # Configuration
    │   └── utils.ts          # Utility functions
    └── package.json

🚦 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• MongoDB (local or cloud instance like MongoDB Atlas)

Installation

1. Clone the repository

   git clone <repository-url>
   cd CEREBRO

2. Install Frontend Dependencies

   cd "Brainly Frontend"
   npm install

3. Install Backend Dependencies

   cd "../Brainly Backend"
   npm install

Configuration

Backend Configuration

1. Create a .env file in the Brainly Backend directory:

   MONGODB_URI=your_mongodb_connection_string
   JWT_PASSWORD=your_jwt_secret_key

2. Update CORS origin in Brainly Backend/src/index.ts if needed:

   app.use(cors({
     origin: "http://localhost:5173", // For local development
     credentials: true
   }));

Frontend Configuration

1. Create a .env file in the Brainly Frontend directory:

   VITE_BACKEND_URL=http://localhost:3000

Running the Application

Start the Backend Server

cd "Brainly Backend"
npm run dev

The backend server will run on http://localhost:3000

Start the Frontend Development Server

cd "Brainly Frontend"
npm run dev

The frontend will run on http://localhost:5173 (or the port Vite assigns)

📚 API Endpoints

Authentication

• POST /api/v1/signup - Register a new user
• POST /api/v1/signin - Sign in and get JWT token

Content Management

• GET /api/v1/content - Get all content for authenticated user
• POST /api/v1/content - Create new content
• PUT /api/v1/content/:id - Update content by ID
• DELETE /api/v1/content - Delete content

Sharing

• POST /api/v1/brain/share - Generate or remove shareable link
• GET /api/v1/brain/:shareLink - Get shared content by hash

🎯 Usage

1. Sign Up: Create a new account or use the demo mode
2. Sign In: Log in with your credentials
3. Dashboard: View and manage your content
4. Create Content: Add Twitter links, YouTube videos, or text notes
5. Filter & Search: Use filters and search to find specific content
6. Share: Generate a shareable link to showcase your collection
7. Edit/Delete: Manage your content items

🚀 Deployment

Frontend (Vercel)

The frontend is configured for Vercel deployment. The vercel.json file handles routing configuration.

1. Push your code to GitHub
2. Import the project in Vercel
3. Set environment variables:
   • VITE_BACKEND_URL - Your backend API URL
4. Deploy

Backend

Deploy the backend to your preferred hosting service (Heroku, Railway, Render, etc.):

1. Set environment variables:
   • MONGODB_URI
   • JWT_PASSWORD
2. Update CORS origin to match your frontend URL
3. Build and start:

   npm run build
   npm start

🔒 Security Notes

• Passwords are currently stored in plain text. Consider implementing password hashing (e.g., bcrypt) for production use
• JWT tokens are stored in localStorage. Consider using httpOnly cookies for enhanced security
• Ensure CORS is properly configured for production
• Validate and sanitize all user inputs

🐛 Known Issues / Future Improvements

• Implement password hashing
• Add input validation (e.g., Zod)
• Add tags functionality
• Implement content categories
• Add user profile management
• Add content export functionality
• Implement rate limiting
• Add unit and integration tests

📝 License

ISC

👥 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📧 Contact

For questions or support, please open an issue in the repository.

---

Built with ❤️ using React, Express, and MongoDB