
Getting Started with Supabase and Next Full Stack (feat. Supabase OAuth, Next.js 14)
dodocoding
Firebase's SQL version! You can master the basics of Next.js full-stack development through Supabase!
초급
Next.js, supabase, React
Build full-stack applications with real-time synchronization and responsive design: Take your web development skills to the next level with this intuitive Notion clone. The perfect opportunity to quickly grow with real-world project experience! (Powered by Antonio Erdeljac)
5 learners are taking this course
Level Intermediate
Course period Unlimited


Leverage modern web technologies: Learn how to build modern web applications with Next.js 14 and React.
Building a Real-Time Database: Learn how to process and synchronize data in real-time using Convex.
Developing a Notion-style editor: Implementing intuitive and powerful document editing features using React.
Switch between light and dark modes: Implement the ability to change the interface theme according to the user's preference.
Hierarchical Document Management: Learn how to create and manage infinite hierarchical child document structures.
Efficient File Management System: Build a comprehensive file management system including file upload, delete and replace functions.
User Authentication and Security: Protect your application by implementing a secure user authentication system.
Responsive Web Design: Implement a responsive design that works perfectly on all devices.
Web publishing capabilities: Develop a feature that allows users to share their notes on the web.
File Recovery System: Prevents data loss by implementing the ability to recover deleted files.
Enhanced User Experience: Provide a rich user experience with expandable and collapsible sidebars, attractive landing pages, and cover images for each article.

🌟 Welcome! We invite you to our course on creating a Notion service! 🌟
In the modern digital age, effectively managing and organizing information is no longer an option, but a necessity. Powerful tools like Notion are at the heart of this. Now, you have the opportunity to create your own.
This course goes beyond simply teaching technical skills; it invites you on a journey to actually build creative and practical applications. You'll experience the entire process of creating a complete product, from building a real-time database to designing a user interface and optimizing for mobile devices.
This course goes beyond mere theoretical learning. By actually writing code, solving problems, and implementing creative ideas, you will grow into a true developer.
Powered by Antonio Erdeljac
1. Real-time database 🔁
2. Notion Style Editor 📝
3. Switch between light and dark modes 🌗
4. Infinite Hierarchy Document System 🌲
5. Recycle Bin and Soft Delete Function 🗑
6. User Authentication System 🔒
7. Upload, delete, and replace files 📂
8. Document icons that change in real time 🌟
9. Expandable Sidebar ➡ 🔀 ⬅
10. Optimizing the Mobile Environment 📱
11. Publish notes to the web 🌐
12. Fully collapsible sidebar ↕
13. Landing Page 🛬
14. Set a cover image for each document 🖼
15. Deleted File Recovery Feature 🔁 📄
Collapsible Sidebar
Infinite Level Document System
Document Search Feature
Recycle Bin: Remove and Restore Feature
Real-time Title and Document Icon Synchronization
Add, Remove, and Replace a Cover Image
Applying the Notion Style Editor
Web Note Publishing Feature (Publish Document)
Mobile Environment Optimization (Responsive Design)
Real-Time Database Update
1. Real-time Database : Learn how to select and set up a database, how to synchronize data in real time, and how to communicate between servers and clients.
2. Notion Style Editor : Learn the basic elements for creating a user-friendly text editor and how to implement rich text features.
3. Switch between light and dark modes : Learn how to switch interface colors based on user preference and the techniques for managing themes using CSS.
4. Infinite Hierarchical Document System : Covers how to systematically manage complex information through tree-structured data management and recursive component design.
5. Recycle Bin and Soft Delete Features : Learn strategies and user interface design for efficiently managing deleted data.
6. User Authentication System : Learn about authentication protocols that enhance security and how to integrate social logins.
7. File Upload and Management : Learn how to integrate file upload mechanisms and cloud storage, and manage file metadata.
8. Real-time document icon changes : Learn UI update techniques that allow users to change icons in real-time.
9. Expandable Sidebar : Learn responsive design and animation techniques that allow users to freely adjust the sidebar.
10. Mobile Optimization : Covers responsive web design, interaction, and performance optimization for mobile devices.
11. Publishing Your Notes on the Web : Learn how to publish your notes on the web, SEO optimization, and social media integration strategies.
12. Collapsible Sidebar : Learn sidebar design and state management techniques to maximize your user's workspace.
13. Landing Page Design : Learn landing page design principles and strategies for increasing user engagement to create an effective first impression.
14. Set document cover images : Set cover images that fit individual documents and learn image processing and optimization techniques.
15. Deleted File Recovery : Learn data backup and recovery strategies, user interface design, and how to ensure data integrity.
This course provides the technical knowledge and practical approaches needed to build real-world applications through the above topics.
Next.js 14 (App Router)
React
TypeScript
Tailwind
Convex
Clerk
Cloudinary
BlockNote
Emoji-Piacker
Shadcn-UI
Radix-UI
Sonner
Zustand
SSR & CSR & SSG
🚀 Are you ready to unleash your creativity and create your own Notion-style application? Join this course today and explore the possibilities! 🚀
If you have any notes that you need for the lecture, please write them down carefully.
It can help students fully understand the content covered in the lecture and increase learning satisfaction.
Operating System and Version (OS): Windows 11
Tools used: Node.js 20, Next 14
"The source code used in each class and a description of the code are recorded in the class notes."
Basic knowledge of HTML/CSS/JS is required!
Your questions will be answered within 24 hours !
We will teach you the TypeScript required for the lecture within the lecture!
Antonio Erdeljac ( All rights reserved)
Who is this course right for?
Developers interested in full-stack development: Ideal for developers interested in full-stack development using modern web technologies.
For those looking to build a personal project or portfolio: This is perfect for those who want to strengthen their portfolio by building a full-stack application that can actually be used.
For those who prefer self-directed learning: Perfect for those who want to learn at their own pace and apply what they learn to real-world projects.
For those interested in developing collaboration tools for business or personal use: Useful for developers or students interested in developing collaboration tools or document management systems.
Beginner and Intermediate Web Developers: Developers who have basic web development knowledge but want to gain experience building real, working, full-stack applications.
Freelance Developers: Freelance developers who want to learn a variety of technology stacks for independent or client projects.
Members of the company's IT and development team: IT professionals who want to participate in the company's internal projects or system development.
People who learn to code as a hobby: People who learn to code as a hobby and want to create their own projects.
Evolved learning opportunities for established web developers: Experienced web developers who want to learn new technologies beyond their current technology stack.
Need to know before starting?
Knowledge of HTML, CSS, and JavaScript
React basic knowledge
Typescript (I'll explain it in the lecture)
All
60 lectures ∙ (6hr 35min)
Course Materials:
Explore other courses in the same field!