manavendrasen / blocs

Get rid of boring discord servers! Experience virtual events in a whole new way!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

πŸ’» Project Name

Blocs - Virtual Spaces

πŸš€ Tagline

Get rid of boring discord servers! Experience virtual events in a whole new way!

πŸ’‘ The Problem it solves

Boring Discord Servers

  • Ever since 2020, Events are going online! This calls for a revamp of our event infrastructure as more and more events are held online or hybrid.

  • Discord servers are not a good interface for hosting events, they can get overwhelming, un-navigable boring as the size of the event grows.

    • What we're trying to do is we're making a virtual, but extremely visual representation of an event, A virtual Space for events
    • You can visualize and "live" the event just like offline events.
    • We created a 2D map which mocks the real environment of an event.
    • Some of the key features include:-
      • VIRTUAL ROOMS
        • Rooms for All Webinars
        • Rooms for Minor Events
        • Rooms for Sponsors
        • Rooms for Networking
      • THEMED MAPS
        • All events are different, which calls for the need to be able to build UIs that cater to the events needs
        • You can make your own map for your events
      • INTERACTIVE OBJECTS
        • These virtual spaces can have interactive objects, when a user visits these objects they respond with premade templates.
        • Examples:
          • Zoom Bots - create zoom meeting links, instantaneously
          • FAQ Bots - Ask anything about the event!
          • Advertisment Bots
      • EVENT LEVELS
        • Phases of the events can be categorised as game levels
        • Ex: Level 2 == Hacking phase
        • This gives a direct visula cue of whats going on in the event!

🧠 Challenges we ran into

  • Making a virtual world sounds exciting, but, its complicated!
    • Under the hood this a 2D Realtime Multiplayer RPG Game!
    • We faced a lot of challenges while selecting the right Game engine to get the work done.
    • Lots reading documentation was done.
  • Every thing had to happen in REALTIME
    • We had to learn about WebSockets and implement complex server side logic using the same.
  • Lastly, choosing a good name was a pain in the B.

πŸ”¨ Technologies Used :

  • Socket IO
  • PIXI JS
  • Agora
  • Node JS
  • React
  • NextJS
  • HTML/CSS/JavaScript
  • SCSS
  • Figma

πŸ”— Links

πŸŽ₯ Video Demo

πŸ“· Pictures

Test Image 1 Test Image 2 Test Image 3

About

Get rid of boring discord servers! Experience virtual events in a whole new way!


Languages

Language:CSS 53.1%Language:JavaScript 45.8%Language:HTML 0.7%Language:SCSS 0.4%