Become an irresistible full-stack JavaScript Developer — learn with SylvainCodes! https://www.patreon.com/sylvaincodes

 Full Source code https://www.patreon.com/sylvaincodes/shop/download-orion-sass-multi-vendor-source-635862?source=storefront

🎯 What skills you will learn

✔️ Understanding UX Design basics

✔️ Proficiency in JavaScript (ES6+), React.js, and Next.js framework.

✔️ Knowledge of  React Components, State Management, and Hooks;

✔️ Experience with RESTful APIs and efficient methods of requesting data from backend servicesetc...;

 ✔️ Experience with CSS Framework (Tailwindcss) and the principles of responsive web design;

✔️Understanding State managment with Redux Toolkit;



📚 Get files & Links

Download Keys Strokes app
https://www.patreon.com/sylvaincodes/shop/keysstroke-app-lifetime-access-1525054

## ✖️ Additional content ( SOURCE CODE )

- Full Source code Part 1 and Part 2 : [Here](https://www.patreon.com/sylvaincodes/shop/download-orion-sass-multi-vendor-source-635862?source=storefront)

📚 Materials/References:
GitHub Repository: https://github.com/sylvaincodes/youtube_orion_admin
Part 1: Backend development with NextJs : https://www.youtube.com/watch?v=IgnzfALHjdA

📚 Frontend Courses:
🎓 Learn Javascript:  https://www.patreon.com/posts/fatest-way-to-117619789
🎓 Learn HTML: https://www.patreon.com/posts/html-in-one-hour-116677123

## ASSETS

🟢Online Store Website ORION MULTI VENDOR

- Store Website : https://orion-store-prod.vercel.app
- Figma Store Front : https://www.figma.com/design/izslJAyRNNXZrlpoVAOCbK/Orion---eCommerce-Marketplace


🔴Admin - Seller Dashboard ORION MULTI VENDOR

- Dashboard Admin - Seller : https://orion-api-five.vercel.app
- API documentation link: https://app.swaggerhub.com/apis-docs/SYLVAINCODEUR/Nextjs/1.0.0#/



🔗 FOLLOW ME ON
------------------------------------------------

💻 Github:  www.github.com/sylvaincodes
🔴 Patrean  www.patreon.com/sylvaincodes


⏱️ Timestamps
---------------------------
00:00:00 -  Intro
00:01:05 -  luckin Coffee shop
00:01:52 -  Implementing the design  
00:02:53 -  Figma basics
00:11:24 -  Bun setup
00:18:35 -  Next.js -- Installation 
00:20:34 -  Next.js -- Project Structure 
00:25:10 -  Next.js -- Shadcn UI
00:26:59 -  Next.js -- Extensions
00:29:26 -  Seven Qeys App Product 
00:31:44 -  Figma -- Style Guide
01:09:23 -  Figma -- Design
05:11:52 -  API integration
05:55:53 -  Redux Toolkit 



🔗 MUSIC
-------------------------------
pixabay

⚠️ DISCLAIMER
The disclaimer video is intended for educational purposes only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, reporting current affairs, teaching, scholarship and research. Fair use is permitted by copyright law that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.

#nextjs
#figma 
#tailwindcss 
#redux 
#react

Reinier

Next.js

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

The post provides a comprehensive guide on translating Figma designs into functional code using Next.js, Tailwind CSS, and Shadcn. It explains setting up a front-end environment, integrating APIs, managing global state with Redux, and customizing design elements. Detailed instructions are included for transforming color palettes, typography, and component designs from Figma into code. It also introduces Ban, a JavaScript runtime, as an alternative to Node.js for improved performance and security.

How to Turn Figma Designs into code with Next.js, Tailwind CSS,  Shadcn in 2025

<p>This video is amazingly complete! It’s buzzword-compliant with the latest cool topics. Completely free with a high production value. Thanks, <a href="https://app.daily.dev/rvdesignstudio" data-mention-id="ErgQ3AuOe" data-mention-username="rvdesignstudio" translate="no">@rvdesignstudio</a>.</p>


<p>The tut so long, can you create a playlist just foucus a guide about translating from figma design to code (Nextjs)</p>
