technifyedWeekly list

freeCodeCamp

Create a Twitter Clone with Vue.js, Quasar Framework & Firebase for iOS, Android, Mac & Windows

via YouTube Free video

Overview

Learn how to create a beautiful, responsive, cross-platform Twitter app from SCRATCH and get it running and working on 5 different platforms:

👉 iOS 👉 Android 👉 Mac 👉 Windows 👉 Web Browser (SPA)

YES - we'll be creating apps that can be deployed to all the different App Stores AND to the Web as well!

All from a SINGLE Vue.js codebase - using Quasar Framework & Firebase!

✏️ Created by Danny Connell. Check out his YouTube Channel: https://www.youtube.com/c/MakeAppswithDanny

💻 Finished Source Code: https://github.com/dannyconnell/qwitter

❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba)

⭐️ Course Contents ⭐️

⌨️ (00:00​) Introduction

⌨️ (01:08​) What We’re Gonna Create

⌨️ (02:56​) What is Quasar Framework?

⌨️ (04:57​) Create a Quasar Project

⌨️ (07:43​) Quasar Folder Structure

⌨️ (10:47​) Create Layout with Layout Builder

⌨️ (12:55​) Header

⌨️ (15:51​) Left Drawer (Navigation)

⌨️ (26:05​) Right Drawer (Search Bar & News Feed)

⌨️ (31:08​) Mobile Header

⌨️ (35:45​) Pages & Routes

⌨️ (40:40​) About Page

⌨️ (42:23​) New Tweet Form

⌨️ (58:31​) Tweets List - Design

⌨️ (1:06:24​) Tweets List - Data

⌨️ (1:10:43​) Add a Tweet

⌨️ (1:12:55​) Delete a Tweet

⌨️ (1:16:34​) Animation

⌨️ (1:22:40​) Final Design Touches

⌨️ (1:28:19​) Firebase - Setup Cloud Firestore

⌨️ (1:38:21​) Firebase - Get & Display Tweets

⌨️ (1:45:59​) Firebase - Add New Tweet

⌨️ (1:48:59​) Firebase - Delete Tweet

⌨️ (1:56:07​) Firebase - Update Tweet (Like)

⌨️ (2:06:00​) Fix Final Issues

⌨️ (2:10:27​) Deploy to Mac (Electron)

⌨️ (2:14:34​) Deploy to Windows (Electron)

⌨️ (2:19:04​) Deploy to iOS (Cordova)

⌨️ (2:25:28​) Deploy to Android (Cordova)

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

Advantages and disadvantages

Advantages

  • Completely free, with no ads inside the lessons.
  • Project-based: you build real apps as you learn.
  • freeCodeCamp's own certifications are free and well known among developers.
  • Free, one long video that covers a topic end to end.
  • Use the chapters to jump to what you need.
  • 135,057 views, so help and notes are easy to find.
  • Completely free.
  • Self-paced: start any time.

Disadvantages

  • YouTube videos are long single recordings; you pace yourself.
  • Less theory than a university course.
  • No exercises or certificate: code along to make it stick.
  • No certificate.
  • No graded assignments or feedback.

Some points apply to every course of this kind; see how we rank.

Free

  • Free: Watch on YouTube, no account needed.
  • Certificate: None. Code or take notes along to make it stick.

freeCodeCamp is in Tier 3: good universities, respected companies, nonprofits and well-known teachers of our institution ranking (78/100). Free full courses and certifications; practical, but not university-level depth.

Similar courses

Compare these

Stanford University

Stanford CS193p: iOS Development with SwiftUI

Stanford's CS193p course, Developing Applications for iOS, explains the fundamentals of how to build applications for iPhone and iPad using SwiftUI.

  • Free video
  • 16 videos, 19 hours

Harvard University

CS50 2019 - Android Track

*** This is CS50, Harvard University's introduction to the intellectual enterprises of computer science and the art of programming. *** HOW TO SUBSCRIBE http://www.youtube.com/subscription_center?add_user=cs50tv HOW TO TAKE CS50 edX: https://cs50.edx.org/ Harvard Extension School: https://cs50.harv…

  • Free video
  • 7 videos, 3.5 hours

Harvard University

CS50 2019 - iOS Track

*** This is CS50, Harvard University's introduction to the intellectual enterprises of computer science and the art of programming. *** HOW TO SUBSCRIBE http://www.youtube.com/subscription_center?add_user=cs50tv HOW TO TAKE CS50 edX: https://cs50.edx.org/ Harvard Extension School: https://cs50.harv…

  • Free video
  • 7 videos, 3.5 hours

Harvard University

Applications of TinyML

4.129 ratings

Get the opportunity to see TinyML in practice. You will see examples of TinyML applications, and learn first-hand how to train these models for tiny applications such as keyword spotting, visual wake words, and gesture recognition.

  • Free to audit
  • 6 weeks, 2 - 4 hours per week

freeCodeCamp

Flutter Course - Full Tutorial for Beginners (Build iOS and Android Apps)

Learn Flutter, Google’s groundbreaking multi-platform mobile development framework to create apps for Android and iOS. In this course, Nick Manning from fluttercrashcourse.com teaches you how to get up and running with Flutter quickly and effectively. Nick has been a Flutter engineer since 2017 and…

  • Free video
  • 2 hours

freeCodeCamp

Android Development Course - Build Native Apps with Kotlin Tutorial

Learn to build native Android apps with Kotlin. You will also learn how to use Android Jetpack, Firebase, Room, MVVM, Navigation, LiveData, and Kotlin Coroutines. This full course explains how to build an entire Android app using best practices. 💻 Code: https://github.com/BracketCove/SpaceNotes 🎥 C…

  • Free video
  • 3.5 hours