Build a Code Screenshot React Project (Ray.so Clone) with Tailwind CSS and ShadCN UI

Опубликовано: 30 Август 2023
на канале: Your Code Lab

4,943

217

Learn how to create a stunning Code Screenshot React Project in this step-by-step tutorial! In this video, you'll building your own version of fully functional Ray.so Clone, a powerful tool for sharing code snippets. Using 10+ elegant themes, 12+ font styles, and multiple customization options share beautiful screenshots of your code on your social media platforms. With the combination of Tailwind CSS and ShadCN UI learn to design and develop an impressive UIs.

What you'll learn:
How to build a fully functional Ray.so clone react project with all features from scratch.
Setting up a React project with Tailwind CSS and ShadCN UI.
Handling global state with zustand.
Implementing react code editor with syntax highlighting with multiple themes.
Building elegant user interfaces with Tailwind CSS and ShadCN UI.
Adding customization options to your projects.
Building interesting clones projects for your porfolio.

Project live on:
https://code-ss.pages.dev

Starter Code:
https://github.com/nimone/code-screes...

Final Code (-given tasks):
https://github.com/nimone/code-screes...

Final Code (+given tasks):
https://github.com/nimone/code-screeshot

Whether you're a beginner or an experienced developer, this tutorial is designed to help you build an Awesome React Project by cloning Ray.so so you can add it to your portfolio of interesting projects.

Timestamps:
00:00 - Project demo
01:51 - Project setup and installation
05:51 - Building the code editor
09:39 - Setting up global state
14:40 - Some editor features
16:25 - Screenshot export options
25:39 - Theme selection
28:35 - Language selection
30:54 - Font selection
32:17 - Font size input
33:36 - Padding slider
34:58 - Background switch
36:12 - Dark mode switch
36:53 - Resizing the editor
37:29 - Final touches

Don't forget to like, subscribe, and hit the bell icon so you'll be the first to know when I drop more interesting project tutorials like this. If you have any questions or suggestions, feel free to leave a comment below.

#ReactJS #TailwindCSS #WebDevelopment #ReactProject #ReactJSTutorial #tutorial

Credits:
Outro music track: Rose by Lukrembo

Смотрите видео Build a Code Screenshot React Project (Ray.so Clone) with Tailwind CSS and ShadCN UI онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Your Code Lab 30 Август 2023. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 4,943 раз и оно понравилось 217 посетителям.

418