강의

멘토링

로드맵

Building a Full-Stack Notion Service with Next.js

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

Next.js
Next.js
React
React
TypeScript
TypeScript
Node.js
Node.js
Next.js
Next.js
React
React
TypeScript
TypeScript
Node.js
Node.js

What you will gain after the course

  • 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.

Building a Full-Stack Notion Service with Next.js

🌟 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


Demo : https://next-notion-clone-lyart.vercel.app/

Summary of Implementation Features

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 🔁 📄

After taking the lecture, you will be able to create results like this.

Landing Page

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

What you'll learn 🤖

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.






Skills Used 💻

  • 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! 🚀

Things to note before taking the course

  • 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.

Practice environment

  • Operating System and Version (OS): Windows 11

  • Tools used: Node.js 20, Next 14

Learning Materials

  • "The source code used in each class and a description of the code are recorded in the class notes."

Player Knowledge and Precautions

  • 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!

Copyright

Recommended for
these people

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)

Hello
This is Su

Curriculum

All

60 lectures ∙ (6hr 35min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Similar courses

Explore other courses in the same field!