ConfCube - Virtual Tech Event's Social Network ๐Ÿ”ฅ

Hi ๐Ÿ‘‹, I'm Yogesh Yadav. I'm a self-taught full-stack developer. Before this project, I was only following tutorials on the web and never made an end-to-end real-world project on my own. I decided to choose #vercelhashnode as a great opportunity to come out of my comfort zone and build something useful for the tech community.

TL;DR

ConfCube is networking app for tech events/ conferences/ webinar/ seminar/ meetup/ summit.
Here is the site link ๐Ÿ‘‰ ConCube Live.
Here is the repository ๐Ÿ‘‰ GitHub Repo.

๐Ÿ’ก Inspiration

When I started my programming journey last year, everybody advised me to attend tech events for exposure and meeting new people.

Let's be honest โ€“ conferences can be intimidating for introverts when you have to talk to a stranger and you don't know anything upfront about that person.

Another issue I faced is I wanted to find a UI/UX developer for collaboration, but unfortunately in the crowd of 1000s of people, you can only network with few people.

After covid, most of the tech events are happening virtually and there is no room for networking with each other like we used to do before.

I always thought there should be some platform where I can see the interests and skill set of attendees, so it's easy to interact with each other without being awkward. But Sadly, there is no platform available and therefore I decided to build one.

๐ŸŽฅ Video Demo

๐ŸŽจ Design process

Here's my design process I took for ConfCube.

First, I start with Excalidraw for brainstorming and to quickly generate low-fidelity mockups.

exacli.JPG

Then, I transition to high-fidelity design with Figma.

I'm not a great designer, but I have an eye for great design and always aim for simplicity and minimalistic.

Other than that mobile-first approach also helps me to make a fully responsive design from the very start.

๐Ÿ—๏ธ Development

As I'm building a hybrid web app that consists of static pages (i.e landing page) and dynamic pages (i.e profile page), I have three options to choose from

  • Create-react-app
  • Gatsby
  • Nextjs

I was already familiar with Gatsby and create-react-app and didn't want to learn a new framework from scratch, so I left with these two. Choosing between these two is an easy task.๐Ÿ˜‰

GatsbyCreate-react-app
Webpack supportโœ…โœ…
Hot reloadingโœ…โœ…
Client-side routeโœ…โœ…
Static renderingโœ…โŒ
Code splittingโœ…โŒ
Seo friendlyโœ…โŒ
Plugin supportโœ…โŒ

The next challenge was choosing the right backend. First, I played with Hasura but then decided to make this whole app serverless, so chose firebase.

My Complete Tech Stack

TechUse case
ChakraUIClean and minimal UI
Gatsbyfast static page on front-end
Firebase authsign in with Google or GitHub
Firestoredocument-based real-time database
Vercelfor hosting
ContentfulCMS for conference page

For a list of upcoming tech conferences, I extract data from an open-source project. Shout out to tech-conferences repo for maintaining a beautiful list.

ScreenShot of Static page

  • Homepage

screely-1612724570542.png

  • Conference list page

screely-1612724603574.png

ScreenShot of Dynamic Page/ Client Side Page

  • Profile page

screely-1612724630540.png

  • Conference detail page screely-1612724656935.png

๐Ÿšง Challenges

ChallengeSolution
Server-side build errorby ignoring firebase module during build time

This particular bug took me two days to solve. Since it was my first time building a dynamic app with gatsby and I never encounter this during the static build. Below code is I used inside gatsby-node.js to solve this problem.

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /firebase/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}
ChallengeSolution
404 on Refresh pageby checking if window defined

It is frustrating when everything works great in localhost but fails in production. I found many times errors are solved by just checking if the window is defined or not. It's like a magic pill to avoid all your SSR errors in gatsby. Below is the code in case if you stuck someday.

const browser = typeof window !== 'undefined' && window;
browser && (errorcode)

๐Ÿ”ฎ Future Scope

There will be always room for improvement. I have some plans to implement and make it more useful to the developer community. You can expect the following features in the upcoming days.

  • User can change profile photo
  • On platform chat option
  • dark/light theme option
  • write SEO for each page
  • Integration test for robustness
  • Documentation guide

๐Ÿค Contributing

The project is fully open-source so you could add an issue, a pull request on Github. Create a new pull request if you want to list your event on the conference page.

Wrapping up

First of all thanks to hashnode for conducting Vercel Hashnode Hackathon. This hackathon forced me to do stuff that I thought out of my league once upon a time like reading the documentation. Overall it's a huge learning experience for me.

I feel programming gives you the superpower to manifest anything into reality. This is my first blog and the first hackathon so please give your review on how can I improve in the future. Looking forward to your words.


Feel free to ask in the comments or mentions me on my Twitter.

I would like to see your profile inside ConfCube! โค๏ธ

โšก Happy learning!

Gaurav Yadav's photo

I love it. It's fast and the output is cool. I love the UI, well organised . Good workโค๏ธ

What a great idea, and good execution.

Catalin Pit's photo

The app is really cool and useful! Great job! ๐Ÿ‘

One questions though, is it ok to use those people's details (name and picture) without their consent?

Yogesh Yadav's photo

Thanks!

These are the people I really admire in tech community. I never thought it can be a problem. I just want to use their profiles for demo purposes. I will remove video if someone have an issue.

Pankaj C.'s photo

I had built something similar for another hackathon (nowhere as good as this one though). Excellent UI ๐Ÿ‘

Yogesh Yadav's photo

Thank you Pankaj. ๐Ÿค— Glad you liked it.