Build a Real-World App with Nuxt and Firebase
- 3.9
-
![]()
![]()
![]()
![]()
Brief Introduction
Create a complete, full-stack news aggregator from front to back with Nuxt 2, Firestore and Vue MaterialDescription
RECENTLY UPDATED FOR LATEST VERSION OF NUXT
Interested in building impressive, practical full-stack single page + server-rendered apps with Nuxt and Firestore? This is the course for you!
Here's what we will cover:
Creating a complete news feed / aggregator with Nuxt 2, Firestore and Vue Material from the first line of code to deployment on the web
Full CRUD functionality (create, read, update, delete) with the new real-time NoSQL Firestore Database
Comprehensive work with News API in order to dynamically fetch top headlines around the world (by news category, by country, by news source, etc.)
Adding search functionality to query all headlines according to search terms, by date and various criteria
Creating the ability for users to bookmark headlines to add to their personal feed
Turning live news headlines into separate pages within our app upon which users can comment
Extensive coverage of making HTTP requests with axios (Nuxt module, proxies, setting headers)
Built-in Nuxt data-fetching with the methods asyncData and fetch
Working with Nuxt plugins to incorporate third-party libraries with our Nuxt application
Implementing liking / upvoting user comments on news articles
Authentication with JSON Web Tokens and session management with both Cookies and LocalStorage
User authentication with the Firebase Auth REST API
Form validation with Vuelidate for our Login and Register forms
State management with Vuex, with the help of simple, straightforward patterns
Creating attractive, responsive, feature-rich Uis with the Material Design library Vue Material
Essential features of Vue Router (in relation to Nuxt)
Building Nuxt middleware functions to work as authentication checks and navigation guards
Use Vue filters to format date / time values with the popular package date-fns
Tons of work with ES6 / 7, especially async / await functions
Helpful browser tools such as Vue / Nuxt Dev Tools
Bootstrapping new Nuxt 2 projects with the create-nuxt-app CLI
Seamless App Deployment with Heroku
And more!
What will be building in this course?
We'll be building a real-time news feed called NuxtNews, where users will be able to see live news headlines as they are published from around the world, search through them with search terms, by date and search criteria, where users can select headlines by their country, by news category, by news source, and take a look at these headlines as individual pages within our app. And when users are authenticated (using JSON Web Tokens and the Firebase Auth REST API), they will be to bookmark the headlines they want to save and put within their own personalized news feed, comment on articles of their choosing and like / upvote comments by other users on those individual headline pages.
It's truly a fully-featured application where you'll learn tons of Nuxt / Vue concepts along the way, so let's dive in!
Requirements
- Requirements
- Some experience with ES6 JavaScript (preferred, but not required)
- Familiarity with basic Vue concepts (i.e. v-for, v-model, v-bind, v-on)
Reed Barger
3.9 Raiting
Xamarin Android Uber Clone App with C# and Firebase
- 4.2
-
![]()
![]()
![]()
![]()
![]()
Learn advanced Xamarin Android concepts by building a fully complete and functional Uber Clone app using Firebase Xamarin. Android Uber Clone App with C# and Firebase...
Fullstack Laravel API development with Nuxt and Linux - 2020
- 4.6
-
![]()
![]()
![]()
![]()
![]()
Become a Fullstack Laravel Engineer by developing a Dribbble Clone, Provisioning a server and Deploying with SSL Here's what you will learn:...
SwiftUI Covid19 Statistics tracking with REST API & Swift 5
- 4.7
-
![]()
![]()
![]()
![]()
![]()
Build COVID-19 statistics tracking app for iOS13, using SwiftUI and Swift 5. 1, REST API and JSON Parsing What our app will include:...
Learning Path: Android: Test-Driven Android App Development
- 4.2
-
![]()
![]()
![]()
![]()
![]()
See the first steps to building fast and dynamic Android apps employing test-driven development Android Nougat is the 7th major version of the Android operating system....
