QlickIt

A Complete Social Media App to share you selfies, and hackathon experiences with others globally.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Key Features
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Demo-Screenshots

About The Project

Hackathons. Pandemic. Lockdown. Somehow don’t relate,right? Except for virtual ones? Now,another challenge. Who to work with? Only options, being a beginner – use team building channels in Discord,Slack,etc. So far so good,only possibility being entirely unaware of the people who’re posting..how they But….WAIT!! What if, there’s a platform, essentially for hackathons?

Here's why:

• Your time should be focused on creating something amazing. A project that solves a problem and helps others
• You shouldn't be doing the same tasks over and over like teaming up with like minded people,hunting for the perfect team,etc.
• You should be able to team up with fellow hackers,without going through the hassles of requesting a teamup,talking about your tech stack,etc. 😄

Hence,this social media platform. Just go through posts and works done by hackers earlier,and team up with the ones you like!

Key Features

• Share Posts(Images, text, videos, JPG) features with comments on posts features.
• In built comments based Chat feature.
• Prefernece based Home and Explore page preview.
• Built-in user profile dashboard showing key posts and comments.

Built With

This section lists the major frameworks that we built our project using.

• React js
• Google Cloud Platform
• GCP-Firestore
• Firebase
• HTML
• CSS
• JavaScript
• JSON
• Canva Pro
• Figma

What it does

• We display our work during hackathons,post our selfies with the hacks we’re building.
• The next time there is an event,some other newbie can go through it,interact with us and team up.
• An experienced hacker can refer it,see if there’s anyone working in their area of interest and socialise with them. That's how simple it is!!

How we built it?

• Design prototype - Canva pro, figma
• The app - ReactJs, HTML, CSS, JS, Nodejs, JSON.
• Backend(Authentication, Database) - Firebase Authentication, Google Cloud Firestore.
• Storage- Google Cloud Platform(Storage).

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

As a prequisites to run the app on local system you must have react Js installed along with firebase account.

• npm

  npm install -g react-js

1. Get a free API Key at https://example.com

2. Clone the repo

   git clone https://github.com/your_username_/Project-Name.git

3. Install NPM packages

   cd ./project_dir
   npm install
   npm start
   npm run build

4. To update the firebase Settings to your project update

   import firebase from "firebase";
   
   const firebaseApp = firebase.initializeApp({
     apiKey: "AIzaSyDsSqWhn_DRX64CjQYzmloqI17ygm_gRmU",
       authDomain: "click-it-f99d2.firebaseapp.com",
       projectId: "click-it-f99d2",
       storageBucket: "click-it-f99d2.appspot.com",
       messagingSenderId: "565865071673",
       appId: "1:565865071673:web:af324bf2cf8baedd2a39e8",
       measurementId: "G-2JHN4G47PZ"
   });
   
   const db = firebaseApp.firestore();
   const auth = firebase.auth();
   const storage = firebase.storage();
   
   export { db, auth, storage };

ScreenShots

You can directly view the Application from here.
Few Screenshots of the demo prototype are below:

Contributors

1. Indrashis Mitra
2. Ankita Sahu
3. Sourav Bera

Finally We Won Google Cloud Sponsorship Prizes: