DevShell

A terminal-based social platform for developers

DevShell is a unique social network that combines the power of a terminal interface with modern social features. Built with React, Firebase, and xterm.js, it offers developers a familiar command-line experience for sharing posts, discovering content, and connecting with other developers.

🚀 Features

Social Features

• Posts - Share thoughts and code snippets (280 characters)
• Global Feed - Browse posts from all users
• User Profiles - View and edit your developer profile
• Likes - Like and unlike posts
• Tags - Organize posts with hashtags
• Trending - Discover trending topics
• Search - Find posts by content

Terminal Experience

• Full Terminal UI - Powered by xterm.js
• Command History - Navigate with ↑/↓ arrows
• Autocomplete - Tab completion for commands
• Search History - Ctrl+R for reverse search
• Themes - Customizable terminal themes

Backend

• Firebase Authentication - Secure user management
• Firestore Database - Real-time data sync
• Security Rules - Public read, authenticated write

🛠️ Tech Stack

• Frontend: React, xterm.js, Vite
• Backend: Firebase (Auth, Firestore)
• Styling: CSS with terminal aesthetics
• State Management: React Context API

📦 Installation

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Firebase account

Setup

1. Clone the repository

   git clone https://github.com/rohansachinpatil/DevShell.git
   cd DevShell

2. Install dependencies

   # Install client dependencies
   cd client
   npm install
   
   # Install server dependencies (if using)
   cd ../server
   npm install

3. Configure Firebase

   Create client/.env.local with your Firebase credentials:

   VITE_FIREBASE_API_KEY=your_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=your_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   VITE_FIREBASE_APP_ID=your_app_id
   VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id

4. Enable Firebase Services

   • Go to Firebase Console
   • Enable Authentication (Email/Password)
   • Create Firestore Database
   • Deploy security rules from firestore.rules

5. Run the development server

   cd client
   npm run dev

6. Open in browser

   http://localhost:5173
   

🎮 Usage

Basic Commands

# Authentication
signup <username> <email> <password>  # Create account
login <email> <password>              # Login
logout                                # Logout

# Social - Posts
post "message" --tags tag1,tag2       # Create a post
feed [username]                       # View feed
myfeed                                # View your posts
deletepost <postId>                   # Delete your post
like <postId>                         # Like a post
unlike <postId>                       # Unlike a post

# Discovery
search <term>                         # Search posts
tag <tagname>                         # View posts by tag
trending                              # View trending tags

# Profiles
profile [username]                    # View profile
editprofile --bio "text"              # Update your bio

# Navigation
help                                  # Show all commands
clear                                 # Clear screen

Example Session

# Create an account
signup alice alice@example.com password123

# Create a post
post "Just discovered DevShell! 🔥" --tags devshell,firebase

# View the global feed
feed

# Like a post
like abc12345

# Check trending tags
trending

# View your profile
profile

📁 Project Structure

DevShell/
├── client/                    # React frontend
│   ├── src/
│   │   ├── components/       # React components
│   │   │   └── Terminal.jsx  # Main terminal component
│   │   ├── hooks/            # Custom React hooks
│   │   │   ├── useTerminal.js
│   │   │   └── socialHandlers.js
│   │   ├── services/         # Firebase services
│   │   │   └── firebase/
│   │   │       ├── auth.js
│   │   │       ├── posts.js
│   │   │       └── profiles.js
│   │   ├── utils/            # Utility functions
│   │   │   ├── postFormatter.js
│   │   │   └── banner.js
│   │   └── contexts/         # React contexts
│   │       └── AuthContext.jsx
│   └── .env.local            # Firebase config (create this)
├── server/                    # Legacy Node.js backend (optional)
├── firestore.rules           # Firestore security rules
└── README.md

🔒 Security

• Authentication: Firebase Authentication with email/password
• Authorization: Firestore security rules enforce:
  • Public read access for posts and profiles
  • Authenticated write access for creating posts
  • Users can only delete their own posts
  • Users can only edit their own profiles

🎨 Customization

Themes

Edit client/src/themes/themes.js to customize terminal colors.

Commands

Add new commands in client/src/hooks/useTerminal.js.

UI

Modify ASCII art banner in client/src/components/Terminal.jsx.

📝 Firebase Setup Guide

See FIREBASE_SETUP.md for detailed Firebase configuration instructions.

🐛 Troubleshooting

Login not working

1. Enable Firebase Authentication in Firebase Console
2. Enable Email/Password sign-in method
3. Check browser console for errors

Posts not showing

1. Verify Firestore rules are deployed
2. Check if posts collection exists
3. Ensure user is authenticated

Empty command output

1. Check browser console for JavaScript errors
2. Verify Firebase credentials in .env.local
3. Refresh the page (Ctrl+R)

🤝 Contributing

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

📄 License

MIT License - feel free to use this project for learning and development.

🙏 Acknowledgments

• Built with xterm.js
• Powered by Firebase
• Inspired by terminal-based interfaces

📧 Contact

For questions or feedback, reach out via GitHub issues.

---

Made with ❤️ by developers, for developers