Видео

yes it can :) I pushed it and found errors -> fixed it, and made a commit with fixes. You can also in your terminal run "npm run build" to see, if the build will go through or not

hey bro, fastest way to solve this would be to send parts of the code with JWT functionality or sending signup data to mongodb to chatgpt, i would say you need to doublecheck 1) the JWT storage in local storage after login, and 2) if after signup user data are properly stored in mongodb.. If you are having issues, I would say you can remove this part with login (or again, send it to chatgpt and tell it to make this login just without functionality - refer it to as to make it a "dummy functionality"), and tell at your presentation that you had some errors with the login because of either problem with JWT (json web tokens) or storing at mongodb (but that should be easier to solve, you are sending there user name and encrypted password)

even on mobile screen with "md:hidden" ? because that should make it visible on mobile, hidden on desktop

​@@codinzerobro I solved it the className with styling is causing issues it worked properly with inline css with style ={{}}

@@devanshsharma3513 nice bro good job!!!

@@codinzero thanks for such great project 👍

Bro one more thing as your background is black but mine is showing white how can I change it to black

Hello, thank you! They are from figma, you can find them like "figma icons 3d" or "free figms icons".. and then list through the templates on figma :)

You are welcome, thank you for the feedback!

@@codinzero sir , can you make a video for javascript. due to this video i got an internship . hope you make cool video so that i can learn a lot from you. (ignore the english since i a from state board school).

Make sure you are in the folder in your IDE (vscode for example), open a terminal, run "npm i" and the run "npm run dev" and click on the localhost link. In case of any issues, I recommend to ask chat gpt for the quick answers and solution as I take time to reply, sorry! Good luck!

I recommend Canva/Free mockups online tool (i dont have specific) or Adobe Photoshop but thats a paid software

you are welcome!!! sorry for late reply

@@loctruong7945 You are maybe missing some library, check if you have all like framer-motion etc installed with "npm i framer-motion" etc command.. Also try to inspect-> console and check there after refresh.. Most probably it will be unknown tag in the code, missing import or a typo somewhere. Try cutting your code to see what probably caused it, in case nothing in console is shown

You are welcome! I can but I am on vacation so I am not sure when I will be back to my pc.// I will post it there eventho you will probably manage to find it on your own until then.

@@codinzero yep solved the problem really amazing demo. Would love to connect! Plese keep doing these kind on videos

@@SonoMomaa I am planning to create some discord/ig in the near future. btw about this kind of content- Its actually the one I want to create - apps with bolt.new/v0/cursor (separately), comparing them, showing how to create fullstack apps even with a backend (thats a challenge with these AI agents) and so on. Connecting beginners/no coders with the AI+low code world. Hopefully it will be a good and enjoyable educational content :D and thank you!

@ 100% please let me kno when u do it

@ ok I will ping you in this comment later, I expect first half of January

🙏🙏

unfortunately its added in a video recording tool OBS, i cant see that window when programming

import { Button } from "@/components/ui/button"; import Link from "next/link"; export default function Home() { return ( <main className="relative"> <div className="absolute -top-0 left-0 right-0 h-[calc(100vh-80px)] dark:bg-[linear-gradient(to_right,#4a5568_1px, transparent_1px),linear-gradient(to_bottom,#4a5568_1px,transparent_1px)] bg-[linear-gradient(to_right,#333333_1px,transparent_1px),linear-gradient(to_bottom,#333333_1px,transparent_1px)] bg-[size:3rem_3rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)] opacity-[0.2]"/> <div className="relative z-10 mx-auto flex flex-col"> there you will put all the components </div> </main> ); } try to put this code into /app/page.tsx. If still errors, try to run command "npx shadcn@latest add button" . If still error, copy paste tailwind.config.ts and globals.css from this github link, also with layoutTWO.tsx into /app/layout.tsx github.com/devczero/theme-for-saas

You are welcome 🙏

In your vercel.json, you are setting Access-Control-Allow-Origin to *, which means it allows any origin. In your cors middleware, you are specifically allowing zenstudy-assignment-frontend.vercel.app/. Use "*" for both vercel.json and cors middleware. Or specify zenstudy-assignment-frontend.vercel.app/ in both places. so remove headers from vercel.json { "version": 2, "builds": [ { "src": "./index.js", "use": "@vercel/node" } ] } or make sure that they in vercel.json match the backend { "headers": [ { "source": "/(.*)", "headers": [ { "key": "Access-Control-Allow-Origin", "value": "zenstudy-assignment-frontend.vercel.app" }, { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" }, { "key": "Access-Control-Allow-Headers", "value": "Content-Type,Authorization" }, { "key": "Access-Control-Allow-Credentials", "value": "true" } ] } ] }

does it worked ?

I will give it to you for free, you can take it from this github repo from my new microsaas fullstack project that includes this landing page: github.com/devczero/microsaas-thumbnail-previewer

Hello thank you for your feedback, I would like to provide full code but I simply cant because it takes a lot of time to prepare and then in return people often come - get the git and go. Partial code is only for assets or some tricky .css / config setting so people that are willing to spend time watching the video (which helps me build the channel - thats the return for me for the preparation of the code etc) and try to code it themselves, have their life a bit easier :) I am providing full code for fullstack videos where sessions are 2h+, so people wont get lost in case something is not working for them.

thank you so much!

supabase ? why not use drizzle orm with neondb

Hello, they are hidden on purpose to not confuse, because when I was filming there was some additional content that I later removed. It shouldnt affect the functionality. If you are curious, it was about Stars added to the background. I will send the lines there below this comment in the morning so you can see :)

⁠@@codinzeroThank you very much for your quick response. Was afraid about possible errors but the dynamic background is working nicely. Much appreciated your follow up 😊 Thanks.

@@FarahChurch No worries! And here are the lines :) "use client" import { Stars } from "@react-three/drei"; import { Canvas } from "@react-three/fiber"; import React, { useEffect } from "react"; import { FiArrowRight } from "react-icons/fi"; import { useMotionTemplate, useMotionValue, motion, animate, } from "framer-motion"; import Image from 'next/image'; import profilepic from "../assets/profilepic.png" import object1 from "../assets/obj1.png"

@@codinzero Thank you very much for this. I would like to thank you again for sharing this project. It is finished now and it looks great in all devices, 🙏

@@FarahChurch Awesome!! I really appreacite your feedback and I am happy that you like the portfolio!

haha thanks, hope i helped

You are very welcome!!!🙏

Thats awesome!! You are welcome, good luck!

@@codinzero Thank you

true bro, thanks!

@codinzero thanks to you to teach us so much for free.

Thank you bro,really happy to hear that its appreciated!

Hello, thank you for your nice comment, also happy to hear that you have learned something new, thats a huuge motivation for next vids! That page looks really nice, I can definitely see using similar design for some SaaS landing page for example. I will add it to my list for now, lets see, still a bit overloaded with projects to finish.

Hello! Chrome and I also tested Polypane in this video, which I used in free trial (14days).

​@@codinzero Thanks for the shareing

Sounds like a good timing 😂

@codinzero well there is not much change.

​@@ManishGupta-nv5by yes sorry, some sections (keymetrics,services for example) I already did, depends on the website. I would post just the new sections, but then it wouldnt make sense for new people that wants the full page. Honestly I start on the Hero section and then make design around it, and when some code I already wrote works for other sections, I reuse it.

Hey bro make sure the content is wrapped in a div with "grid md:grid-cols-8" ... Maybe there is a mistake.. And also, for the divs for each text in about section (the "col-span-5") shoulf also be from md:col-span-5 ...That should fix it

Currently without "md:" before the grid-cols-8 or col-span its telling also mobile that it should keep this layout... So with md:, it will be doing it only for desktop, and for mobile it will keep defaultly 1 full width column

Sure bro I replied in your second comment

Hey, should work you just need to adjust vercel.json to something like this { "routes": [ { "src": "/(.*)", "dest": "/server.js" } ] } ...to tell Vercel to forward all requests to this server.js file

Did this fix it for you? I am running into similar issues and nothing is working.... any suggestions? Thanks!

Hey, run "npm run dev" and open the localhost that it will run on. Most probably 3000. Find the code that is displayed on the page, and then find that code in your project. Try to change some letters in the text that is displayed on the page. This changes should be reflected. In case not, try to refresh your ( localhost ) page.

They can be in different repos. They can be even deployed to a different platforms/servers.

@@codinzero im deploying by backend getting 404 error

@@osamaayub405 and what is the error message?

Nice!!! Congrats!