• Stars
    star
    227
  • Rank 168,252 (Top 4 %)
  • Language
    Elixir
  • License
    GNU General Publi...
  • Created over 4 years ago
  • Updated 16 days ago

Reviews

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

Repository Details

๐Ÿ‘คMinimalist Google OAuth Authentication for Elixir Apps. Tested, Documented & Maintained. Setup in 5 mins. ๐Ÿš€

elixir-auth-google

The easiest way to add Google OAuth authentication to your Elixir Apps.

sign-in-with-google-buttons

GitHub Workflow Status codecov.io Hex.pm contributions welcome HitCount

Why? ๐Ÿคท

We needed a much simpler and extensively documented way to add "Sign-in with Google" capability to our Elixir App(s).

What? ๐Ÿ’ญ

An Elixir package that seamlessly handles Google OAuth2 Authentication/Authorization in as few steps as possible.
Following best practices for security & privacy and avoiding complexity by having sensible defaults for all settings.

We built a lightweight solution that only does one thing and is easy for complete beginners to understand/use.
There were already several available options for adding Google Auth to apps on hex.pm/packages?search=google
that all added far too many implementation steps (complexity) and had incomplete docs (@doc false) and tests.
e.g: github.com/googleapis/elixir-google-api which is a "generated" client and is considered "experimental".
We have drawn inspiration from several sources including code from other programming languages to build this package. This result is much simpler than anything else and has both step-by-step instructions and a complete working example App including how to encrypt tokens for secure storage to help you ship your app fast.

Who? ๐Ÿ‘ฅ

This module is for people building apps using Elixir/Phoenix who want to ship the "Sign-in with Google" feature faster and more maintainably.

It's targetted at complete beginners with no prior experience/knowledge of auth "schemes" or "strategies".
Just follow the detailed instructions and you'll be up-and running in 5 minutes.

How? โœ…

You can add Google Authentication to your Elixir App using elixir_auth_google
in under 5 minutes by following these 5 easy steps:

1. Add the hex package to deps ๐Ÿ“ฆ

Open your project's mix.exs file and locate the deps (dependencies) section.
Add a line for :elixir_auth_google in the deps list:

def deps do
  [
    {:elixir_auth_google, "~> 1.6.9"}
  ]
end

Once you have added the line to your mix.exs, remember to run the mix deps.get command in your terminal to download the dependencies.

2. Create Google APIs Application OAuth2 Credentials ๐Ÿ†•

Create a Google Application if you don't already have one, generate the OAuth2 Credentials for the application and save the credentials as environment variables accessible by your app, or put them in your config file.

Note: There are a few steps for creating a set of Google APIs credentials, so if you don't already have a Google App, we created the following step-by-step guide to make it quick and relatively painless: create-google-app-guide.md
Don't be intimidated by all the buzz-words; it's quite straightforward. And if you get stuck, ask for help!

3. Setup CLIENT_ID and CLIENT_SECRET in your project

You may either add those keys as environment variables or put them in the config:

export GOOGLE_CLIENT_ID=631770888008-6n0oruvsm16kbkqg6u76p5cv5kfkcekt.apps.googleusercontent.com
export GOOGLE_CLIENT_SECRET=MHxv6-RGF5nheXnxh1b0LNDq

Or add the following in the config file:

config :elixir_auth_google,
  client_id: "631770888008-6n0oruvsm16kbkqg6u76p5cv5kfkcekt.apps.googleusercontent.com",
  client_secret: "MHxv6-RGF5nheXnxh1b0LNDq"

โš ๏ธ Don't worry, these keys aren't valid. They are just here for illustration purposes.

4. Create a GoogleAuthController in your Project ๐Ÿ“

Create a new file called lib/app_web/controllers/google_auth_controller.ex and add the following code:

defmodule AppWeb.GoogleAuthController do
  use AppWeb, :controller

  @doc """
  `index/2` handles the callback from Google Auth API redirect.
  """
  def index(conn, %{"code" => code}) do
    {:ok, token} = ElixirAuthGoogle.get_token(code, MyAppWeb.Endpoint.url())
    {:ok, profile} = ElixirAuthGoogle.get_user_profile(token.access_token)
    conn
    |> put_view(AppWeb.PageView)
    |> render(:welcome, profile: profile)
  end
end

This code does 3 things:

  • Create a one-time auth token based on the response code sent by Google after the person authenticates.
  • Request the person's profile data from Google based on the access_token
  • Render a :welcome view displaying some profile data to confirm that login with Google was successful.

5. Create the /auth/google/callback Endpoint ๐Ÿ“

Open your router.ex file and locate the section that looks like scope "/", AppWeb do

Add the following line:

get "/auth/google/callback", GoogleAuthController, :index

Sample: lib/app_web/router.ex#L20

Different callback url?

You can specify the env var

export GOOGLE_CALLBACK_PATH=/myauth/google_callback

or add it in the configuration

Or add the following in the config file:

config :elixir_auth_google,
  # ...
  callback_path: "/myauth/google_callback"

6. Add the "Login with Google" Button to your Template โœจ

In order to display the "Sign-in with Google" button in the UI, we need to generate the URL for the button in the relevant controller, and pass it to the template.

Open the lib/app_web/controllers/page_controller.ex file and update the index function:

From:

def index(conn, _params) do
  render(conn, "index.html")
end

To:

def index(conn, _params) do
  oauth_google_url = ElixirAuthGoogle.generate_oauth_url(conn)
  render(conn, "index.html",[oauth_google_url: oauth_google_url])
end

You can add extra features the the generated url by passing the state as a string, or any other query as a map of key/value pairs.

oauth_google_url = ElixirAuthGoogle.generate_oauth_url(conn, state)

Will result in Google Sign In link with &state=state added. And something like:

oauth_google_url = ElixirAuthGoogle.generate_oauth_url(conn, %{lang: 'pt-BR'})

Will return a url with lang=pt-BR included in the sign in request.

Alternatively pass the url of your App into generate_oauth_url/1

We have noticed that on fly.io where the Phoenix App is proxied, passing the conn struct to ElixirAuthGoogle.generate_oauth_url/2 is not effective. See dwyl/elixir-auth-google/issues/94

So we added an alternative way of invoking generate_oauth_url/2 passing in the url of your App:

def index(conn, _params) do
  base_url = MyAppWeb.Endpoint.url()
  oauth_google_url = ElixirAuthGoogle.generate_oauth_url(base_url)
  render(conn, "index.html",[oauth_google_url: oauth_google_url])
end

This uses Phoenix.Endpoint.url/0 which is available in any Phoenix App.

Just remember to replace MyAppWeb with the name of your App. ๐Ÿ˜‰


6.1 Update the page/index.html.eex Template

Open the /lib/app_web/templates/page/index.html.eex file and type the following code:

<section class="phx-hero">
  <h1>Welcome to Awesome App!</h1>
  <p>To get started, login to your Google Account: <p>
  <a href={@oauth_google_url}>
    <img src="https://i.imgur.com/Kagbzkq.png" alt="Sign in with Google" />
  </a>
</section>

Done! ๐Ÿš€

The home page of the app now has a big "Sign in with Google" button:

sign-in-button

When the person clicks the button, and authenticates with their Google Account, they will be returned to your App where you can display a "login success" message:

welcome

Optional: Scopes

Most of the time you will only want/need the person's email address and profile data when authenticating with your App. In the cases where you need more specific access to a Google service, you will need to specify the exact scopes. See: https://developers.google.com/identity/protocols/oauth2/scopes

Once you know the scope(s) your App needs access to, simply define them using an environment variable, e.g:

GOOGLE_SCOPE="email contacts photoslibrary"

Those double-quotes (") encapsulating the environment variable String are important. Without them your system will only assign the first word to the GOOGLE_SCOPE. e.g: email and ignore the remaining scopes you need. or you can set them as a config variable if you prefer:

config :elixir_auth_google,
  :google_scope: "email contacts photoslibrary"

With that configured, your App will gain access to the requested services once the person authenticates/authorizes.



Optimised SVG+CSS Button

In step 6.1 above, we suggest using an <img> for the Sign in with GitHub button.

But even though this image appears small 389โ€Šร—โ€Š93 px https://i.imgur.com/Kagbzkq.png it is "only" 8kb:

google-button-8kb

We could spend some time in a graphics editor optimising the image, but we know we can do better by using our CSS skills! ๐Ÿ’ก

Note: This is the official button provided by Google: developers.google.com/identity/images/signin-assets.zip
So if there was any optimisation they could squeeze out of it, they probably would have done it before publishing the zip!

The following code re-creates the <img> using the GitHub logo SVG and CSS for layout/style:

<div style="display:flex; flex-direction:column; width:368px; margin-left:133px;">
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap">

  <a href="<%= @oauth_google_url %>"
    style="display:inline-flex; align-items:center; min-height:50px;
      background-color:#4285F4; font-family:'Roboto',sans-serif;
      font-size:28px; color:white; text-decoration:none;
      margin-top: 12px">
      <div style="background-color: white; margin:2px; padding-top:18px; padding-bottom:6px; min-height:59px; width:72px">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 533.5 544.3"
        width="52px" height="35" style="display:inline-flex; align-items:center;" >
        <path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"/>
        <path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"/>
        <path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"/>
        <path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"/>
      </svg>
    </div>
    <div style="margin-left: 27px;">
      Sign in with Google
    </div>
  </a>
</div>

We created this from scratch using the SVG of the Google logo and some basic CSS.
For the "making of" journey see: #25

The result looks better than the <img> button:

img-vs-svg-8kb-1kb

It can be scaled to any screen size so it will always look great!
Using http://bytesizematters.com we see that our SVG+CSS button is only 1kb: bytesize-matters-google-button

That is an 87.5% bandwidth saving on the 8kb of the .png button. And what's more it reduces the number of HTTP requests which means the page loads even faster.

This is used in the Demo app: lib/app_web/templates/page/index.html.eex

i18n

The biggest advantage of having an SVG+CSS button is that you can translate the button text!
Since the text/copy of the button is now just text in standard HTML, the user's web browser can automatically translate it!
e.g: French ๐Ÿ‡ฌ๐Ÿ‡ง > ๐Ÿ‡ซ๐Ÿ‡ท

google-login-french-translation

This is much better UX for the 80% of people in the world who do not speak English fluently. The single biggest engine for growth in startup companies is translating their user interface into more languages. Obviously don't focus on translations while you're building your MVP, but if it's no extra work to use this SVG+CSS button and it means the person's web browser can automatically localise your App!

Accessibility

The SVG+CSS button is more accessible than the image. Even thought the <img> had an alt attribute which is a lot better than nothing, the SVG+CSS button can be re-interpreted by a non-screen device and more easily transformed.



Even More Detail ๐Ÿ’ก

If you want to dive a bit deeper into understanding how this package works, You can read and grok the code in under 10 minutes: /lib/elixir_auth_google.ex

We created a basic demo Phoenix App, to show you exactly how you can implement the elixir_auth_google package: https://github.com/dwyl/elixir-auth-google-demo It's deployed to Heroku: https://elixir-auth-google-demo.herokuapp.com
(no data is saved so you can play with it - and try to break it!)

And if you want/need a more complete real-world example including creating sessions and saving profile data to a database, take a look at our MVP: https://github.com/dwyl/app-mvp-phoenix



Notes ๐Ÿ“

two-colors-of-google-auth-button

Fun Facts ๐Ÿ“ˆ๐Ÿ“Š

Unlike other "social media" companies, Google/Alphabet does not report it's Monthly Active Users (MAUs) or Daily Active Users (DAUs) however they do release stats in drips in their Google IO or YouTube events. The following is a quick list of facts that make adding Google Auth to your App a compelling business case:

  • As of May 2019, there are over 2.5 Billion active Android devices; 87% global market share. All these people have Google Accounts in order to use Google services.
  • YouTube has 2 billion monthly active YouTube users (signed in with a Google Account).
  • Gmail has 1.5 Billion monthly active users a 27% share of the global email client market.
  • 65% of Small and Medium sized businesses use Google Apps for business.
  • 90%+ of startups use Gmail. This is a good proxy for "early adopters".
  • 68% of schools in the US use Google Classroom and related G-suite products.
    So the next generation of internet/app users have Google accounts.
  • Google has 90.46% of the search engine market share worldwide. 95.4% on Mobile.

Of the 4.5 billion internet users (58% of the world population), around 3.2 billion (72%) have a Google account. 90%+ of tech "early adopters" use Google Apps which means that adding Google OAuth Sign-in is the logical choice for most Apps.

Privacy Concerns? ๐Ÿ”

A common misconception is that adding Google Auth Sign-in sends a user's application data to Google. This is false and App developers have 100% control over what data is sent to (stored by) Google. An App can use Google Auth to authenticate a person (identify them and get read-only access to their personal details like first name and email address) without sending any data to Google. Yes, it will mean that Google "knows" that the person is using your App, but it will not give Google any insight into how they are using it or what types of data they are storing in the App. Privacy is maintained. So if you use the @dwyl app to plan your wedding or next holiday, Google will not have any of that data and will not serve any annoying ads based on your project/plans.

More Repositories

1

english-words

๐Ÿ“ A text file containing 479k English words for all your dictionary/word-based projects e.g: auto-completion / autosuggestion
Python
9,337
star
2

learn-json-web-tokens

๐Ÿ” Learn how to use JSON Web Token (JWT) to secure your next Web App! (Tutorial/Example with Tests!!)
JavaScript
4,178
star
3

learn-to-send-email-via-google-script-html-no-server

๐Ÿ“ง An Example of using an HTML form (e.g: "Contact Us" on a website) to send Email without a Backend Server (using a Google Script) perfect for static websites that need to collect data.
HTML
3,047
star
4

repo-badges

โญ Use repo badges (build passing, coverage, etc) in your readme/markdown file to signal code quality in a project.
HTML
2,831
star
5

learn-tdd

โœ… A brief introduction to Test Driven Development (TDD) in JavaScript (Complete Beginner's Step-by-Step Tutorial)
JavaScript
2,698
star
6

start-here

๐Ÿ’ก A Quick-start Guide for People who want to dwyl โค๏ธ โœ…
1,725
star
7

learn-elixir

๐Ÿ’ง Learn the Elixir programming language to build functional, fast, scalable and maintainable web applications!
Elixir
1,579
star
8

learn-travis

๐Ÿ˜Ž A quick Travis CI (Continuous Integration) Tutorial for Node.js developers
JavaScript
1,251
star
9

Javascript-the-Good-Parts-notes

๐Ÿ“– Notes on the seminal "JavaScript the Good Parts: by Douglas Crockford
1,173
star
10

aws-sdk-mock

๐ŸŒˆ AWSomocks for Javascript/Node.js aws-sdk tested, documented & maintained. Contributions welcome!
JavaScript
1,074
star
11

learn-aws-lambda

โœจ Learn how to use AWS Lambda to easily create infinitely scalable web services
JavaScript
1,035
star
12

book

๐Ÿ“— Our Book on Full-Stack Web Application Development covering User Experience (UX) Design, Mobile/Offline/Security First, Progressive Enhancement, Continuous Integration/Deployment, Testing (UX/TDD/BDD), Performance-Driven-Development and much more!
Rust
816
star
13

hapi-auth-jwt2

๐Ÿ”’ Secure Hapi.js authentication plugin using JSON Web Tokens (JWT) in Headers, URL or Cookies
JavaScript
795
star
14

learn-hapi

โ˜€๏ธ Learn to use Hapi.js (Node.js) web framework to build scalable apps in less time
HTML
794
star
15

phoenix-chat-example

๐Ÿ’ฌ The Step-by-Step Beginners Tutorial for Building, Testing & Deploying a Chat app in Phoenix 1.7 [Latest] ๐Ÿš€
Elixir
721
star
16

learn-tachyons

๐Ÿ˜ Learn how to use Tachyons to craft beautiful, responsive and fast UI with functional CSS!
HTML
670
star
17

learn-phoenix-framework

๐Ÿ”ฅ Phoenix is the web framework without compromise on speed, reliability or maintainability! Don't settle for less. ๐Ÿš€
Elixir
632
star
18

learn-nightwatch

๐ŸŒœ Learn how to use Nightwatch.js to easily & automatically test your web apps in *real* web browsers.
JavaScript
585
star
19

javascript-todo-list-tutorial

โœ… A step-by-step complete beginner example/tutorial for building a Todo List App (TodoMVC) from scratch in JavaScript following Test Driven Development (TDD) best practice. ๐ŸŒฑ
JavaScript
532
star
20

learn-elm

๐ŸŒˆ discover the beautiful programming language that makes front-end web apps a joy to build and maintain!
HTML
472
star
21

learn-redux

๐Ÿ’ฅ Comprehensive Notes for Learning (how to use) Redux to manage state in your Web/Mobile (React.js) Apps.
HTML
446
star
22

learn-devops

๐Ÿšง Learn the craft of "DevOps" (Developer Operations) to Deploy your App and Monitor it so it stays "Up"!
Shell
411
star
23

hits

๐Ÿ“ˆ General purpose hits (page views) counter
Elixir
397
star
24

hapi-socketio-redis-chat-example

๐Ÿ’ฌ Real-time Chat using Hapi.js + Socket.io + Redis Pub/Sub (example with tests!!)
Elm
363
star
25

hapi-typescript-example

โšก Hapi.Js + Typescript = Awesomeness
TypeScript
351
star
26

learn-istanbul

๐Ÿ Learn how to use the Istanbul JavaScript Code Coverage Tool
JavaScript
339
star
27

phoenix-liveview-counter-tutorial

๐Ÿคฏ beginners tutorial building a real time counter in Phoenix 1.7.7 + LiveView 0.19 โšก๏ธ Learn the fundamentals from first principals so you can make something amazing! ๐Ÿš€
Elixir
339
star
28

learn-redis

๐Ÿ“• Need to store/access your data as fast as possible? Learn Redis! Beginners Tutorial using Node.js ๐Ÿš€
JavaScript
291
star
29

technology-stack

๐Ÿš€ Detailed description + diagram of the Open Source Technology Stack we use for dwyl projects.
JavaScript
281
star
30

phoenix-ecto-encryption-example

๐Ÿ” A detailed example for how to encrypt data in an Elixir (Phoenix v1.7) App before inserting into a database using Ecto Types
Elixir
267
star
31

learn-elasticsearch

๐Ÿ” Learn how to use ElasticSearch to power a great search experience for your project/product/website.
Elixir
265
star
32

home

๐Ÿก ๐Ÿ‘ฉโ€๐Ÿ’ป ๐Ÿ’ก home is where you can [learn to] build the future surrounded by like-minded creative, friendly and [intrinsically] motivated people focussed on health, fitness and making things people and the world need!
244
star
33

learn-docker

๐Ÿšข Learn how to use docker.io containers to consistently deploy your apps on any infrastructure.
Dockerfile
220
star
34

learn-elm-architecture-in-javascript

๐Ÿฆ„ Learn how to build web apps using the Elm Architecture in "vanilla" JavaScript (step-by-step TDD tutorial)!
JavaScript
206
star
35

learn-environment-variables

๐Ÿ“Learn how to use Environment Variables to keep your passwords and API keys secret. ๐Ÿ”
JavaScript
201
star
36

learn-postgresql

๐Ÿ˜ Learn how to use PostgreSQL and Structured Query Language (SQL) to store and query your relational data. ๐Ÿ”
JavaScript
195
star
37

learn-tape

โœ… Learn how to use Tape for JavaScript/Node.js Test Driven Development (TDD) - Ten-Minute Testing Tutorial
JavaScript
185
star
38

sendemail

๐Ÿ’Œ Simplifies reliably sending emails from your node.js apps using AWS Simple Email Service (SES)
JavaScript
181
star
39

phoenix-todo-list-tutorial

โœ… Complete beginners tutorial building a todo list from scratch in Phoenix 1.7 (latest)
Elixir
171
star
40

decache

:shipit: Delete Cached node_modules useful when you need to "un-require" during testing for a fresh state.
JavaScript
151
star
41

learn-heroku

๐Ÿ Learn how to deploy your web application to Heroku from scratch step-by-step in 7 minutes!
Python
149
star
42

quotes

๐Ÿ’ฌ a curated list of quotes that inspire action + code that returns quotes by tag/author/etc. ๐Ÿ’ก
Elixir
148
star
43

learn-chrome-extensions

๐ŸŒ Discover how to build and deploy a Google Chrome Extension for your Project!
139
star
44

labels

๐Ÿท Sync GitHub Labels from any Source to Target Repositories for Consistency across all your projects!
Elixir
136
star
45

ISO-27001-2013-information-technology-security

๐Ÿ” Probably the most boring-but-necessary repo on GitHub. If you care about the security/privacy of your data...! โœ…
136
star
46

learn-ab-and-multivariate-testing

๐Ÿ†Ž Tutorial on A/B and multivariate testing โœ”๏ธ
135
star
47

web-form-to-google-sheet

A simple example of sending data from an ordinary web form straight to a Google Spreadsheet without a server.
HTML
133
star
48

app

Clear your mind. Organise your life. Ignore distractions. Focus on what matters.
Dart
133
star
49

auth

๐Ÿšช ๐Ÿ” UX-focussed Turnkey Authentication Solution for Web Apps/APIs (Documented, Tested & Maintained)
Elixir
124
star
50

learn-circleci

โœ… A quick intro to Circle CI (Continuous Integration) for JavaScript developers.
121
star
51

learn-regex

โ‰๏ธ A simple REGular EXpression tutorial in JavaScript
120
star
52

learn-react

"The possibilities are numerous once we decide to act and not react." ~ George Bernard Shaw
HTML
108
star
53

learn-aws-iot

๐Ÿ’ก Learn how to use Amazon Web Services Internet of Things (IoT) service to build connected applications.
JavaScript
101
star
54

env2

๐Ÿ’ป Simple environment variable (from config file) loader for your node.js app
JavaScript
100
star
55

phoenix-liveview-chat-example

๐Ÿ’ฌ Step-by-step tutorial creates a Chat App using Phoenix LiveView including Presence, Authentication and Style with Tailwind CSS
Elixir
98
star
56

how-to-choose-a-database

How to choose the right dabase
93
star
57

imgup

๐ŸŒ… Effortless image uploads to AWS S3 with automatic resizing including REST API.
Elixir
88
star
58

contributing

๐Ÿ“‹ Guidelines & Workflow for people contributing to our project(s) on GitHub. Please โญ to confirm you've read & understood! โœ…
85
star
59

javascript-best-practice

A collection of JavaScript Best Practices
83
star
60

learn-amazon-web-services

โญ Amazing Guide to using Amazon Web Services (AWS)! โ˜๏ธ
83
star
61

range-touch

๐Ÿ“ฑ Use HTML5 range input on touch devices (iPhone, iPad & Android) without bloatware!
JavaScript
83
star
62

learn-pre-commit

โœ… Pre-commit hooks let you run checks before allowing a commit (e.g. JSLint or check Test Coverage).
JavaScript
80
star
63

product-owner-guide

๐Ÿš€ A rough guide for people working with dwyl as Product Owners
78
star
64

phoenix-ecto-append-only-log-example

๐Ÿ“ A step-by-step example/tutorial showing how to build a Phoenix (Elixir) App where all data is immutable (append only). Precursor to Blockchain, IPFS or Solid!
Elixir
78
star
65

goodparts

๐Ÿ™ˆ An ESLint Style that only allows JavaScript the Good Parts (and "Better Parts") in your code.
JavaScript
77
star
66

mvp

๐Ÿ“ฒ simplest version of the @dwyl app
Elixir
77
star
67

hapi-error

โ˜” Intercept errors in your Hapi Web App/API and send a *useful* message to the client OR redirect to the desired endpoint.
JavaScript
76
star
68

flutter-todo-list-tutorial

โœ… A detailed example/tutorial building a cross-platform Todo List App using Flutter ๐Ÿฆ‹
Dart
75
star
69

process-handbook

๐Ÿ“— Contains our processes, questions and journey to creating a team
HTML
75
star
70

dev-setup

โœˆ๏ธ A quick-start guide for new engineers on how to set up their Dev environment
73
star
71

aws-lambda-deploy

โ˜๏ธ ๐Ÿš€ Effortlessly deploy Amazon Web Services Lambda function(s) with a single command. Less to configure. Latest AWS SDK and Node.js v20!
JavaScript
72
star
72

terminate

โ™ป๏ธ Terminate a Node.js Process (and all Child Processes) based on the Process ID
JavaScript
71
star
73

fields

๐ŸŒป fields is a collection of useful field definitions (Custom Ecto Types) that helps you easily define an Ecto Schema with validation, encryption and hashing functions so that you can ship your Elixir/Phoenix App much faster!
Elixir
69
star
74

hapi-login-example-postgres

๐Ÿฐ A simple registration + login form example using hapi-register, hapi-login & hapi-auth-jwt2 with a PostgreSQL DB
JavaScript
69
star
75

learn-flutter

๐Ÿฆ‹ Learn how to use Flutter to Build Cross-platform Native Mobile Apps
JavaScript
66
star
76

learn-security

๐Ÿ” For most technology projects Security is an "after thought", it does not have to be that way; let's be proactive!
64
star
77

learn-javascript

A Series of Simple Steps in JavaScript :-)
HTML
63
star
78

chat

๐Ÿ’ฌ Probably the fastest, most reliable/scalable chat system on the internet.
Elixir
62
star
79

phoenix-liveview-todo-list-tutorial

โœ… Beginners tutorial building a Realtime Todo List in Phoenix 1.6.10 + LiveView 0.17.10 โšก๏ธ Feedback very welcome!
Elixir
61
star
80

learn-jsdoc

๐Ÿ“˜ Use JSDoc and a few carefully crafted comments to document your JavaScript code!
CSS
60
star
81

ampl

๐Ÿ“ฑ โšก Ampl transforms Markdown into AMP-compliant html so it loads super-fast!
JavaScript
57
star
82

aguid

โ„๏ธ A Globally Unique IDentifier (GUID) generator in JS. (deterministic or random - you chose!)
JavaScript
56
star
83

tudo

โœ… Want to see where you could help on an open dwyl issue?
Elixir
56
star
84

learn-apple-watch-development

๐Ÿ“— Learn how to build Native Apple Watch (+iPhone) apps from scratch!
Swift
54
star
85

learn-ngrok

โ˜๏ธ Learn how to use ngrok to share access to a Web App/Site running on your "localhost" with the world!
HTML
51
star
86

learn-qunit

โœ… A quick introduction to JavaScript unit testing with QUnit
JavaScript
51
star
87

hapi-auth-jwt2-example

๐Ÿ”’ A functional example Hapi.js app using hapi-auth-jwt2 & Redis (hosted on Heroku) with tests!
JavaScript
49
star
88

learn-jshint

๐Ÿ’ฉ Learn how to use the ~~jshint~~ code quality/consistency tool.
JavaScript
49
star
89

tachyons-bootstrap

๐Ÿ‘ขBootstrap recreated using tachyons functional css
HTML
49
star
90

esta

๐Ÿ” Simple + Fast ElasticSearch Node.js client. Beginner-friendly defaults & Heroku support โœ… ๐Ÿš€
JavaScript
48
star
91

learn-node-js-by-example

โ˜๏ธ Practical node.js examples.
HTML
47
star
92

redis-connection

โšก Single Redis Connection that can be used anywhere in your node.js app and closed once (e.g in tests)
JavaScript
45
star
93

aws-lambda-test-utils

Mock event and context objects without fluff.
JavaScript
45
star
94

product-roadmap

๐ŸŒ Because why wouldn't you make your company's product roadmap Public on GitHub?
45
star
95

learn-graphQL

โ“Learn to use GraphQL - A query language that allows client applications to specify their data fetching requirements
JavaScript
44
star
96

elixir-pre-commit

โœ… Pre-commit hooks for Elixir projects
Elixir
43
star
97

hapi-login

๐Ÿšช The Simplest Possible (Email + Password) Login for Hapi.js Apps โœ…
JavaScript
43
star
98

learn-riot

๐ŸŽ Riot.js lets you build apps that are simpler and load/run faster than any other JS framework/library.
HTML
43
star
99

github-reference

โญ GitHub reference for *non-technical* people following a project's progress
42
star
100

learn-codeclimate

๐ŸŒˆ Learn how to use CodeClimate to track the quality of your JavaScript/Node.js code.
41
star