Web app using Firebase, Next, Stripe API, Tailwind CSS
What you'll learn
- Next JS, creating API by reusing Next server
- Using Firebase client and admin sdk in a Next project, taking online payment using Stripe API
- ATOMIC web design
- Usage of Tailwind CSS
- deploying a next web app
- SSR, SSG and SPA basics
Requirements
- Basic knowledge of HTML CSS and JavaScript
- Basic knowledge of React
- Basic knowledge of Tailwind
Description
Hi all,We all know the power of Next.js the react framework. Combined with technologies like Tailwind CSS, Firebase, Stripe and inbuilt Node.js API, Next.js allows great developer experience and feasibility to develop robust web apps.
In this course, we will start from the very basics of Next.js and then take a step forward to build a web app for event creation and booking. While we code we will learn some new concepts as we apply them in our app. We will start with understanding basic concepts like SSR, SPA and SSG. Then create the Next project, add Tailwind CSS and Firebase to it. We will then see the Next basics and then use our learning to make an app.
As I mentioned, the app is an online platform that allows a user to create an event that could be an online or offline event. This event can be purchased by other users except for the creator itself. We will use Firebase admin and client-side SDK for database, authentication, file storage. I have also explained how to write rules for Firestore and storage. We will use Stripe API to take payments. The app will be styled using Tailwind CSS. You will also learn some ATOMIC web design principles and code reuse as I have tried to implement them as much as possible. We will also see how to create and use API by reusing the Next.js Node.js server.
Last but not least we will deploy this app on Vercel, plus I will share the GitHub repo link with some suggestions for you to make this app more amazing. Of course, these are just suggestions but you are free to use your creativity.
I will be honest here, I have coded this app from scratch. So you will see me in some videos making mistakes and errors. However, I have shown with my best possible knowledge how we can tackle those errors and find a solution.
This is app is for educational purposes and is meant to be used ethically.
Hope you enjoy your learning process. Happy learning
Prerequisites for the course:
To make the most of this course, it is recommended that you check the following list of prerequisites
1. HTML, CSS and JavaScript
2. React Framework basics
3. Tailwind CSS basics or basics of any other CSS framework like Bootstrap
4. Basics of client-server architecture (optional)
Disclaimer for the course
All the information provided in this course is published in good faith and for general information purpose only. The course is created by using personal learnings and experience additionally referring to online resources, official documentation of Next.js, Firebase, Tailwind CSS and Stripe.
However, I do not make any warranties about the completeness, reliability and accuracy of this information. Any action you take upon the information you find in this course (Learning Next.js and creating a web app), is strictly at your own risk. I will not be liable for any losses and/or damages in connection with the use of this course.
Regards
Aditya
Who this course is for:
- React beginners who want to learn how to create a full stack web app which is SEO friendly
- React users who would like to learn how to develop a web app using Next
