Build a Google Forms Clone with Next.js 14, OneEntry Headless CMS, Tremor 3.0, Shadcn and Clerk Auth

Get started with OneEntry CMS right now 👉 https://oneentry.cloud/en/instructions

Timestamps:
00:00: Introduction to the video, gratitude to OneEntry for sponsorship, overview of the application's features and technologies used.
00:10:00: Guide on creating a project with OneEntry CMS, obtaining credentials, and setting up the project.
00:20:00: Discussion on using Tailwind components, specifically Shadcn UI, for building the application.
00:30:00: Guide on wrapping the root layout file with the Clerk provider for authentication in Next.js.
00:40:00: Explanation of creating an authenticated sign-up page using Clerk Auth in a Next.js application.
01:00:00: Tools overview, highlighting Shadcn's button and Clerk's components for customization.
01:05:00: Clerk-based user authentication, demonstrating sign-in/out and creative styling.
01:15:00: "Access denied" component creation, focusing on landing page responsiveness.
01:20:00: Landing page design, emphasizing perseverance, and creating engaging components.
01:30:00: Using Shadcn's card component for Google Forms clone, covering installation and styling of CTA buttons.
02:00:00: Customizing header style, planning sidebar and search, encountering "sheet" component issue, and previewing designs.
02:10:00: Working on logo and sidebar, custom styles for screens, planning menu items with OneEntry CMS.
02:25:00: Connecting to OneEntry CMS API, setting up API instances, and simplifying data fetching with asynchronous functions.
02:40:00: Adding icons to sidebar menu, using suspense for fetching, completing sidebar design.
02:55:00: Building search input with enhanced functionality, styling with "command-dialogue" package from Shadcn.
03:00:00: Introducing Zustand for state management, creating a store for search component state in a Next.js project.
03:10:00: Creating a form in OneEntry CMS, adding a unique marker, focusing on form fields and real-time data storage.
03:20:00: Setting up attribute types in a registration form, including integer, float, and radio button attributes.
03:30:00: Fetching and sorting forms from a CMS in a Next.js project, displaying form titles and identifiers.
03:45:00: Building the top bar of the Google Forms clone, introducing the Select component for a dropdown menu, and adding icon buttons to the UI.
04:00:00: Realized need for two forms, adjusted dashboard structure, and fetched forms by ID asynchronously.
04:10:00: Created a responsive header with logo, navigation, form info, and icon buttons.
04:20:00: Extended functionality with a clean send form dialog, select field, and tabs.
04:25:00: Implemented visually appealing send form dialog with select field and tabs.
04:35:00: Built link tab content with URL construction, copy button, and interactivity.
05:00:00: Explained ternary operator logic for tab links and styled tabs for UI transitions.
05:10:00: Worked on the main form component, discussed server actions, and fixed padding issues.
05:20:00: Styled the Google Forms clone, set grid layout, added validators, and connected labels.
05:30:00: Focused on form styling, added buttons, included error handling, and linked to OneEntry CMS.
05:40:00: Demonstrated mapping attribute types to HTML input types, logged form attributes, and started public form page setup.
05:50:00: Created a success page for form submission, implemented a submit button, and made the form fully functional.
05:55:00: Set up form action and initial state, introduced server actions, and handled form submission on the server.
06:00:00: Converted raw form data, preparing it for submission to an API.
06:15:00: Implemented form validations, ensuring data meets specified criteria.
06:30:00: Set up the responses page structure and introduced response tabs.
06:40:00: Fetched forms data, recorded responses count for each question.
06:50:00: Demonstrated filtering form data, encountered and temporarily solved
07:00:00: Investigating and fixing radio button issues in the product feedback form.
07:10:00: Debugging missing responses, planning to render cards and bar charts for questions.
07:15:00: Setting up Tremor library for simplified chart implementations.
07:25:00: Implementing user authentication and access control with Clerk Auth.
07:35:00: Deploying the application to Vercel and discussing organizational support setup.

Useful links:
◆ GitHub Repo: https://github.com/lukef7fywmrp/google-forms-clone-yt
◆ Live App: https://google-forms-clone-yt.vercel.app/
◆ What is a headless cms: https://oneentry.cloud/headlesscms
◆ How to use reduce function: https://builtin.com/software-engineering-perspectives/javascript-reduce

Social links:
◆ Twitter: https://twitter.com/YenneferIlw
◆ Github: https://github.com/lukef7fywmrp
◆ Instagram: https://www.instagram.com/alicodess/
◆ Discord: https://discord.gg/dAGrxmjCMq

Видео Build a Google Forms Clone with Next.js 14, OneEntry Headless CMS, Tremor 3.0, Shadcn and Clerk Auth канала Ali Codes