Build and deploy a Full Stack coolors clone with Nextjs 14, Supabase, Clerk, and Typescript
In this tutorial, we will walk you through how to build and deploy a full stack coolors clone using Nextjs 14, Supabase, Clerk, and Typescript.
Step 1: Setting up the project
Start by setting up a new Next.js project with Typescript. First, create a new Next.js project by running the following command:
npx create-next-app@14 my-coolors-clone --ts
Step 2: Setting up Supabase
Next, sign up for a free account on Supabase and create a new project. Once you have your project set up, you will need to grab your Supabase URL and API key to connect your Next.js application to Supabase.
Step 3: Setting up Clerk
Sign up for an account on Clerk and create a new application. Clerk will handle user authentication for your coolors clone. Once you have your Clerk application set up, grab your Clerk frontend API key.
Step 4: Building the coolors clone
Now it’s time to start building your coolors clone. You can find the complete source code for the project here. Make sure to replace `your-username` with your GitHub username.
Step 5: Deploying the application
Once you have finished building your coolors clone, you can deploy it to Vercel. Simply run the following command in your project directory:
vercel
Conclusion
Congratulations! You have successfully built and deployed a full stack coolors clone using Next.js 14, Supabase, Clerk, and Typescript. Feel free to customize and expand upon this project to make it your own.
32:47 I realized most viewers have questions about what happening here , as mentioned the piece of code was from the documentation. So supabase is our database while clerk auth is our authentication provider, so we needed a way to connect both tools to each other to save the user palette based on the user_id provided by clerk to database.
Hope this helps.
If u have any doubts still do leave a comment I will attend to it
Thanks.
Also for those looking for the desktop svg we used on the home page . Check the iconx.tsx file on the Google drive that is in the video description.
Happy coding again ❤
Nice projects bro 🎉
I love the interface it nice and it great project thank you
Awesome video I learned a lot thanks😮😮😮😮
Great explanation! Was looking for tutolial like this for several days
I think on a site the users should be able to see what the sites does before they sign in, some users may just be checking it randomly and just seeing the sign in first they may not have the time but, when the users is able to see what it is about and how it works maybe when they are about to save or download then the sign in notification can recommend them to do so when it has caught their interest. I am just saying this because the project is very unique and beautiful.
But i just want to say, is there need of locking colours when it can be downloaded.
I think there should be a notification on using the space bar to generate colours or an icon as the same on the mobile because some users that just came across it may not have idea about it
Wow, this project is amazing and beautiful
Awesome as always Thank you again Evergreen!
Amazing video, Thanks
Hi sir is there a way to contact you