echoSpace

echoSpace is a web application built with Django Channels, Tailwind CSS, and WebSocket, allowing users to create accounts, join rooms and chat in real-time.

• Features
• Technologies Used
• Upcoming Features
• Screenshots
• Installation
• Usage
• Project Structure

Features

• User Authentication: Register, log in, and manage account details.
• Profile Management: Update first name, last name, username, and profile picture.
• Room Management: Create and join voice rooms.
• Real-Time Chat: Communicate with others in the same room.
• User List: View a list of all registered users.

Technologies Used

• Backend: Django
• Frontend: HTML, CSS, JavaScript, Tailwind CSS, AJAX
• Real-Time Communication: WebSocket, Django Channels
• Database: SQLite3
• Redis: Caching layer for frequently accessed data.
• Development Tools: Postman

Upcoming Features

• Voice Room Feature: Implementation using WebRTC to enable real-time voice communication within rooms.
• Message Notifications: Planning to implement real-time notifications using Django Channels and WebSocket, allowing users to receive alerts for new messages.
• UI Improvements: Enhancing the user interface using React.js for a more dynamic and responsive experience.

Screenshots

Installation

1. Set Up Virtual Environment

   python3 -m venv env

2. Clone the Repository

   git clone https://github.com/aslammiya/echospace
   cd echospace

3. Activate Virtual Environment

   On macOS/Linux:

   source env/bin/activate

   On Windows:

   .\env\Scripts\activate

4. Start Redis Server

   redis-server

   For detailed instructions on setting up Redis, refer to the Install Redis on Linux, macOS, and Window.

   OR

   Alternatively, you can use Redis CLoud

5. Install Dependencies

   pip install -r requirements.txt

6. Set Up Database

   ./manage.py migrate

7. Create Superuser (Optional)

   ./manage.py createsuperuser

8. Configure Redis

   • For Local Development: Uncomment the following lines in core/settings.py and comment out the REDIS_URL section.

     CHANNEL_LAYERS = {
         "default": {
             "BACKEND": "channels_redis.core.RedisChannelLayer",
             "CONFIG": {
                 "hosts": [("localhost", 6379)],
             },
         },
     }

   • For Production: If you are using a Redis cloud service, uncomment the REDIS_URL line and comment out the local configuration.

     REDIS_URL = os.environ.get('REDIS_URL')
     
     CHANNEL_LAYERS = {
         "default": {
             "BACKEND": "channels_redis.core.RedisChannelLayer",
             "CONFIG": {
                 "hosts": [REDIS_URL],
             },
         },
     }

   Set the REDIS_URL environment variable to your Redis instance URL in production environments like Heroku or Render.

   Alternatively, you can use:

   REDIS_URL="redis://:your_redis_password@your_redis_host:port/0"

   For detailed instructions on setting up Redis Cloud, refer to the Redis Cloud Quickstart Guide.

9. Start Django-tailwind

   ./manage.py tailwind start

10. Run the Application

    daphne -b 0.0.0.0 -p 8000 core.asgi:application

    Alternatively, you can use: unicorn

Usage

• Access the Web App: Open your browser and navigate to http://localhost:8000 (or the port you specified).
• Log In / Register: Use the provided forms to create an account or log in.
• Create / Join Rooms: Use the left-side panel to manage and join voice rooms.
• Chat in Rooms: Communicate with other users in the same room.

Project Structure

├── core
│   ├── asgi.py
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
├── home
│   ├── admin.py
│   ├── apps.py
│   ├── consumers.py
│   ├── __init__.py
│   ├── migrations
│   ├── models.py
│   ├── routing.py
│   ├── static
│   │   ├── css
│   │   │   └── style.css
│   │   ├── favicon.ico
│   │   ├── images
│   │   │   ├── dp.png
│   │   │   ├── github.png
│   │   │   ├── insta.png
│   │   │   └── linkdin.png
│   │   └── js
│   │       ├── main.js
│   │       ├── register.js
│   │       └── rooms.js
│   ├── templates
│   │   ├── base.html
│   │   ├── homeLobby.html
│   │   ├── index.html
│   │   ├── loginUser.html
│   │   ├── roomLobby.html
│   │   └── userRegistration.html
│   ├── tests.py
│   └── views.py
├── manage.py
├── media
│   ├── profile_pictures
│   │   ├── 
│   └── screenshots
│       ├── ds_1.png
│       ├── ds_2.png
│       ├── ds_3.png
│       ├── ds_5.png
│       ├── ds_6.png
│       ├── ph_1.png
│       ├── ph_2.png
│       ├── ph_3.png
│       ├── ph_4.png
│       ├── ph_5.png
│       └── ph_6.png
├── staticfiles
│   ├── 
├── theme
│   ├── 
├── node_modules
│   ├── 
├── package.json
├── package-lock.json
├── README.md
├── render.yaml
├── requirements.txt
├── runserver.log
└── tailwind.log

Contributing

Feel free to submit issues or pull requests. Contributions are welcome!