From Design toDevelopmentCrash Course

Welcome! Ready to dive in? 🚀

Jump to this chapter!

• Figma design tool
• Next.js React framework
• Sass CSS language
• Storybook design system and component framework
• Applitools automated visual testing
• GitHub Actions code task automation
• Netlify app hosting and deployment
• Netlify Identity authentication
• Airtable (API) as a database

Jump to this chapter!

• Downloading the free project idea PDF from 50reactprojects.com
• Reviewing available project ideas

Jump to this chapter!

• Creating a new frame inside of a Figma project
• Adding text to a design
• Grouping content to easily update a layout

Jump to this chapter!

• Starting a new app from scratch
• Reorganizing content structure
• Overview of a new Next.js app

Jump to this chapter!

• Adding Sass to a Next.js app
• Updating a Next.js app to use Sass
• Using Sass features like nesting and variables

Jump to this chapter!

• Using a Figma design to create a project layout
• Copying CSS styles from Figma into a Next.js app
• Making style changes in a Next.js app with style imports
• Adding and updating CSS inside of the browser developer tools
• Adding custom fonts with Google Fonts
• Creating and styling a custom form

Jump to this chapter!

• Installing Storybook in a Next.js React project
• Configuring Sass with Storybook
• Creating new stories in Storybook
• Adding React components in Storybook
• Importing React components into Next.js
• Using custom Sass CSS modules to style components
• Importing global application styles into Storybook stories

Jump to this chapter!

• Creating Figma components to help develop new React components
• Using Iconset to import and use SVG icons with Figma
• Creating new React components from scratch from a Figma design
• Using CSS Flexbox for designing component layouts
• Using SVG Font Awesome icons with React Icons

Jump to this chapter!

• Creating a new GitHub repository
• Adding an existing project to GitHub
• Connecting a GitHub repo to Netlify
• Configuring build settings for a Netlify project
• Installing the Next.js build plugin to Netlify

Jump to this chapter!

• Getting started with Applitools
• Finding your Applitools API key
• Installing Applitools Eyes Storybook SDK
• Adding Visual Testing to Storybook with Applitools Eyes
• Testing breaking changes and visual regressions
• Visual differences and regressions in the Applitools dashboard
• Creating a new GitHub Action to automatically run tests
• Automating Applitools Eyes visual testing with GitHub Actions
• Setting Secrets in a GitHub repository
• Using a Secret as an environment variable in GitHub Actions

Jump to this chapter!

• Installing Netlify Identity Widget
• Creating a useAuth custom hook with React Context
• Wrapping a Next.js application with React Context
• Using React Context to access state throughout an app
• Using the useEffect hook to initialize Netlify Identity on load
• Adding login functionality with Netlify Identity
• Setting up Netlify Identity with GitHub
• Only allowing logged in users to interact with app
• Letting users log out of the app
• Refreshing app authentication state on login
• Cleaning up event handlers on unmount with useEffect

Jump to this chapter!

• Getting started with Airtable
• Creating a new Base in Airtable to store content
• Reviewing the Airtable REST API
• Generating an API key in Airtable
• Using cURL to test fetching content from Airtable
• Using getStaticProps to fetch data in Next.js
• Authenticating requests to the Airtable API
• Dynamically showing content from Airtable
• Using JavaScript Intl.DateTimeFormat to format date strings
• Using environment variables to protect sensitive data
• Creating API endpoints for interacting with the Airtable API
• Creating new content with the Airtable API
• Using a form React component to submit new requests
• Sorting an array of objects by a date key
• Protecting serverless functions with Netlify Identity

Jump to this chapter!

• Adding environment variables to Netlify
• Debugging serverless function not being available in getStaticProps
• Deploying serverless function before using in app
• Testing our project on production

Jump to this chapter!

• 50reactprojects.com to get project ideas
• Creating a project design in Figma
• Using Create Next App to create a new Next.js React app
• Building a posts app
• Setting up Storybook to develop components
• Adding Applitools Eyes for automated Visual Testing
• Authenticating our app with Netlify Identity
• Using Airtable to fetch and create dynamic data
• Creating serverless functions for securing API requests
• Setting up environment variables to store sensitive data
• More things you can do

Jump to this chapter!

🥳🥳🥳🥳🥳

Jump to this chapter!