• Stars
    star
    109
  • Rank 319,077 (Top 7 %)
  • Language
    TypeScript
  • License
    Apache License 2.0
  • Created almost 3 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Social network for developers.

Logo

Flare - Social Network for Developers

The social networking developers have been longing for.

View Demo ยท Report Bug ยท Request Feature


Flare - Social Network for Developers

Flare is my take on a social network for developers. It's built entirely around the needs and interests of software developers. Flare is my entry for the Netlify x Hashnode Hackathon ๐Ÿ”ฅ

TL;DR: Flare is a new kind of social networking site made especially for software developers. Twitter is a really great place where developers hang out and share insightful tweets. But there is something that is lacking there.

Features โœจ

Here are some features that I planned for Flare. The ones implemented right now are marked. The fundamental idea is to support writing small posts within Flare. So the concept of blocks came. Blocks are used to create a flare, you can have text, code, images, etc in a single flare. Each of these smaller items that make up a flare is called a block.

  • Share Code snippets โœ…
  • Share terminal scripts โœ…
  • Share Images โœ…
  • Comments โœ…
  • Bookmarks โœ…
  • Show Spotify last played songs โœ…
  • Header Image promotions โœ…
  • Kudos โœ…
  • Connect Hashnode blog โœ…

Profile Page

Mobile View

Running Locally ๐Ÿ’ป

1. Clone the repo

git clone https://github.com/adisreyaj/flare.git

2. Initialize the submodule (UI components)

I created a small UI component library called Zigzag that is used in the project as a submodule.

git submodule update --init

3. Install the dependencies

npm install

4. Setup the environment variables

Set up all the required environment variables required for the back-end:

NODE_ENV=development
DATABASE_URL=mysql://root:root@localhost:3307/flare
FRONT_END_CALLBACK_URL=http://localhost:4200/auth/callback

# JWT sign secret
JWT_SECRET=veryverysecretkey
JWT_EXPIRY="3d"
COOKIE_SECRET=veryverysecretsessionkey

# Google OAuth Details
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_CALLBACK_URI=http://localhost:3333/api/auth/google/callback

# Github OAuth Details
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_CALLBACK_URI=http://localhost:3333/api/auth/github/callback

# Queue
REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_PASSWORD=

# Object Storage
S3_ENDPOINT=
S3_REGION=
S3_BUCKET=
S3_ACCESS_KEY_ID=
S3_SECRET_ACCESS_KEY=

5. Prepare the Database

Use docker-compose to spin up MySQL and Redis databases.

version: '3.1'
services:
  db:
    image: mariadb
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: flare
    ports:
      - '3307:3306'
    volumes:
      - /Users/<username>/Desktop/code/db:/var/lib/mysql
  cache:
    image: redis
    restart: always
    ports:
      - '6379:6379'
    volumes:
      - /Users/<username>/Desktop/code/cache:/var/lib/redis

6. Set up the Database

Run the command to populate the DB with tables:

npm run prisma:migrate

7. Generate the GraphQL interfaces from the schema

Run the command to generate the required types:

npm run generate:gql

8. Start up the UI and Back-end

For UI:

npm start

For Back-end

npm start api

UI: http://localhost:4200 & GQL: http://localhost:3333

You are all set for exploring Flare locally.

Links and References ๐Ÿ”—

Title Link Description
Angular https://angular.io/ Front-end framework
NestJs https://docs.nestjs.com/ Back-end framework based on NodeJs
Netlify https://www.netlify.com/ Deployment for UI
Prisma https://www.prisma.io/ Node.js and TypeScript ORM
Tailwind CSS https://tailwindcss.com/ Utility first CSS framework
Nx https://nx.dev/#getting-started Build system with monorepo support
PM2 https://app.pm2.io/ Advanced, production process manager for Node.JS
Upstash https://upstash.com/ Serverless Redis DB
Backblaze https://www.backblaze.com/ Cloud Storage

Roadmap

See the open issues for a list of proposed features (and known issues).

License

Distributed under the Apache 2.0 License. See LICENSE for more information.

Show your support

Please โญ๏ธ this repository if this project helped you!

More Repositories

1

compito

Compito is a simple and easy to use project management application with support for Multiple orgs.
TypeScript
200
star
2

cartella-web

Cartella - The all in one bookmarking tool!
TypeScript
27
star
3

portfolio

My personal website and portfolio. Made with NextJs
JavaScript
21
star
4

angular-shimmer-effect

A shimmer effect package for Angular Applications
TypeScript
20
star
5

angular-directives-showcase

An example repo to showcase some use cases for directives in Angular
TypeScript
17
star
6

show-off

How often do you get asked about the gadgets or software that you use? If the answer is quite often, you should be trying show off out. Curate the list of gadgets and software and share it with your fans and followers.
TypeScript
17
star
7

ng-custom-form-elements

TypeScript
12
star
8

covid-tracker

A COVID tracker web application made using Angular
HTML
12
star
9

angular-remix-icon

Angular wrapper for Remixicon icon library
TypeScript
9
star
10

vscode-sonarqube-status

Get the result of the Sonar Qube analysis from your CICD pipeline right inside VSCode.
TypeScript
8
star
11

angular-form-array-demo

An interactive demo for Angular Form Array
TypeScript
6
star
12

wfh

E-commerce app built using Angular, NestJs and MongoDB
TypeScript
6
star
13

xpense

An Expense tracking application built using React Native and Expo
JavaScript
6
star
14

md-resume

TypeScript
6
star
15

webitto-frontend

Webitto - A bunch of tools to help you redefine the web.
TypeScript
5
star
16

vscode-unicorn-theme

Do you even Code Girl? This is a special theme for all those lovely girl coders out there. Stay awesome and code like a unicorn.
4
star
17

zigzag

TypeScript
4
star
18

sreyaj

TypeScript
4
star
19

angular-star-rating

Simple Angular Component for Showcasing Ratings
TypeScript
4
star
20

custom-form-controls

TypeScript
4
star
21

sonarqube-sdk

SonarQube Web APIs wrapped into an SDK. Early stage and WIP.
TypeScript
3
star
22

libshare

Curate and share your favourite NPM packages. List all the packages used in your project and make it easier for people to find about them. More visibility to OSS projects.
TypeScript
3
star
23

node-typescript-starter

Simple and straight forward template to get started with Typescript and Node with testing powered by Jest.
TypeScript
2
star
24

vscode-dark-the-shit-out

Love Dark? This is the theme for those dark lords who loves to code in the dark and are afraid of the light.
2
star
25

website

SCSS
2
star
26

100DaysofCode-React

My journey on 100 Days of code for learning React, and React Native
2
star
27

angular-feature-flags

Created with StackBlitz โšก๏ธ
TypeScript
2
star
28

ng-table-datasource

TypeScript
2
star
29

awesome-node

A collection of awesome packages for NodeJS
1
star
30

moovee

Curate your favorite movies!
JavaScript
1
star
31

layer0-angular-example

CSS
1
star
32

staysafe-frontend

StaySafe - Pandemic Awareness application
TypeScript
1
star
33

custom-form-control-validation

TypeScript
1
star
34

flipkartapi

Here is how to consume the Flipkart API in your PHP project.
PHP
1
star
35

sreyaj.dev

My personal website
HTML
1
star
36

libshare-hdb-functions

JavaScript
1
star
37

notifications-gateway

A Simple and Efficient gateway for sending all kinds of notifications ranging from Email, SMS and Push Notifications
TypeScript
1
star
38

react-native-examples

Small UI components for React Native
JavaScript
1
star
39

vscode-swagger-to-nodejs-server

Generate a NodeJS server based on Typescript from your API Swagger files.Get your server to a blazing start with this extension
TypeScript
1
star
40

staysafe-backend

Stay Safe Backed
TypeScript
1
star