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-screeshot/tree/starter-code
Final Code (-given tasks):
https://github.com/nimone/code-screeshot/tree/f8c0b1d54077cc411a5db0afafba07e5d106a2d6
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
MAG.MOE - The MAG, The MOE.