Eli Codes

In this series we dive into creating and working with GraphQL APIs with Node, React & Apollo. Learn  how Apollo Client & Server works, best practices and creating a fullstack application.

Api:
https://jobs.github.com/api

GitHub:
https://github.com/iamelimars/figma-react-blur

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Social:
Instagram: @iamelimarss

Get $100 free with Digital Ocean hosting 💰💰💰
https://m.do.co/c/a63072097f2c

#11 Create Job Component & Complete Project - Fullstack GraphQL + React Tutorial

#10 useQuery Hook with Parameters- Fullstack GraphQL + React Tutorial

#9 Setting Up React Router - Fullstack GraphQL + React Tutorial

#8 Create The JobList & JobCard Components - Fullstack GraphQL + React Tutorial

#7 Handling Apollo Errors & Loading State - Fullstack GraphQL + React Tutorial

#4 Creating Resolvers - Fullstack GraphQL + React Tutorial

#6 Setup Apollo Client & useQuery Hook - Fullstack GraphQL + React Tutorial

#5 Setup Of React Client - Fullstack GraphQL + React Tutorial

#3 Create Our Apollo Datasources - Fullstack GraphQL + React Tutorial

#2 Creating Our Apollo Server - Fullstack GraphQL + React Tutorial

#1 Setting Up Our Project - Fullstack GraphQL + React Tutorial

A Quick tutorial on how to map keys and shortcuts to a windows 10 computer. You can also remap keys directly from PowerToys, instead of using Sharpkeys.

SharpKeys: 
https://www.randyrants.com/category/sharpkeys/

Microsoft PowerToys:
https://github.com/microsoft/PowerToys

PowerToys Download Link:
https://github.com/microsoft/PowerToys/releases/

Windows Keyboard Shortcuts:
https://support.microsoft.com/en-us/windows/keyboard-shortcuts-in-windows-dcc61a57-8ff0-cffe-9796-cb9706c75eec

Apple Keyboard Shortcuts:
https://support.apple.com/en-us/HT201236

Thumbnail Photo:
Photo by Amy Hirschi on Unsplash

Map Keys and Shortcuts for Apple Keyboard on Windows 10 Computer 4K 2020 | Easy Tutorial

#3 Figma Design + React 2020 |  Responsive E-Learning Site

Today's video is on the development of the UI for an E-Learning Website

The design was made in Figma & the coding was done in VSCode.

Live Site:
https://figma-react-blur.vercel.app/

Design: 
https://www.figma.com/file/peT8tKA62W4C20gfhPIOIL/E-Learning-Site?node-id=0%3A1

GitHub:
https://github.com/iamelimars/figma-react-blur

Hero Image:
Instagram.com/
@gouthamgtronics
https://www.figma.com/file/rBDauJqxvfJcbGmjYLmh8q/Free-3D-Mac-Illustrations-Community?node-id=0%3A1

Music:
"Good Intentions"
Instrumental by Homage
https://youtu.be/j3b7Yf-z52g
IG: @HomageBeats

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Social:
Instagram: @iamelimarss

Get $100 free with Digital Ocean hosting 💰💰💰
https://m.do.co/c/a63072097f2c

Figma Design + React 2020 |  Responsive E-Learning Site | UI /UX | Styled Components

In this video, we will be making a responsive navbar with react and styled components

⏱️TIMESTAMPS⏱️
0:00 Intro
0:25 Setup Project & Install Dependencies
3:01 App.js
4:42 Navbar.js
16:50 Responsive Nav
21:33 State Management
24:22 Animation
24:53 Outro

Live Site:
https://responsive-nav.vercel.app/

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Music:
"Design"
Instrumental by Homage
https://www.youtube.com/user/homage253

GitHub:
https://github.com/iamelimars/responsive-nav

Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss...


Get $100 free with Vultr hosting 💰💰💰
https://www.vultr.com/?ref=8584529-6G

Responsive Nav with Styled Components - Beginner React Project

#2 Figma Design + React | Startup Sign Up Page
Today’s video is on the development of the ui for a sign up page, made in react.

The design was made in Figma & the coding was done in VSCode.

Design:
https://www.figma.com/file/iplx8vxEZYMVWi2bog8bJf/React-Signup?node-id=0%3A1

Design Inspiration:
https://dribbble.com/shots/13870055-Adobe-Xd-sign-up-form

Live Site:
https://figma-react-signup.vercel.app/

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Music:
"Ether"
Instrumental by Homage
https://youtu.be/ogV_hVhnUpA

GitHub:
https://github.com/iamelimars/figma-react-signup


Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss/?hl=en


Get $100 free with Digital Ocean hosting 💰💰💰
https://m.do.co/c/a63072097f2c

Figma Design + React | Sign Up Page | UI /UX | Styled Components

#2 Figma Design + React Native | House Sales App Home Page - Styled Components

Today’s video is a speed code for a house sales application, similar to zillow.

The design was made in Figma by (Wildanux)  & the coding was done in VSCode.

Designer:
Wildanux
https://ui8.net/wildanux/products/salses-mobile-apps

Get $100 free with Vultr hosting 💰💰💰
https://www.vultr.com/?ref=8584529-6G

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Music: 
"Trouble"
Instrumental by Homage
https://youtu.be/_1shddddO88


Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss/?hl=en

Figma Design + React Native | House Sales App Home Page - Styled Components | Speed Code

In this video, we will be jumping back into our ecommerce site and add the functionality for saving our cart in localstorage

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Finished Project: https://shopify-react.now.sh/ 
(I have added some extra styling to the site that wasn't put in the video)

Github Link: https://github.com/iamelimars/shopify-react

Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss/?hl=en

Music:
"Cruise" 
Instrumental by Homage:
https://www.youtube.com/user/homage253


Get $100 free with Vultr hosting 💰
https://www.vultr.com/?ref=8584529-6G

Build a custom e-commerce site using React and Shopify. Part 2

Today’s video is a speed code for a mortgage calculator.

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Music:
"sirens"
Instrumental by Homage
https://youtu.be/Z_Bcg9at-yc


Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss/?hl=en

Get $100 free with Vultr hosting 💰💰💰
https://www.vultr.com/?ref=8584529-6G

Mortgage Calculator + React | styled-components

In this video we will be making mobile device mockups in react to use for your personal portfolio.


Example: 
https://device-mockup.now.sh/

Assets:
https://device-mockup.now.sh/static/media/Alert.6db42e0b.png
https://device-mockup.now.sh/static/media/Courses.6246d440.png

Design Screenshots:
https://dribbble.com/paolospazzini

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Get $100 free with Vultr hosting 💰💰💰
https://www.vultr.com/?ref=8584529-6G

Figma Device Mockups with React | Dark Mode | styled-components

#1 Figma Design + React | Dashboard App Deposits Page - Light/Dark Mode

Today’s video is a speed code for a real estate management application

The design was made in Figma & the coding was done in VSCode.

Live Site:
https://figma-react-dashboard.now.sh/

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Music:
"Design"
Instrumental by Homage
https://www.youtube.com/user/homage253

GitHub:
https://github.com/iamelimars/figma-react-dashboard


Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss/?hl=en


Get $100 free with Vultr hosting 💰💰💰
https://www.vultr.com/?ref=8584529-6G

Figma Design + React | Dashboard App Deposits Page - Light/Dark Mode

In this video, we will be creating a simple e-commerce site with Shopify as our headless commerce / backend. We will also be using React us as our frontend.

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Finished Project: https://shopify-react.now.sh/ 
(I have added some extra styling to the site that wasn't put in the video)

Github Link: https://github.com/iamelimars/shopify-react

Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss/?hl=en

Get $100 free with Vultr hosting 💰💰💰
https://www.vultr.com/?ref=8584529-6G

Build a custom e-commerce site using React and Shopify

In this video, we will create loading skeletons for our data. Something similar to how YouTube's loading screens look.



Links:

API: https://json-placeholder-api.now.sh/api/profiles

Finished Project: https://react-skeleton.now.sh/

Github Link: https://github.com/iamelimars/react-skeleton

14 Day free trial with Shopify 🔥🔥🔥🔥
https://www.shopify.com/?ref=eli-codes

Social:
Instagram: @iamelimarss
https://www.instagram.com/iamelimarss/?hl=en

Get $100 free with Vultr hosting 💰💰💰
https://www.vultr.com/?ref=8584529-6G

Tutorials