<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Robert Fraser</title>
    <description>The latest articles on DEV Community by Robert Fraser (@robfrasercodes).</description>
    <link>https://dev.to/robfrasercodes</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1130192%2F4049fb87-9773-4560-92ba-408aabbea73c.png</url>
      <title>DEV Community: Robert Fraser</title>
      <link>https://dev.to/robfrasercodes</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/robfrasercodes"/>
    <language>en</language>
    <item>
      <title>NFT Minter on Solana Part 1</title>
      <dc:creator>Robert Fraser</dc:creator>
      <pubDate>Fri, 11 Aug 2023 11:40:47 +0000</pubDate>
      <link>https://dev.to/robfrasercodes/metaplex-starter-33g1</link>
      <guid>https://dev.to/robfrasercodes/metaplex-starter-33g1</guid>
      <description>&lt;p&gt;&lt;strong&gt;My Dev Log: Charting My Journey with NFTs on Solana&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;As part of my commitment to charting my growth as a programmer, I've decided to chronicle my projects in a dev log format. My hope is that this log will not only serve as a testament to my journey but will also aid others through detailed tutorials.&lt;/p&gt;

&lt;p&gt;In this series, I aim to detail my adventures with the Metaplex platform. Web3 development has been an area I've dabbled in, but like many, I've often found myself pivoting to the next shiny thing whenever I've hit a roadblock. Here's hoping that maintaining this dev log will capture both the highs and lows of this journey.&lt;/p&gt;

&lt;p&gt;To set the stage, I'd like to share the vision behind my application and the technology stack it'll be built upon. The inaugural app is slated to be a straightforward Non-Fungible Token minter. Those fortunate to hold one of these NFTs will gain a special key to another DAO project I'm concocting — all part of my grand plan!&lt;/p&gt;

&lt;p&gt;For the tech aficionados among you, I've settled on Solana and Metaplex for the web3 components, with React (I promise more nuances on this choice later!) handling the UI. This decision stemmed from much experimentation; Solana's transactional cost-effectiveness was a significant draw. Having trawled through reams of web3 documentation, I found &lt;a href="https://www.metaplex.com/"&gt;Metaplex&lt;/a&gt;, and specifically their &lt;a href="https://docs.metaplex.com/candy-machine-v3/introduction"&gt;'candy machine V3'&lt;/a&gt;, offers a powerful yet user-friendly feature set.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Starter Dilemma
&lt;/h3&gt;

&lt;p&gt;Who doesn't love a good starter? As I've honed my skills, I've grown particular about my tech preferences. Be it the vibrancy of their community, the clarity of their documentation, or their intuitive syntax – my choices have been shaped by a mix of research and intuition. The catch? Finding a starter that aligns with my refined palate has become a challenge. Some are overly broad, offering little time-saving utility, while others are so niche that they constrain flexibility.&lt;/p&gt;

&lt;p&gt;Thus, I found a fresh mission: craft the Metaplex starter I'd love to use!&lt;/p&gt;

&lt;h3&gt;
  
  
  Let's Get Technical
&lt;/h3&gt;

&lt;p&gt;For those of you who've stuck around till here, let's get down to the nitty-gritty. At the foundation of this project is &lt;a href="https://nextjs.org/"&gt;NextJS 13&lt;/a&gt;. Yes, I hear the collective gasps. For whatever reason, my dalliance with NextJS began shortly after its Beta, and it's been a rewarding relationship. Let's initiate our project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx create-next-app@latest metaplex-nft-minter &lt;span class="nt"&gt;--typescript&lt;/span&gt; &lt;span class="nt"&gt;--eslint&lt;/span&gt; &lt;span class="nt"&gt;--tailwind&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command offers a sneak-peek into the tools I'm wielding: I'm a big advocate for &lt;a href="https://tailwindcss.com/"&gt;Tailwind&lt;/a&gt; to whip up elegant designs swiftly, and I've come to see the light with TypeScript's error-prevention capabilities. However, our setup isn't complete:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;metaplex-nft-minter &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; npx shadcn-ui@latest init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For those uninitiated, meet &lt;a href="https://shadcn-ui.com/"&gt;shadcn-ui&lt;/a&gt;, a splendid tool for constructing and refining components. While the urge to keep adding dependencies is tempting, I'm keen to pivot to frontend development and mould the app's persona.&lt;/p&gt;

&lt;h3&gt;
  
  
  Balancing Design with Functionality
&lt;/h3&gt;

&lt;p&gt;When it comes to design, &lt;a href="https://www.figma.com/"&gt;Figma&lt;/a&gt; has won my allegiance. After clinging to Adobe XD longer than I'd like to admit, Figma's offering – especially for wire-framing and creating basic assets – proved too compelling. Before I dive into design, I consult with my trusted copywriter (ChatGPT) to infuse my sketches with content and structure.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;I am in the process of designing a template website that can be used as a base for building NFT minters using Solana and Metaplex. Please provide a breakdown of the components I should include along with some sample content where appropriate.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Do I still pepper my interactions with ChatGPT with pleasantries? Absolutely. Maybe it's peculiar, but old habits die hard! I take the gleaned content and pour it into &lt;a href="https://www.figma.com/figjam/"&gt;Figjam&lt;/a&gt;, sprinkling in some inspiration from &lt;a href="https://www.behance.net/"&gt;Behance&lt;/a&gt; for layout and organisation ideas.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--BXoNZDBP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nws11rr7l4octypdqf5c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--BXoNZDBP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nws11rr7l4octypdqf5c.png" alt="A screenshot from the Figjam board created for wire framing the starter" width="800" height="511"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This feels like a good place to pause. My immediate plans?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Sketch the wireframe in Figjam, leaning on ChatGPT's insights&lt;/li&gt;
&lt;li&gt;Infuse the frontend with the established design aesthetic&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Stay tuned for my next update, and until then, happy coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>tutorial</category>
      <category>react</category>
      <category>web3</category>
    </item>
  </channel>
</rss>
